javascript - How to render multiple HighCharts using a queue to prevent long load times -

i using mvc razor foreach render charts, on 150.

this how generate script:

@{chartcount = 0;} @foreach (var item in model.chartrows.where(m => !m.summaryrow))     {          $('#container_@(chartcount)').highcharts({               //code removed brevity         });           chartcount++;     } 

and in html use render containers:

@for (int = 0; < chartcount; i++)     {         <div id="container_@(i)"></div><br />     } 

however, when there 100's of items in chartrows, page can take long time load before of charts appear. have taken on highcharts website , have found chart type called "sparkline" , jsfiddle example shows way rendering can delayed using settimout rendering them in "chunks".

for me make work way need, have remove of data script (or @ least being populated item.) , instead add 7+ data attributes onto each of html containers , use jquery data attributes populate chart data. i'm not excited approach make troubleshooting bit of nightmare.

does know if possible add each of charts being rendered kind of queue rendered 1 @ time instead of browser doing them @ same time?

this how did it:

<script>  var chartfunctions = []; @foreach (var item in model.chartrows.where(m => !m.summaryrow)) {      var chart_@(item.id) = function () {         $('#container_@(item.id)').highcharts({               //code removed brevity         });     }     //add function array     chartfunctions.push(chart_@(item.id));   }       function rendercharts() {         var time = +new date(),             len = chartfunctions.length;           (i = 0; < len; += 1) {              //call each function in function array             chartfunctions[i]();              // if process takes time             if (new date() - time > 500) {                  chartfunctions.splice(0, + 1);                 settimeout(rendercharts, 0);                 break;             }         }     }      rendercharts(); </script>  

and needed use foreach match chartid , containerid:

@foreach (var item in model.chartrows.where(m => !m.summaryrow)) {      <div id="container_@(item.id)"></div><br /> }