javascript - HighCharts is slow to load data when building multiple charts -

i have page 2 highcharts on , wondered if there way speed load times charts. first main chart 2 series , second, more of ‘thumbnail’ chart , has 4 series.

i populate listbox list of dates , user selects each date make ajax call data.

i build charts in constructor …

basicmaxchart = function() {             options = {     chart: {},     /*missed brevity*/,     series: [{},{}]      }; // options     return options; }; // max  basicminichart = function() {            optionsmini = {     chart: {},     /*missed brevity*/,     series: [{},{},{},{}]      }; // optionsmini     return optionsmini; }; // mini 

my document ready function,

// globals var options; var optionsmini;  var chart; var chartmini;  jquery("document").ready(function() {      function createchart() {         options = $.extend({}, basicmaxchart options);         chart = new highcharts.chart(options);       };      function createminichart() {         optionsmini = $.extend({}, basicminichart(), optionsmini);         chartmini = new highcharts.chart(optionsmini);     };      // create empty charts place holders     createchart();     createminichart();      function loaddata(){         // missed brevity, declare vars , values inputs         var alen = document.getelementbyid("someinput").value;         var d1 ...          var data = {                 compared1   : d1,                 m1          : m1,                 someval     : alen                };             $.post("getsomedata.php", data, function(json) {                 /* clearing series first or ‘destroying’ chart only serves make things worse …                 if (typeof chartmini != 'undefined') {                     while(chartmini.series.length > 0)                     chartmini.series[0].remove();                     //chartmini.destroy();                 }                 */                 options.series[0] = json[0];                  options.series[1] = json[1];                  optionsmini.series[0] = json[3];                 optionsmini.series[1] = json[4];                 optionsmini.series[2] = json[5];                 optionsmini.series[3] = json[6];                  chart = new highcharts.chart(options);                               chartmini = new highcharts.chart(optionsmini);                  chart.series[0].options.color = 'blue';                 chart.series[0].update(chart.series[0].options);                 chart.series[1].options.color = 'red';                 chart.series[1].update(chart.series[1].options);                  chartmini.series[0].options.color = '#a9cbe9';                 ….                 ….                 chartmini.series[3].update(chartmini.series[3].options);              }, "json"); }); // ready 

the loaddata function makes ajax call , returns json object containing data both charts within 500ms. (i'm happy speed of getsomedata.php script).

if remove related chartmini / optionsmini loaddata function, main chart loads too. throw ‘mini’ in things slow down , neither charts displays 5 seconds (in fact 'not responding message in firefox'). each ‘data’ element in json object has 700 data points (i didn’t think particularly large).

i take inexperience highcharts cause of slowness. may ask if have suggestions on how might improve performance of build / load times 2 charts.

thanks reading.

from code you've displayed costly part after you've created chart, continue update it. every update method call make force redraw, resource demanding.

ideally finish of options in advance of creating chart. depends on json make correct, imagine this:

options.series[0] = json[0]; options.series[0].options.color = 'blue';    options.series[1] = json[1]; options.series[1].options.color = 'red';  optionsmini.series[0] = json[3]; optionsmini.series[0].options.color = '#a9cbe9'; // ...  chart = new highcharts.chart(options);               chartmini = new highcharts.chart(optionsmini); 

you may have create options object if not exist in json.

the alternative lazy variation of postpone redraw in current code, , 1 manual redraw after it. imagine this:

chart = new highcharts.chart(options);               chartmini = new highcharts.chart(optionsmini);  chart.series[0].options.color = 'blue'; chart.series[0].update(chart.series[0].options, false); // false prevent redraw chart.series[1].options.color = 'red'; chart.series[1].update(chart.series[1].options, false); // false prevent redraw  chartmini.series[0].options.color = '#a9cbe9'; chartmini.series[0].update(chartmini.series[0].options, false); // false prevent redraw // ...  chart.redraw(); // force redraw after changes made chartmini.redraw(); // force redraw after changes made 

note slower first approach requires updating lots of data in series several times , doing 1 redraw of each chart not happen first approach.