Hi I am making a query tool that will view large sets of data and viewing it through
Highcharts. My query tool allows you to choose a variety of tags to look at. Then when you choose all of the tags you want to look at, it gathers those points within a date range. It queries large data sets and Highcharts becomes really choppy. Of course I have the zoomable option, but I want to know how to make it fast like the example I linked above. I believe the performance issue relies on the client side.
The following is my code. I gather all my results into an array of arrays. Then I pass it into a function to fill my high charts.
success: function (data) {
var information = new Array();
$.each(data, function (listnum) {
var list = new Array();
$.each(this, function (index) {
var dtinfo = this.DateCollected;
var part = dtinfo.split(" ");
var date = part[0].split("/");
var year = date[2];
var day = date[1];
var month = date[0];
var time = part[1].split(":");
var hour = time[0];
var min = time[1];
var sec = time[2];
var point = [Date.UTC(year, month, day, hour, min, sec), this.FValue];
list[index] = point;
});
information[listnum] = list;
});
$("#GraphLoadBut").removeClass("load").addClass("notload");
$("#accordion").multiAccordion({ active: 2 });
fillChart(information, tagNames, pointRange, colors);
}
});
});
function fillChart(information, tagNames, pointRange, colors) {
var length = information.length;
for (var i = 0; i < length; i++) {
var series = { data: information[i] };
series.name = tagNames[i];
series.pointInterval = pointRange[i];
if (colors[i] != "") {
series.color = "#" + colors[i];
}
options.series.push(series);
}
var chart = new Highcharts.Chart(options);
}
Any ideas how I can optimize this? I believe it is a client side problem.
The data I am getting is JSON