Hi guys I'm working on a project that needs a graph. I decided to use the Flask framework and saw a lot of people online using Chart.js. However I think there may be an issue with passing the values from python to the html file with javascript. I could be wrong but I think its and issue with the jinja template or how I am using it.
Can anybody help? Thanks in advance
Part of Python file
@app.route('/data')
def data():
legend = 'Monthly Data'
labels = ["January", "February", "March", "April", "May", "June", "July", "August"]
values = [10, 9, 8, 7, 6, 4, 7, 8]
return render_template('graph.html', values=values, labels=labels, legend=legend)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<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: "Data points",
data: '{{values | safe }}',
fill: false,
borderColor: "rgb(75, 192, 192)",
lineTension: 0.1
}
]
},
options: {
responsive: false
}
});
</script>
</body>
</html>