[Chartjs]-Passing data from Python to JavaScript to plot Chart.js

by

1👍

The data should come from HTTP calls; doesn’t really matter where that is, but it’s not directly from HTML or a ".py file". Since you’re using Flask and the data could be dynamic, you would add a route for it, not render it statically

# assume this is defined somewhere else, like a database 
chart_data = {
        "labels": ["Italy", "France", "Spain", "USA", "Argentina"],
        "values": [55, 49, 44, 24, 15]
    } 

@app.route("/data", methods=["GET"])
def data():
    global chart_data
    return jsonify(chart_data)

Then, you need a JS file that is loaded to call fetch API to get the data, and build the chart

let myChart = document.getElementById('myChart').getContext('2d');

fetch('http://127.0.0.1/data')
  .then(response => response.json())
  .then(data => {
       console.log(data);
       let labels = data.labels; 
       let barChart = new Chart(myChart, {  
           ... 
   });

Then you include the JS file in a template

<script type="text/javascript" src="{{ url_for('static', filename='app.js'}}"/>

Link to Flask static files with url_for

Leave a comment