Populating Chart.Js line graph with multiple lines using data from a JSON Object

Question

I have a JSON object and I'm trying to plot the data on a line graph using Chart.Js. I'm able to do it succesfully with a single event, but I'm having trouble charting events that cover multiple geographic locations.

[{"DT":"2018-10-10","LOCATIONOOS":0,"GRP":"GEORGIA"},{"DT":"2018-10-10","LOCATIONOOS":6,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-11","LOCATIONOOS":13,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-11","LOCATIONOOS":195,"GRP":"GEORGIA"},{"DT":"2018-10-12","LOCATIONOOS":66,"GRP":"GEORGIA"},{"DT":"2018-10-12","LOCATIONOOS":3,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-13","LOCATIONOOS":0,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-13","LOCATIONOOS":20,"GRP":"GEORGIA"},{"DT":"2018-10-14","LOCATIONOOS":10,"GRP":"GEORGIA"},{"DT":"2018-10-14","LOCATIONOOS":0,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-15","LOCATIONOOS":0,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-15","LOCATIONOOS":5,"GRP":"GEORGIA"},{"DT":"2018-10-16","LOCATIONOOS":2,"GRP":"GEORGIA"},{"DT":"2018-10-17","LOCATIONOOS":2,"GRP":"GEORGIA"}]

First: I am getting the unique dates from the JSON object to use as my x-axis labels:

//get the unique dates from the json obj which will be used as labels on the chart
    labels = [];
    var labels = [];
        for(i = 0; i< obj.length; i++){    
        if(labels.indexOf(obj[i].DT) === -1){
            labels.push(obj[i].DT);
        }
        }

Next I am doing the same things for the GRP (locations). I believe I need this data because that will be the amount of lines I'd like to display on my graph:

    locations = [];
    for(i = 0; i< obj.length; i++){    
        if(locations.indexOf(obj[i].GRP) === -1){
            locations.push(obj[i].GRP);
        }
    }

Finally - I somehow have to loop over the JSON obj and push data to (in this case) two different datasets to chart on the graph. This is the part I am fuzzy about... I believe I probably need a nested loop with the outer loop going over the JSON obj and the inner loop going over the locations array and pushing data into two different datasets object...

    locationoos = [];
    for(i = 0; i< obj.length; i++){
        var data = {
           labels: labels,
            datasets: [{
                label: locations[0],
                borderColor: "red",
                borderWidth: 2,
                hoverBackgroundColor: "red",
                hoverBorderColor: "red",
                data: locationsoos,
                fill: false
            }]
        }
    }

Anyone have experience doing this?

Full function:

function initGraph() {
    var labels = [];
    var counts = [];
    var grp = [];

    $.ajax({
        type: "GET",
        url: "../test/cfc/test.cfc",
        cache: false,
        async: false,
        data: { method: "getChartData",
            Id: 29,
        },
        success: function(output) {
            json = output;
            obj = JSON.parse(json);
        },
        error: function(httpRequest, textStatus, errorThrown) {
            alert("initGraph status=" + textStatus + ",error=" + errorThrown);
        }
    });


    //get the unique dates from the json obj which will be used as labels on the chart
    var labels = [];
    for(i = 0; i< obj.length; i++){    
        if(labels.indexOf(obj[i].DT) === -1){
            labels.push(obj[i].DT);
        }
    }

    //select the unique market clusters
    var locations = [];
    for(i = 0; i< obj.length; i++){    
        if(locations.indexOf(obj[i].GRP) === -1){
            locations.push(obj[i].GRP);
        }
    }

    locationsoos=[]
    //loop over obj.length
    for(i = 0; i< obj.length; i++){
        //loop over locations array
        for(j = 0; j< locations.length; j++){
            var data = {
                    labels: labels,
                    datasets: [{
                        label: locations[0],
                        //backgroundColor: "",
                        borderColor: "red",
                        borderWidth: 2,
                        hoverBackgroundColor: "red",
                        hoverBorderColor: "red",
                        data: locationsoos,
                        fill: false
                    }]  
            }
        }
    };

    var options = {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        precision: 0
                    }
                }]
            },
            title: {
                display: true,
                text: 'Locations OOS vs Time',
                fontStyle: 'bold',
                fontColor: 'blue',
                position: 'top',
                fontSize: 14
            }
        };

    Chart.Line('mobGraph', {
      data: data,
      options: options
    });
}

Paula Livingstone · Accepted Answer · 2019-04-14 20:41:05Z

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/

answered Apr 14, 2019 at 20:41

Paula Livingstone

1,2251 gold badge13 silver badges22 bronze badges

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

1 Comment

Vince Over a year ago

Thank you so much! This is working perfectly for me. I'll have to figure out how I want to handle the missing data, but I think zeros work for now. I really really appreciate you taking the time to go through this.

Collectives™ on Stack Overflow

Populating Chart.Js line graph with multiple lines using data from a JSON Object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related