I'm building highstock chart with big set of one serie data. For performance reasons I want to load smalest set of data at first called as 'Serie 1' (from one hour ago till now) and after that I need to add to this 'Serie 1' next points with data from two years ago till one hour ago. The data points is stored on every one minute since whole 2 years ago till now.
The method for get the next points and plot them code is below:
$.getJSON('dashboard/values.php?start='+ min +'&end=' + max, function(myData) {
var seriesOptions = {
name: 'water depth',
yAxis: 0,
id: 'depth',
data: myData
};
var navigatorOptions = {
yAxis: 1,
data: myData
};
var obj = eval('[' + myData + ']');
seriesOptions.data = obj;
chart.addSeries(seriesOptions);
var nav = chart.get('navigator');
nav.setData(myData, false);
chart.xAxis[0].setExtremes();
});
I have two problems to figure out:
- Added serie is as 'Serie 3' on chart instead of the 'Serie 1'
- After add new points the navigation bar is extended to January 1st 1979, but my data starts from April 28th 2015
The values.php file is:
<?php
header('Content-Type: text/JSON');
//... some SQL connection and query stuff
if ($result = $mysqli->query($sql)) {
$emptyarray = array();
while($row = $result->fetch_assoc()) {
extract($row);
$emptyarray[] = "[$datetime, $water_depth]";
}
$result->free();
}
$mysqli->close();
echo json_encode($emptyarray);
Also, if You have any other ideas how to display the chart with a big set of data with good performance speed, please share. I don't want to create four data tables holding data for minutes, hours, days and months respectively like it is described in this article.