CODEWITHSUNDEEP
pythonflaskchart.jsjinja2
James Wonder
James Wonder

Reputation: 113

Flask with Chart JS Scatter Plot struggle

I want to generate a scatter plot in my Flask App using ChartJS. The two lists I have:

height=[168,170,180,190,200]
weight=[70,80,90,100,70]

I can not find an example of how to use my lists from Flask with the ChartJS. My solution does not work. Is there some sort of solution with my logic:

var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
    datasets: [{
        label: 'Scatter Dataset',
        data: [{
            x: [{% for item in height }]
                        {{item}},
                      {% endfor %}],

            y: [{% for item in weight }]
                        {{item}},
                      {% endfor %}]
        }
    }]
},

options: {
    scales: {
        xAxes: [{
            type: 'linear',
            position: 'bottom'
        }]
    }
}
});

Thank You

UPDATE HTML Template based on @Joost answer

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart</title>
</head>
<body>



 <canvas id="myChart1" width="400" height="400"></canvas>
 <script 
 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"> 
 </script>

    <script>
    var ctx = document.getElementById("myChart1").getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
       datasets: [{
        label: 'Scatter Dataset',
        data: [{
            x: {{height}},
            y: {{weight}}

        }]
    }]
},
options: {
    scales: {
        xAxes: [{
            type: 'linear',
            position: 'bottom'
         }]
      }
   }
 });
  </script>

  </body>
  </html>

Upvotes: 1

Views: 2581

Answers (2)

Al Martins
Al Martins

Reputation: 436

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

Upvotes: 0

Joost
Joost

Reputation: 3729

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()

Upvotes: 3

Related Questions