title: Create multiple chart.js charts from jsonfile data
body: <p>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.<code>chartObject[0]</code> has <code>chartObject[0][0]</code> and <code>chartObject[0][1]</code> for x and y axis.</p>
  
  <p>This is the <a href="http://secstat.info.s3.eu-west-2.amazonaws.com/testthechartdata001.json" rel="nofollow noreferrer">json</a> containing the list and sublist.</p>
  
  <p>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).</p>
  
  <p>How do I loop through the json file listed in the code below and create multiple chart.js charts? i.e. a chart for <code>chartObject[0]</code>, <code>chartObject[1]</code> etc.</p>
  
  <pre><code>&lt;script&gt;
  
      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
              }
            }
          ]
      }
      }
    });
  }
      &lt;/script&gt;
  </code></pre>