Plotting data on x axis in Highstock

Question

I am currently trying to plot some data which I receive via a HTTP request. The issue that I am having is that the x-axis doesn't plot the timestamp correctly because it it's in Unix format . I've read some other similar question on SO such as: Example One

The issue is that I'm not passing an object but directly an Unix time data . When hovering the graph, you can see that the x-axis doesn't display the date and hour correctly.

Here is a fiddle with my current graph: Graph Fiddle

Answer 1

Since you actually have datetime values, showing them using category is sort of a hack, and would also not show gaps between points correctly if they are not evenly spaced.

Instead you could merge your two arrays into pairs and then supply it to the series as proper XY values for a datetime axis. You also have to multiply your datetime values by 1000 to get milliseconds, which Highcharts expects.

For example ( JSFiddle ), merging:

dataArray.push(selectedData);
timeDataArray.push(selectedTime);

var mergedArray = timeDataArray.map(function(e, i) {
    return [e*1000, dataArray[i]];
});

And axis and series:

xAxis: {
    type: 'datetime'
},
series: [{
    name: 'AAPL',
    data: mergedArray
}]