score:2

The problem is your JSON data. It is not in a format that Highstock can immediately utilize to show as datetime on the x-axis. The problem is that your strings, for example "30 June 2014 19:14", are not timestamps.

The x-axis needs timestamps in milliseconds (since 1. January 1970). Beware that some timestamps received from other sources may be in seconds, not milliseconds. If that is the problem you must multiply them by 1000.

When using strings it won't really make sense to Highstock, so Highstock just pretends the timestamp of your data is 0, 1, 2... which translates to 00:00:00.000 (0 milliseconds), 00:00:00.001 (1 millisecond), 00:00:00.002 (2 milliseconds)...

You need to convert your string representation of a date into a timestamp. I'm not sure if you can manipulate the format you receieve your JSON in, but if you can't you can post-process it to transform the data, like this (JSFiddle example):

var data = [
    ["30 June 2014 19:15",24],
    ["30 June 2014 19:16",41],
    ["30 June 2014 19:17",12],
    ["30 June 2014 19:18",8]
];

var timestampData = [];

for(i in data) {
    timestampData.push([new Date(data[i][0]).getTime(), data[i][3]]);
}


$('#container').highcharts({
    ...
    series: [{
        data: timestampData
    }]
});

The essence here is that new Date(data[i][0]) parses your string into a Date-object with values for year, month day... And you then use the getTime() function of that object to get the timestamp.


Related Articles