How do I use ChartJS to render a line chart with multiple data points that are related

I am very new to chartJS and have been playing around with it, but I have been hitting a wall with this challenge. Using the following JSON data, I want to be able to create a graph with a list of PERSON's as the X-Axis and where each SECTION would be listed as an element in the legend. Each SECTION would present its own line on the graph. The SECTION names are not static and are created by the incoming JSON data from an API.

I would mention that if there is a better way to have the JSON formatted, that can be done also, but basically the PERSON has multiple Sections and within each Section, there are results that need to be plotted.

JSON

[{"PERSON":"Bethany Smith","Sections":[{"Section":"Adoptable Client","RESULTS":{"done":"46","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Catch-up Phase","RESULTS":{"done":"3","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Follow - up","RESULTS":{"done":"11","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"In Limbo","RESULTS":{"done":"162","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"7"}},{"Section":"Secret Column","RESULTS":{"done":"1","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Setup Phase","RESULTS":{"done":"5","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Waiting On Client","RESULTS":{"done":"7","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Follow - up","RESULTS":{"done":"1","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}}]},{"PERSON":"Cris White","Sections":[{"Section":"Catch-up Phase","RESULTS":{"done":"12","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Follow - up","RESULTS":{"done":"33","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Secret Column","RESULTS":{"done":"86","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Setup Phase","RESULTS":{"done":"1","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}}]},{"PERSON":"Bill Jones","Sections":[{"Section":"Adoptable Client","RESULTS":{"done":"6","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Catch-up Phase","RESULTS":{"done":"4","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Feedback","RESULTS":{"done":"0","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"1"}},{"Section":"Follow - up","RESULTS":{"done":"73","On_Track":"1","OverDue":"0","OverLast":"1","Over2":"0","OverBeyond":"1"}},{"Section":"Secret Column","RESULTS":{"done":"77","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"2"}},{"Section":"Setup Phase","RESULTS":{"done":"2","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Waiting On Client","RESULTS":{"done":"0","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"1"}}]},{"PERSON":"Jen Smith","Sections":[{"Section":"Adoptable Client","RESULTS":{"done":"12","On_Track":"0","OverDue":"0","OverLast":"1","Over2":"0","OverBeyond":"0"}},{"Section":"Catch-up Phase","RESULTS":{"done":"45","On_Track":"1","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"2"}},{"Section":"Feedback","RESULTS":{"done":"11","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Follow - up","RESULTS":{"done":"91","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"In Limbo","RESULTS":{"done":"18","On_Track":"1","OverDue":"1","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Secret Column","RESULTS":{"done":"271","On_Track":"2","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Setup Phase","RESULTS":{"done":"10","On_Track":"1","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}},{"Section":"Waiting On Client","RESULTS":{"done":"8","On_Track":"0","OverDue":"0","OverLast":"1","Over2":"1","OverBeyond":"1"}}]},{"PERSON":"Katie Jones","Sections":[{"Section":"Adoptable Client","RESULTS":{"done":"4","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"1"}},{"Section":"Feedback","RESULTS":{"done":"0","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"1"}},{"Section":"Secret Column","RESULTS":{"done":"60","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"2"}},{"Section":"Setup Phase","RESULTS":{"done":"3","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"0"}}]},{"PERSON":"Tina Hill","Sections":[{"Section":"Adoptable Client","RESULTS":{"done":"0","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"1"}},{"Section":"Catch-up Phase","RESULTS":{"done":"1","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"3","OverBeyond":"0"}},{"Section":"Follow - up","RESULTS":{"done":"0","On_Track":"0","OverDue":"0","OverLast":"0","Over2":"0","OverBeyond":"1"}}]}]

My code:

$.ajax({
    url: "successteamboardoverview.php",
    method: "GET",
    contentType: "application/text",
    dataType: 'text',

    success: function(data) {

      var thejson = JSON.parse(data);
      var thePERSONarray = [];
      var thePERSON;
      var thesectionarray = [];
      var thesection;
      var theresultarray = [];
      var theresultfull = [];

      for(var i in thejson) {
      
        thePERSON =  thejson[i].PERSON;
        console.log(thePERSON);
        thePERSONarray.push(thejson[i].PERSON);
        thesectionarrayfull = thejson[i].Sections;
        console.log(thesectionarrayfull);
        testit = thesectionarrayfull.length;
        console.log(testit);
        for (t = 0; t < testit; t++) {
            thesectionname = thesectionarrayfull[t].Section;
            theresultsX = thesectionarrayfull[t].ResultsX;      
            
            theresultarray.push(thesectionarrayfull[t].ResultsX);
            console.log(thesectionname);
            console.log(theresultsX);
            if(thesectionarray.includes(thesectionname)){
                } else {
                    thesectionarray.push(thesectionname);
                    }
            }

        console.log(thesectionarray);
        console.log(theresultarray);
        testit = theresultarray.length;
        console.log(testit);
      }

      var chartdata1x = {
        labels: thePERSONarray,
        datasets : [
          {
            label: 'Results',
            backgroundColor: ["#47780e", "#2ECC40", "#f0ec0c", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"],
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: theresultarray
          },
          {
            label: thesectionarray,
            backgroundColor: ["#47780e", "#2ECC40", "#f0ec0c", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"],
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: thesectionarray
          },
        ]
      };

      var ctx1x = $("#mycanvas3");
        ctx1x.width = 400;
        ctx1x.height = 200;

      var payrollpie1 = new Chart(ctx1x, {
        type: 'line',
        data: chartdata1x,
        options: {
            responsive: false,
            maintainAspectRatio: true,
            legend: {
                display: true,
                position: 'right',
                align: 'start',
                labels: {
                    fontColor: 'black'
                    }
                }

            ,parsing: {
                xAxisKey: thePERSONarray,
                yAxisKey: thesectionarray
            }


            ,title: {
                display: true,
                fontSize: '16',
                fontColor: 'black',
                text: 'Status Board'
                }
             ,scales: {
                yAxes: [{
                  scaleLabel: { labelString: thePERSONarray },
                  ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
                  gridLines: {display: true}
                }]
                ,xAxes: [{
                  scaleLabel: { labelString: thesectionarray },
                  ticks: { min: 1, max: 5, stepSize: 1, suggestedMin: 0.5, suggestedMax: 5.5},
                  gridLines: {display: true}
                }]
               },

            }
      });
      
      

      
      
    },
    error: function(data) {
        alert('Did not work');
      console.log(data);
    }
  });


Read more here: https://stackoverflow.com/questions/64900498/how-do-i-use-chartjs-to-render-a-line-chart-with-multiple-data-points-that-are-r

Content Attribution

This content was originally published by Corey Bailey at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: