[Chartjs]-Flask with Chart JS Scatter Plot struggle

by

3👍

✅

Your syntax is off. You’re printing []170,]170,]180,]

Since lists have the same syntax in python and js, you can just insert it directly into your js.

data: [{
        x: {{height}},
        y: {{weight}}
       }

EDIT:

Minimal working example:

from flask import Flask, render_template_string
app = Flask(__name__)

@app.route('/')
def hello_world():
    heights=[168,170,180,190,200]
    weights=[70,80,90,100,70]
    newlist = []
    for h, w in zip(heights, weights):
        newlist.append({'x': h, 'y': w})
    ugly_blob = str(newlist).replace('\'', '')

    return render_template_string(
    '''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart</title>
</head>
<body>
   <canvas id="myChart1" width="40px" height="40px"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
   <script>
   new Chart.Scatter(document.getElementById("myChart1"), {
   type: 'scatter',
   data: {
     datasets: [{
       label: 'Scatter Dataset',
       data: {{ data }},
       showLine: false,
       borderColor: "blue",
       backgroundColor: "blue"
     }]
   }
 });
  </script>
</body>
</html>
''', data=ugly_blob)

app.run()

0👍

Joost helped a lot!

Passing strings is an issue. If you need a borderColor, for instance, you should need to pass it as a global element:

    Chart.defaults.global.elements.point.borderColor = 'black';

From https://www.chartjs.org/docs/latest/configuration/elements.html

Leave a comment