Draw more than one chart on loop and chart.js framework

Question

I have a .json file that contains my charts, like this . So, using jQuery i get the data from json like:

/* myFunctionThatLoadCharts */
$.getJSON("myfilewithcharts.json", function(data){
   var myCharts = [];
   var ctx = [];
   var typeofChart;
   var dataofChart;
   var optionsofChart;
   var dashboard = document.getElementById("dashboard");

   for (let chart in data.charts){
      var content = "<div id='"+chart+"' class='square'>"+
                       "<canvas id='chart"+chart+"' width='400' height='400'></canvas>"+
                     "</div>";

      dashboard.innerHTML = dashboard.innerHTML + content;
      ctx.push(document.getElementById("chart"+chart).getContext('2d'));

      typeofChart = data.charts[chart].type;
      dataofChart = data.charts[chart].data;
      optionsofChart = data.charts[chart].options;

      myCharts.push(new Chart(ctx[chart], {
         type: typeofChart,
         data: dataofChart,
         options: optionsofChart
      }));

      content = "";
      typeofChart = "";
      dataofChart = "";
      optionsofChart = "";
   }
}

Where

data

is the response from $.getJSON jQuery function. But problem is: the code only generates the last chart and not both.

This function is invoked on <body> tag with onload attribute.. so, <body onload=myFunctionThatLoadCharts()>

Answer 1

Got it!

Before finding the solution i noticed that although there is in the DOM the elements to draw the other graphics, the code only referenced the last one. So i needed to generate the entire DOM for the graphics first and then draw them.

The problem was happening because "innerHTML" command, rewrite all DOM elements which interact with him, so i was losting all references for charts.

Now i have two functions, one to generate the DOM e another for draw the charts, like this

/* myFunctionThatGeneratesDOMelements */
var typeofChart = [];
var dataofChart = [];
var optionsofChart = [];
var dashboard = document.getElementById("dashboard");

$.getJSON("myfilewithcharts.json", function(data){
    for (let chart in data.charts){
        var content = "<div id='"+chart+"' class='square'>"+
                        "<canvas id='chart"+chart+"' width='400' height='400'></canvas>"+
                      "</div>";

        dashboard.innerHTML = dashboard.innerHTML + content;

        typeofChart.push(data.charts[chart].type);
        dataofChart.push(data.charts[chart].data);
        optionsofChart.push(data.charts[chart].options);
    }
    drawCharts(typeofChart, dataofChart, optionsofChart);
});

/* myFunctionToDrawCharts */
function drawCharts (toc, doc, ooc) {
   var ctx = [];
   var myCharts = [];

   for(let i = 0; i < toc.length; i++){
       ctx.push($("#chart"+i).get(0).getContext('2d'));
       myCharts.push(new Chart(ctx[i], {
           type: toc[i],
           data: doc[i],
           options: ooc[i]
       }));
   }
}

Other solutions is insertAdjacentHTML() and appendChild()

Draw more than one chart on loop and chart.js framework

Question

1 answers

solution1
0 2019-01-31 15:32:13

Draw more than one chart on loop and chart.js framework

Question

1 answers

solution1 0 2019-01-31 15:32:13

solution1
0 2019-01-31 15:32:13