Multiple chart on one page using chart.js and Flask app

Question

I am trying to get multiple charts on one web page with different value. I can get two charts, but displays same data. Can someone please help me what i am missing? Below is App.py where I am reading data from csv file.

temp.csv
Month,Temperature,Temp
January,7,10
February,7,30
March,10,5
April,15,25
May,20,20
June,23,15
July,26,20

App.py

from flask import Flask, render_template, url_for, redirect, request
import pandas as pd
app = Flask(__name__)

@app.route('/')
def index():
df = pd.read_csv('temp.csv')

legend = 'Monthly Data'
legend1 = "Test"
labels = list(df.Month)
values = list(df.Temperature)
values1 = list(df.Temp)
return render_template('index.html', values=values, labels=labels, 
legend=legend,values1=values1, legend1=legend1)

if __name__ == "__main__":
app.run(debug=True)

Below is my index. html. I am trying to call values from App.py file.

index.html

{% extends 'base.html' %}


{%block head %}
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>My Chart.js Chart</title>
{% endblock %}

{% block body %}
<h1>Burn Page</h1>
<div class="container">
<canvas id="myChart" width="400" height="200"></canvas>
</div>

<div class="container">
<canvas id="myChart2" width="400" height="200"></canvas>
</div>
<script>
Chart.defaults.global.responsive = false;

var chartData = {
labels : [{% for item in labels %}
         "{{item}}",
        {% endfor %}],
datasets : [{
  label: '{{ legend }}',
  fill: true,
  lineTension: 0.1,
  backgroundColor: "rgba(75,192,192,0.4)",
  borderColor: "rgba(75,192,192,1)",
  borderCapStyle: 'butt',
  borderDash: [],
  borderDashOffset: 0.0,
  borderJoinStyle: 'miter',
  pointBorderColor: "rgba(75,192,192,1)",
  pointBackgroundColor: "#fff",
  pointBorderWidth: 1,
  pointHoverRadius: 5,
  pointHoverBackgroundColor: "rgba(75,192,192,1)",
  pointHoverBorderColor: "rgba(220,220,220,1)",
  pointHoverBorderWidth: 2,
  pointRadius: 1,
  pointHitRadius: 10,
  data : [{% for item in values %}
            {{item}},
          {% endfor %}],
  spanGaps: false
}]
}

var ctx = document.getElementById("myChart").getContext("2d");


var myChart = new Chart(ctx, {
type: 'line',
data: chartData,
});

Chart.defaults.global.responsive = false;

var chartData2 = {
labels : [{% for item in labels %}
         "{{item}}",
        {% endfor %}],
datasets : [{
label: '{{ legend1 }}',
ill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
  data : [{% for item in values1 %}
            {{item}},
          {% endfor %}],
  spanGaps: false
 }]
}


var ctx2 = document.getElementById("myChart2").getContext("2d");



var myChart2 = new Chart(ctx2, {
type: 'line',
data: chartData,
});
</script>
{% endblock %}

So you want a separate chart for Temperature and Temp columns of the CSV? Wouldn't it make sense to have two lines on the one chart (multiple datasets)? — v25
Yes and yes. I was going for having two lines in one chart, but since my guys want it to display at the production floor station and think it will be too confusing for the workers. — LoneExplorer

LoneExplorer LoneExplorer · Accepted Answer · 2020-08-29T02:25:57

I finally figured it out. For second chart i was calling first chart function. Changed that and it is all working now.
It should be "chartData2 and not chartData toward the end of my html (java script) code

data: chartData2,
});
</script>
{% endblock %}

Multiple chart on one page using chart.js and Flask app

1 Answers