javascript - Stop Highcharts overwriting containers -


i wrote javascript function produce graphs inputed csv files. addresses of multiple csv files in graph_data.

the reason making loop , not separate because number of csv files in "graph_data" can vary.

this function seems work 1 shows graph of last csv , not earlier csv files. if change how many times loop runs produces other graphs never of them on same html page.

i think highcharts overwriting previous graphs don't know how fix it.

javascript:

      <script type="text/javascript">       var arraylength = {{graph_data}}.length;        (var = 0; < 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> 

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 question , answers.

javascript closure inside loops – simple practical example


Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -