I am attempting to generate a graph in chart.js by utilizing data extracted from an SQL database using python. My current approach involves creating a JSON file in python and then loading it in javascript (although I am uncertain if this is the most optimal method).
Below is the snippet of code I am working with:
{% extends "layout.html" %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a09020b181e4400192a584453445e">[email protected]</a>/dist/Chart.min.js"></script>
{% block title %}
Graph
{% endblock %}
{% block main %}
<canvas id="chart" width="300" height="300"></canvas>
<script>
const labels = [];
const ycoordinate = [];
chartIt();
async function chartIt(){
await getData();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets:[{
data: ycoordinate
}],
},
options: {}});
}
async function getData(){
const response = await fetch('data.json');
const data = await response.text();
console.log(data);
const labels = data.map((x) => x.date);
const ycoordinate = data.map((x) => x.mass);
}
</script>
{% endblock %}
Upon running this code, I encounter a 500 internal server error at line 68, within the template {% endblock %}
jinja2.exceptions.TemplateSyntaxError: Unexpected end of template. Jinja was looking for the following tags: 'endblock'. The innermost block that needs to be closed is 'block'.
Additionally, my console displays Mixed content: load all resources via HTTPS to improve the security of your site