[Chartjs]-Populating Chart.Js line graph with multiple lines using data from a JSON Object

by

2👍

✅

There are a few areas in your question where it isn’t quite clear what you’re looking for but you seem to be on the right track.

I think the main reason you’re coming unstuck is that you have potentially incomplete datasets thus complicating the picture when you come to set up your labels to cope with multiple datasets. One way to ameliorate this problem is to grab the areas where you have gaps and just put data in at zero value.

You’re right to want to extract the locations and the unique timestamps and these unique timestamps then become your master labels list against which you can compare your incomplete data and fill where necessary.

From there its just a matter of looping through the data and setting up the structures to pass to your charting function.

The looping part you weren’t sure of can be done like this:

  locations.forEach(function(location) 
    {
    var labels = [];
    var oos = [];
    obj.forEach(function(report) 
      {
      if(report.GRP === location)
        {
        oos.push(report.LOCATIONOOS)
        labels.push(report.DT);
        }
      });

It’s then necessary to append the missing covering values to the data. I’ve set these at zero although you may want to treat them differently.

Check out this working fiddle https://jsfiddle.net/jumpypaula/pgqy1k6d/7/

Leave a comment