Create multiple chart.js charts from jsonfile data

Question

I have created a json file using python which is a list of lists. Each sublist has data for a chart.js chart i.e.chartObject[0] has chartObject[0][0] and chartObject[0][1] for x and y axis.

This is the json containing the list and sublist.

The code below creates one chart but I would like to loop though all entries and create charts for each sublist (multiple instances of the chart).

How do I loop through the json file listed in the code below and create multiple chart.js charts? i.e. a chart for chartObject[0], chartObject[1] etc.

<script>

    const requestURL =
  "http://secstat.info.s3.eu-west-2.amazonaws.com/testthechartdata001.json";
const request = new XMLHttpRequest();
request.open("GET", requestURL);
request.send();

request.onreadystatechange = function() {
  if (request.readyState === 4) {
    doWithResponse(request.response);
  }
};

function doWithResponse(chart) {
  var chartObject = JSON.parse(chart)
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: "horizontalBar",
    data: {
      labels: [...chartObject[0]],
      datasets: [
        {
          label: "Frequency",
          data: [...chartObject[1]],
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)"
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)"
          ],
          borderWidth: 2
        }
      ]
    },
    options: {
        title: {
                display: true,
                text: 'Threat Count'},
    legend: {
                    display: false
                }     ,
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true
            }
          }
        ]
    }
    }
  });
}
    </script>

Answer 1

You can do it this way :

 <script>
   const requestURL =
   "http://secstat.info.s3.eu-west-2.amazonaws.com/testthechartdata001.json";
 const request = new XMLHttpRequest();
 request.open("GET", requestURL);
 request.send();

 request.onreadystatechange = function() {
   if (request.readyState === 4) {
     doWithResponse(request.response);

   }
 };

 function doWithResponse(chart) {
   const chartObject = JSON.parse(chart)
   var canvasArray = [];
   for (let i = 0; i < chartObject.length / 2; i++) {
     document.getElementById('myChart').innerHTML += "<canvas id=c" + i + "></canvas>";
     var ctxPrep = "c" + i;
     canvasArray.push(ctxPrep)
   }
   var el = 0;
   for (let i = 1; i <= chartObject.length - 1; i = i + 2) {
     var ctx = document.getElementById(`${canvasArray[el]}`).getContext("2d");
     el++
     var myNewChart = new Chart(ctx, {
       type: "horizontalBar",
       data: {
         labels: chartObject[i - 1].map((x, index) => chartObject[i - 1][index]),
         datasets: [{
           label: "Frequency",
           data: chartObject[i].map((x, index) => chartObject[i][index]),
           backgroundColor: [
             "rgba(255, 99, 132, 0.2)",
             "rgba(54, 162, 235, 0.2)",
             "rgba(255, 99, 132, 0.2)",
             "rgba(54, 162, 235, 0.2)",
             "rgba(255, 99, 132, 0.2)",
             "rgba(54, 162, 235, 0.2)",
             "rgba(255, 99, 132, 0.2)",
             "rgba(54, 162, 235, 0.2)",
             "rgba(255, 99, 132, 0.2)",
             "rgba(54, 162, 235, 0.2)"
           ],
           borderColor: [
             "rgba(255, 99, 132, 1)",
             "rgba(54, 162, 235, 1)",
             "rgba(255, 99, 132, 1)",
             "rgba(54, 162, 235, 1)",
             "rgba(255, 99, 132, 1)",
             "rgba(54, 162, 235, 1)",
             "rgba(255, 99, 132, 1)",
             "rgba(54, 162, 235, 1)",
             "rgba(255, 99, 132, 1)",
             "rgba(54, 162, 235, 1)"
           ],
           borderWidth: 2
         }]
       },
       options: {
         title: {
           display: true,
           text: 'Threat Count'
         },
         legend: {
           display: false
         },
         scales: {
           yAxes: [{
             ticks: {
               beginAtZero: true
             }
           }]
         }
       }
     });
   }
   }
 </script>