Highstock - Timeaxis ticks not continuos

Question

I try to plot some database data in a highstock linechart. My data is loaded into the chart in json format like this:

[[1383042797000,551.11] , [1383042812000,551.11] , [1383042827000,551.11] , [1383042842000,567.78] , [1383042857000,567.78] , [1383042872000,567.78] , [1383042887000,567.78] , [1383042902000,584.44] , [1383042917000,601.11] , [1383042932000,601.11] , [1383042947000,617.78] , [1383042962000,634.44] , [1383042977000,634.44] , [1383042992000,634.44] , [1383043007000,634.44] , [1383043022000,634.44] , [1383043037000,651.11] , [1383043052000,651.11] , [1383043067000,667.78] , [1383043082000,667.78] , [1383043098000,667.78] , [1383043113000,667.78]];

So I have a specific timestamp in millisec and a value for every point.

The chart shows my data very well if the timestamps are countinuosly every 15s. But as its machine data I have pauses of hours or even days where the machine in turned off and in this time I don´t get database entrys...

Now the chart is not displaying "gabs" in the graph like it makes sense as there is no data, but it ignores the pauses and displays directly the new value...

puh I hope you can follow me...here´s an example:

On 8. Nov the machine was turnes off at 14:59 and the next value is 11. Nov ca. 06:00 but the chart skips the time between this two dates and shows them next to each other...

I need the graph to display the whole time period from my first value to the last one! Does somebody know what to do?

Here´s the js code of my graph:

(function($){ 

$(function() {

    $.getJSON('http://jsonData', function(data) {
        $('#container').highcharts('StockChart', {
            chart: {
            },
             xAxis: {
                    type: 'datetime'
                },

            series : [{
                data : data,
                turboThreshold: 100000

            }]

        });
    });

});

})(jQuery);

Thank´s in advance for your help :)!!

Cheers J!

Answer 1

For the graph to 'cut' the curve when the time between two point is longer than usual, you can add the gapSize option in your plot options.

This example will cut the curve each time there is a space between two point in the x-axis longer than twice the smaller space between two points on the x-axis in the whole series.

plotOptions: {
    line: {
        gapSize: 2
    }
}

JsFiddle exemple

Answer 2

Here´s my example in JSFiddle:

Follow this link http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ticks/ and than try out this code:

