Stop Highcharts overwriting containers

Question

I wrote this javaScript function to produce graphs for inputed csv files. The addresses of the multiple csv files are in graph_data.

The reason I am making this as a loop and not separate is because the number of csv files that are in "graph_data" can vary.

This function seems to work but it one shows the graph of the last csv and not the earlier csv files. If I change how many times the loop runs it produces the other graphs but never all of them together on the same HTML page.

I think Highcharts is overwriting the previous graphs but I don't know how to fix it.

Javascript:

      <script type="text/javascript">
      var arrayLength = {{graph_data}}.length;

      for (var i = 0; i < arrayLength; i++) {
          data = ({{graph_data}}[i]);

          var container="#container"+i;

          $.get(data, function(csv) {

              $(container).highcharts({
                  chart: {
                      zoomType: 'x',
                      type: 'column',
                      renderTo: 'container'+i
                  },
                  data: {
                      csv: csv,
                      lineDelimiter: "\n"
                  },
                  title: {
                      text: "title"
                  },
                  yAxis: {
                      title: {
                          text: 'Units'
                      }
                  },
                  plotOptions: {
                      series: {
                          marker: {
                              enabled: false
                          }
                      }
                  }
              });

          });
      }

      </script>

HTML:

<div id="container0" style="width:100%; height:1400px;"></div>        
<div id="container1" style="width:100%; height:1400px;"></div>

score 0 · Answer 1 · answered Jan 28 '16 at 11:49

You need to create your divs dynamically and then generate highcharts. create a function which include all your chart config and do as below :

var parent_div =$( "#yourParentDivId" ).append( "div" ).attr( "class", "someclass" ); 
var child_div = parent_div.append( "div" ).attr( "id", container"+i);
var chart_data = getChartData(  graph_data[i], container"+i);
var chart = new Highcharts.Chart( chart_data );

In getChartdata methode you have to provide series data and dynamically created div's ID (container+i) .

score 0 · Accepted Answer · edited May 23 '17 at 12:04

Use jQuery.each() or Array.prototype.forEach().

jQuery.each():

$.each({{graph_data}}, function (i, data) {
  $.get(data, function(csv) {
    $('#container' + i).highcharts({
      chart: {
        zoomType: 'x',
        type: 'column',
      },
      data: {
        csv: csv,
        lineDelimiter: "\n"
      }
    });
  });
});

Array.prototype.forEach():

{{graph_data}}.forEach(function (data, i) {
  $.get(data, function(csv) {
    $('#container' + i).highcharts({
      chart: {
        zoomType: 'x',
        type: 'column',
      },
      data: {
        csv: csv,
        lineDelimiter: "\n"
      }
    });
  });
});

Why?

See this question and answers.

JavaScript closure inside loops – simple practical example

I used the jQuery.each(): approach and it worked exactly how I wanted to, Thank you! — Catherine, Jan 28 '16 at 15:51

Stop Highcharts overwriting containers

2 Answers2

Why?