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:

1. Added serie is as 'Serie 3' on chart instead of the 'Serie 1'
2. 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.