Loading data into chart on html page

Question

I am attempting to create a webpage that creates a simple chart using chart.js. I want to store all data related to the chart into a separate file ./file.json. When I attempt to load the html page while attempting to load data from ./file.json into chartdata, the chart fails to appear, but when I insert the data directly into script.js, it works.

Here is my faulty code within the script:

const chartdata = require('./file.json');
let myChart = document.getElementById('myChart').getContext('2d');

let massPopChart = new Chart(myChart, {
    type:'bar',
    data: {
        labels:[ 'Boston', 'Worcester', 'Springfield', 'Lowell', 'Dick' ],
        datasets:[{
            label: 'population',
            data: chartdata
        }]
    },
    options: {}
});

The chart successfully appears in the html page when I insert the data directly:

let myChart = document.getElementById('myChart').getContext('2d');

let massPopChart = new Chart(myChart, {
    type:'bar',
    data: {
        labels:[ 'Boston', 'Worcester', 'Springfield', 'Lowell', 'Dick' ],
        datasets:[{
            label: 'population',
            data: [135850, 52122, 148825, 16939, 9763]
        }]
    },
    options: {}
});

Any suggestions?

Jonah C Rowlinson · Accepted Answer · 2020-08-30 18:30:06Z

1

You need to pass the data to charts.js as an array instead of just as a JSON file. I've included an example below. It uses the fs library, which i think is included in node by default.

const fs = require("fs");
let myChart = document.getElementById('myChart').getContext('2d');

// read file sample.json file
fs.readFile('./file.json',
    // callback function that is called when reading file is done
    function(err, data) { 
        // json data
        var jsonData = data;
 
        // parse json
        var jsonParsed = JSON.parse(jsonData);
    }
);

let massPopChart = new Chart(myChart, {
    type:'bar',
    data: {
        labels:[ 'Boston', 'Worcester', 'Springfield', 'Lowell', 'Dick' ],
        datasets:[{
            label: 'population',
            data: jsonParsed
        }]
    },
    options: {}
});

answered Aug 30, 2020 at 18:30

Jonah C Rowlinson

5074 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Julian Martinez Over a year ago

Thanks for the response. I tried your code, but I still have the same problem: the browser is not loading the chart anymore.

Jonah C Rowlinson Over a year ago

Try using console.log(jsonParsed); to make sure that it is in the format you need it in - if it's not then at least we know what it is so we can convert it. Also, the reason for the chart not loading in, could be an error in your code somewhere. It could be anywhere in the file messing up. Check the console in Developer Tools (F12 in most browsers)

Julian Martinez Over a year ago

It doesn't console.log. I also get the following errors in my console: DevTools failed to load SourceMap: Could not load content for chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/contentscript.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load SourceMap: Could not load content for chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/sourcemaps/inpage.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Jonah C Rowlinson Over a year ago

Those console errors have nothing to do with the project I suspect and more to do with errors in extensions you have installed. Where have you put console.log(jsonParsed);? You might have put it somewhere that doesn't get run? Try putting it just before let massPopChart, if that isn't where it is already.

Jonah C Rowlinson Over a year ago

Just realised - jsonParsed might not be accessible outside of fs.readFile(). Try this code: PasteBin

Collectives™ on Stack Overflow

Loading data into chart on html page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related