How to plot 500 points in a second in highchart? - asp.net-mvc-3

Question

We are supposed to plot 500 points every second from ajax request which we get it from WCF service(hosted in amazon cloud).
We are using highchart, but its very slow.
Is there any solution ? or any other graph control which we can use it in our case so that performnace is efficient
var chart = new Highcharts.Chart({
chart: {
type: 'spline',
animation: false,//Highcharts.svg, // don't animate in old IE
marginRight: 10,
renderTo: 'Chart',
events: {
load: function () {
}
}
},
title: {
text: 'Data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
max: ((new Date()).getTime()) + 50 * 10000
},
yAxis: {
title: {
text: 'Data',
min: 50,
max: 500
},
plotLines: [{
value: 0,
width: 1,
color: '#FFFF00'
}]
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
tooltip: {
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
name: 'Chart',
color: '#335de8',
//data: []
data: (function () {
//generate an array of random data
var data = [];
var data = [],
time = (new Date()).getTime(), i;
for (i = 1; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: null
});
}
return data;
})()
}]
});
chart.yAxis[0].setExtremes(-200, 500);
UpdateChart();
function UpdateChart() {
var Chrt = chart.series[0];
setInterval(function () {
$.ajax({
url: 'getChartData/',
cache: false,
type: "POST",
success: function (result) {
for (var tmpJ = 0; tmpJ < result.length; tmpJ++) {
Chrt.addPoint([(new Date()).getTime(), eval(result[tmpJ])], true, false);
Chrt.redraw(false);
}
});
}, 1000);
}

Answer 1

Try to replace this line
Chrt.addPoint([(new Date()).getTime(), eval(result[tmpJ])], true, false);
with
if(tmpJ==result.length-1){
Chrt.addPoint([(new Date()).getTime(), eval(result[tmpJ])], false, false);
} else {
Chrt.addPoint([(new Date()).getTime(), eval(result[tmpJ])], true, false);
}