I have a file locally that has JSON formatted data. I have created little PHP script to echo out the the output of this file when call via AJAX. The data file's size is 59k. I followed the highcharts remendation to disable animation and shadow. when I load the chart, it takes a very very very long time to render. I have pasted the script below. Any ideas what I can do to render this chart faster? As it stands, this is definitely not acceptable.
echo_file.php output looks like this:
[{"name":"loess","data":[[1373241600000,3.49571041760408],[1373241660000,3.4844505982485],[1373241720000,3.47324293684199],[1373241780000,3.46208745646435],[1373241840000,3.45098418019539],[1373241900000,3.43993313111491],[1373241960000,3.42893433230273],[1373242020000,3.41798780683864],[1373242080000,3.4070935778
43611722495],[1373243400000,3.18069824879358],[1373243460000,3.17101320762565],[1373243520000,3.16138101680096],[1373243580000,3.15180169939934],[1373243640000,3.14227527850057],[1373243700000,3.13280177718446],[1373243760000,3.12338121853083],[1373243820000,3.11401362561948],[1373243880000,3.10469902153021]]}]
this is the script:
$(document).ready(function() {
var seriesOptions = [],
yAxisOptions = [],
colors = Highcharts.getOptions().colors;
function myAjax() {
$.ajax({
url: 'echo_file.php',
datatype: 'json',
success: function(data) {
seriesOptions=data;
createChart();
},
cache: false
});
}
setInterval(myAjax, 300000);
function createChart() {
$('#container').highcharts('StockChart', {
chart: {
animation: false,
shadow: false
},
title : {
text : 'CPU Utilization'
},
plotOptions: {
series: {
lineWidth: 2
}
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'minute',
count: 60,
text: 'hourly'
}, {
type: 'all',
text: 'All'
}]
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
minPadding:0.02,
maxPadding:0.02,
ordinal: false
},
yAxis: {
labels: {
formatter: function() {
//return (this.value > 0 ? '+' : '') + this.value + '%';
return (this.value);
}
}
},
yAxis : {
title : {
text : '% CPU Utilization'
},
min:0,
max:100,
plotLines : {
value : 70,
color : '#FFA500',
dashStyle : 'shortdash',
width : 2,
label : {
text : 'Threshold',
align:'right'
}
}
},
scrollbar: {
enabled: true
},
navigator : {
adaptToUpdatedData: false
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
I have a file locally that has JSON formatted data. I have created little PHP script to echo out the the output of this file when call via AJAX. The data file's size is 59k. I followed the highcharts remendation to disable animation and shadow. when I load the chart, it takes a very very very long time to render. I have pasted the script below. Any ideas what I can do to render this chart faster? As it stands, this is definitely not acceptable.
echo_file.php output looks like this:
[{"name":"loess","data":[[1373241600000,3.49571041760408],[1373241660000,3.4844505982485],[1373241720000,3.47324293684199],[1373241780000,3.46208745646435],[1373241840000,3.45098418019539],[1373241900000,3.43993313111491],[1373241960000,3.42893433230273],[1373242020000,3.41798780683864],[1373242080000,3.4070935778
43611722495],[1373243400000,3.18069824879358],[1373243460000,3.17101320762565],[1373243520000,3.16138101680096],[1373243580000,3.15180169939934],[1373243640000,3.14227527850057],[1373243700000,3.13280177718446],[1373243760000,3.12338121853083],[1373243820000,3.11401362561948],[1373243880000,3.10469902153021]]}]
this is the script:
$(document).ready(function() {
var seriesOptions = [],
yAxisOptions = [],
colors = Highcharts.getOptions().colors;
function myAjax() {
$.ajax({
url: 'echo_file.php',
datatype: 'json',
success: function(data) {
seriesOptions=data;
createChart();
},
cache: false
});
}
setInterval(myAjax, 300000);
function createChart() {
$('#container').highcharts('StockChart', {
chart: {
animation: false,
shadow: false
},
title : {
text : 'CPU Utilization'
},
plotOptions: {
series: {
lineWidth: 2
}
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'minute',
count: 60,
text: 'hourly'
}, {
type: 'all',
text: 'All'
}]
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
minPadding:0.02,
maxPadding:0.02,
ordinal: false
},
yAxis: {
labels: {
formatter: function() {
//return (this.value > 0 ? '+' : '') + this.value + '%';
return (this.value);
}
}
},
yAxis : {
title : {
text : '% CPU Utilization'
},
min:0,
max:100,
plotLines : {
value : 70,
color : '#FFA500',
dashStyle : 'shortdash',
width : 2,
label : {
text : 'Threshold',
align:'right'
}
}
},
scrollbar: {
enabled: true
},
navigator : {
adaptToUpdatedData: false
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
- Try using this idea: highcharts./stock/demo/lazy-loading – svillamayor Commented Jul 9, 2013 at 13:55
- @svilamayor, I tried that without any luck. – user1471980 Commented Jul 9, 2013 at 14:09
- How many points you want to show in the chart? You sure that is render time and not the time to bring the data from the server? – svillamayor Commented Jul 9, 2013 at 14:11
- @svillamayor, the data file is local to the server, it is already in json format. I am using php file to echo out the contents. there is no db connection anything. I wanted to display the chart very fast, there is something wrong. – user1471980 Commented Jul 9, 2013 at 14:17
- Take a look at your CPU and processor usage, too. Since javascript is all client-side, the performance is entirely linked to the performance of the client machine. Try a different browser, too; your "daily driver" might be getting clogged (the Firefox install on my home PC has a tendency to get very sluggish over time without a cache clear) or you might have an extension wreaking havoc. For example, there is a known issue with Firebug slowing page rendering down in Firefox versions less than 22. My point is, check out some of the other variables involved, the code seems fine. – Chris Baker Commented Jul 9, 2013 at 14:36
2 Answers
Reset to default 7Highcharts just released a boost module that helps speed up charts with large amounts of data points. You need a modern browser to use this.
https://github./highslide-software/highcharts./blob/master/js/modules/boost.src.js
This is my highcharts options when I want to speed up rendering. It removes all animation, click events and tooltips.
Highcharts.setOptions({
plotOptions: {
area: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
arearange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areaspline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areasplinerange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
boxplot: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bubble: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
column: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
columnrange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
errorbar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
funnel: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
gauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
heatmap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
line: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pie: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
polygon: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pyramid: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
scatter: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
series: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
solidgauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
spline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
treemap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
waterfall: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
},
chart: {
reflow: false,
events: {
redraw: function() {
console.log("highcharts redraw, rendering-done");
$('body').addClass('rendering-done');
}
},
animation: false
},
tooltip: {
enabled: false,
animation: false
},
exporting: {
enabled:false
},
credits: {
enabled: false
}
});
Even if the file is local data must travel to the browser, since the chart is drawn there, here is an example with 52k points and the chart is loaded pretty fast.
See http://highcharts./stock/demo/data-grouping
If in your case you have too many points maybe you should take some mechanism to divide on representative samples, as it has no sense to show a chart where the eye can not distinguish between the different values.
See http://highcharts./stock/demo/lazy-loading