1

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>
{% endblock %}
{% 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 %}

Here is the format of my json file:

[{"date": "2020/07/28", "mass": 68.3}, {"date": "2020/07/29", "mass": 68.3}, {"date": "2020/07/30", "mass": 69.5},...]

My code works if a hardcode the json file into the JavaScript but as this will be changing as the users database I can't do this. When I run the code I get the following errors in my console:

Failed to load resource: the server responded with a status of 404 (NOT FOUND)

Uncaught (in promise) TypeError: data.map is not a function at getData (graph:92) at async chartIt (graph:66)

Matthew McKinley
  • 31
  • 7
  • 1
    in your getData(), you are assigning labels and ycoordinate to variables within the scope of the getData() function. So when you go to assign the labels and data in chartIt(), they will be still be the empty arrays from above. Either reassign labels and ycoordinate to the higher scope, or add a return value to the getData and assign from there. It might not be your main problem if you are getting a 404, but it will be a problem for you at some point. – Ben Bradshaw Jan 27 '21 at 20:19
  • @BenBradshaw sorry i'm still new to coding i'm not entirely sure what you mean, would you be able to show me in code so I can understand better – Matthew McKinley Jan 27 '21 at 20:25
  • 1
    take a look at this example https://stackblitz.com/edit/web-platform-smsfaj?file=index.html – Ben Bradshaw Jan 27 '21 at 20:58
  • thanks I seem to have an issue with the actual loading of the JSON as when I hard code the data it works but when I don't I get the same error message as before – Matthew McKinley Jan 27 '21 at 21:17
  • 1
    Perhaps there is an issue with your fetch('data.json'). try using a different library or method to load the json from the file. take a look at this post https://stackoverflow.com/questions/7346563/loading-local-json-file – Ben Bradshaw Jan 27 '21 at 21:29

0 Answers0