0
295
ViewsI use Python Flask and javascript to build a line chart, but it is not working although I can see the values are present in chrome inspect elements
I am trying to build a line chart by using python Flask and HTML. Here is my HTML scripts
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<body>
<canvas id="lineChart" width="900" height="400"></canvas>
<script>
var ctx = document.getElementById("lineChart").getContext("2d");
var lineChart = new Chart (ctx, {
type: "line",
data: {
labels: {{ labels | safe }}
datasets: [
{
label: "Room 1 Temperature",
data: {{ values | safe }},
fill: false,
borderColor: "rgb(75, 192, 192)",
lineTension: 0.1
}
]
},
options: {
responsive: false
}
});
</script>
</body>
</html>And here is the python scripts:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/test')
def test():
data = [
("a", 70),
("b", 50),
("c", 10),
("d", 60),
("e", 50),
("a", 90),
]
labels = [row[0] for row in data]
values = [row[1] for row in data]
return render_template('test.html', labels=labels, values=values)
the problem is it displays nothing when I run it, but this use case is working fine.
What makes me even more confuse is, I can see the labels and values variables are already present in html when I troubleshoot in chrome.
Can anyone tell me what I did it wrongly? Thank you in advance
·
Juan Pablo Isaza
1 answers
Answer question0
You just forgot to add comma after labels.
·
Juan Pablo Isaza
Report
Answer question