$(function() {
    var data = [
/* 2009-01-01 */
[1230771600000, -5.8, 0.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1231549200000, 3.1, 6.8],
[1231635600000, 0.0, 7.6],
[1231722000000, 5.6, 9.4],
[1231808400000, 3.6, 6.5],
[1231894800000, -3.6, 3.8],
[1231981200000, -6.0, -1.5],
[1232067600000, -3.8, 2.4],
[1232154000000, 1.5, 4.2],
[1232240400000, 0.0, 4.5],
[1232326800000, -1.1, 3.6],
[1232413200000, 0.5, 5.1],
[1232499600000, 0.0, 2.5],
[1232586000000, -0.6, 2.1],
[1232672400000, 0.8, 4.7],
[1232758800000, 0.6, 4.4],
[1232845200000, -3.9, 1.4],
[1232931600000, -4.3, 2.0],
[1233018000000, -6.1, -0.4],
[1233104400000, -0.3, 1.9],
[1233190800000, -2.9, 2.7],
[1233277200000, -4.0, -1.0],
[1233363600000, -4.4, -1.9],
/* 2009-02-01 */
[1233450000000, -5.0, -2.7],
[1233536400000, -5.2, -2.3],
[1233622800000, -6.3, -0.6],
[1233709200000, -5.4, -0.6],
[1233795600000, -2.1, 1.4],
[1233882000000, -4.6, 1.5],
[1233968400000, -5.4, 0.6],
[1234054800000, -8.7, -2.6],
[1234141200000, -5.2, 1.3],
[1234227600000, -8.6, -2.2],
[1234314000000, -8.5, 0.1],
[1234400400000, -4.8, 1.7],
[1234486800000, -8.3, 1.4],
[1234573200000, -8.6, 1.1],
[1234659600000, -3.2, 1.5],
[1234746000000, -0.7, 4.1],
[1234832400000, 0.2, 3.2],
[1234918800000, 0.0, 3.9],
[1235005200000, 1.2, 4.5],
[1235091600000, 1.3, 5.7],
[1235178000000, 1.0, 2.3],
[1235264400000, 1.1, 5.5],
[1235350800000, 1.0, 6.5],
[1235437200000, 0.9, 3.7],
[1235523600000, 1.5, 4.3],
[1235610000000, 0.5, 5.4],
[1235696400000, -4.9, 3.8],
[1235782800000, -5.4, 1.4],
/* 2009-03-01 */
[1235869200000, -1.9, 4.0],
[1235955600000, 0.9, 8.1],
[1236042000000, 1.7, 8.1],
[1236128400000, 0.0, 9.1],
[1236214800000, 2.5, 7.7],
[1236301200000, 2.1, 5.6],
[1236387600000, 1.5, 6.9],
[1236474000000, 0.6, 7.9],
[1236560400000, 1.9, 9.4],
[1236646800000, 1.8, 7.0],
[1236733200000, 0.2, 8.6],
[1236819600000, -0.3, 5.9],
[1236906000000, 1.6, 8.3],
[1236992400000, -0.4, 8.8],
[1237078800000, -2.0, 5.4],
[1237165200000, 2.2, 6.7],
[1237251600000, 0.0, 7.2],
[1237338000000, 0.8, 9.3],
[1237424400000, -1.7, 7.5],
[1237510800000, -2.0, 6.3],
[1237597200000, -0.3, 5.7],
[1237683600000, 1.7, 5.9],
[1237770000000, -0.8, 5.7],
[1237856400000, -3.5, 5.7],
[1237942800000, -2.6, 5.0],
[1238029200000, -0.7, 8.0],
[1238115600000, -2.8, 6.0],
[1238202000000, -2.9, 6.1],
[1238288400000, 0.3, 7.0],
[1238371200000, 0.5, 7.5],
[1238457600000, 1.6, 4.7],
/* 2009-04-01 */
[1238544000000, -1.4, 7.3],
[1238630400000, 2.8, 6.8],
[1238716800000, 3.4, 12.0],
[1238803200000, 0.6, 13.5],
[1238889600000, 5.5, 8.3],
[1238976000000, 3.3, 8.3],
[1239062400000, 0.6, 13.5],
[1239148800000, 3.0, 13.7],
[1239235200000, 6.6, 15.2],
[1239321600000, 5.6, 10.3],
[1239408000000, 5.6, 15.2],
[1239494400000, 4.1, 10.0],
[1239580800000, 0.4, 11.8],
[1239667200000, 0.5, 13.6],
[1239753600000, 3.8, 15.6],
[1239840000000, 6.0, 11.6],
[1239926400000, 3.9, 13.9],
[1240012800000, 0.8, 14.3],
[1240099200000, 2.9, 17.3],
[1240185600000, 7.1, 12.2],
[1240272000000, 2.4, 12.9],
[1240358400000, 4.7, 12.9],
[1240444800000, 2.0, 16.3],
[1240531200000, 9.5, 17.4],
[1240617600000, 3.4, 16.7],
[1240704000000, 6.7, 19.1],
[1240790400000, 4.9, 15.8],
[1240876800000, 8.4, 15.3],
[1240963200000, 4.1, 18.6],
[1241049600000, 6.6, 19.9],
/* 2009-05-01 */
[1241136000000, 8.7, 21.4],
[1241222400000, 9.2, 16.4],
[1241308800000, 6.2, 12.9],
[1241395200000, 0.0, 13.4],
[1241481600000, 4.5, 11.2],
[1241568000000, 3.2, 14.3],
[1241654400000, 3.1, 13.7],
[1241740800000, 6.4, 14.6],
[1241827200000, 5.0, 13.5],
[1241913600000, 4.8, 11.5],
[1242000000000, 3.5, 13.0],
[1242086400000, 4.5, 15.0],
[1242172800000, 2.0, 17.0],
[1242259200000, 4.3, 18.3],
[1242345600000, 4.5, 18.8],
[1242432000000, 8.0, 20.7],
[1242518400000, 7.4, 20.7],
[1242604800000, 8.4, 17.7],
[1242691200000, 8.3, 15.2],
[1242777600000, 8.3, 17.9],
[1242864000000, 6.7, 17.0],
[1242950400000, 7.6, 17.5],
[1243036800000, 6.6, 17.3],
[1243123200000, 8.7, 17.7],
[1243209600000, 8.9, 17.7],
[1243296000000, 8.4, 11.5],
[1243382400000, 5.9, 14.2],
[1243468800000, 5.1, 16.9],
[1243555200000, 8.3, 16.0],
[1243641600000, 6.2, 22.6],
[1243728000000, 7.8, 22.6],
/* 2009-06-01 */
[1243814400000, 7.3, 21.7],
[1243900800000, 8.7, 16.2],
[1243987200000, 7.3, 13.9],
[1244073600000, 3.9, 15.5],
[1244160000000, 6.4, 17.3],
[1244246400000, 2.9, 17.9],
[1244332800000, 3.9, 17.9],
[1244419200000, 6.5, 16.8],
[1244505600000, 8.0, 14.2],
[1244592000000, 7.8, 16.2],
[1244678400000, 8.6, 15.3],
[1244764800000, 8.2, 18.2],
[1244851200000, 9.5, 17.0],
[1244937600000, 5.7, 18.7],
[1245024000000, 7.0, 16.9],
[1245110400000, 4.3, 15.8],
[1245196800000, 3.6, 19.1],
[1245283200000, 10.8, 15.0],
[1245369600000, 8.6, 16.3],
[1245456000000, 10.7, 17.0],
[1245542400000, 9.7, 18.9],
[1245628800000, 9.8, 20.6],
[1245715200000, 12.8, 19.5],
[1245801600000, 8.6, 24.1],
[1245888000000, 10.9, 26.6],
[1245974400000, 13.5, 28.0],
[1246060800000, 12.5, 23.2],
[1246147200000, 14.0, 28.1],
[1246233600000, 14.9, 29.5],
[1246320000000, 16.9, 22.5],
/* 2009-07-01 */
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 29.6],
[1246665600000, 16.7, 30.7],
[1246752000000, 16.5, 25.0],
[1246838400000, 17.8, 25.7],
[1246924800000, 13.5, 24.8],
[1247011200000, 10.5, 21.4],
[1247097600000, 9.2, 23.8],
[1247184000000, 11.6, 21.8],
[1247270400000, 10.7, 23.7],
[1247356800000, 11.0, 23.3],
[1247443200000, 11.6, 23.7],
[1247529600000, 11.8, 20.7],
[1247616000000, 12.6, 22.4],
[1247702400000, 13.6, 19.6],
[1247788800000, 11.4, 22.6],
[1247875200000, 13.2, 25.0],
[1247961600000, 14.2, 21.6],
[1248048000000, 13.1, 17.1],
[1248134400000, 12.2, 15.5],
[1248220800000, 12.0, 20.8],
[1248307200000, 12.0, 17.1],
[1248393600000, 12.7, 18.3],
[1248480000000, 12.4, 19.4],
[1248566400000, 12.6, 19.9],
[1248652800000, 11.9, 20.2],
[1248739200000, 11.0, 19.3],
[1248825600000, 10.8, 17.8],
[1248912000000, 11.8, 18.5],
[1248998400000, 10.8, 16.1]
];
    $('#container').highcharts('StockChart', {
            chart: {
            },
             xAxis: {
                    type: 'datetime'
                },

            series : [{
                data : data,
                turboThreshold: 100000,
                pointStart: Date.UTC(2013, 10, 28),
                pointInterval: 60 * 1000,
                tooltip: {
                    valueDecimals: 1,
                    valueSuffix: '°C'
                },
                datagrouping:{
                    enabled: false
                }

            }]

        });
});

(It´s with range data but that doen´t matter in this case...) If you have the same number of points for every month the axis looks perfect! If you now delete some points from p.e. June the graph is "pushed together" so you don´t have the same units everywhere on the xaxis... I need the graph to show this gap...

Thank you so much for your help!

Cheers J! :)

Answer 3

I assume that you call function which get data from database i.e each 3 second or other regular time. So when you cannot get data from database, you can add null point to the serie.