loading json file to create chart

by

I am trying to create a graph in chart.js from data that i have extracted from an SQL database using python. I am creating a JSON file in python which I then load in javascript (I don’t know if this is the best way to do this).

Here is my code

{% extends "layout.html" %}

{% block head %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/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 %}

When I run this I get a 500 internal server error line 68, in 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’.

and in my console I get Mixed content: load all resources via HTTPS to improve the security of your site

86 thoughts on “loading json file to create chart”