Highcharts: set regular intervals on xaxis

Question

I have a series of data values over time (determined by a count). Data is provided at n minute intervals (count x interval); typically the data will be 96 x 15 (96 15minute intervals to give 24 hours). The length of the intervals and the count are both dynamic. The data series can be numerous types of data; it could be in numerous formats like 0.000123 or 1.23 or 198763.0000089675.

I would like my xaxis to show time in 1 hour intervals (screen real estate is small, so 2 hour intervals might be whats needed). I have this:

xAxis: {
    type : 'datetime',
    title: {
        text: 'Time ('+period+')'
        },
    dateTimeLabelFormats: {
        minute: '%H:%M',
        hour: '%H:%M'
        }
}

and a series like this:

[15999.999999999996,14999.999999999996,15999.999999999996,14999.999999999996,13999.999999999996,15999.999999999996,17999.999999999993,17999.999999999993,16999.999999999993,15999.999999999996,16999.999999999993,14999.999999999996,14999.999999999996,13999.999999999996,14999.999999999996,14999.999999999996,14999.999999999996,14999.999999999996,15999.999999999996,19999.999999999993,23999.999999999993,27999.999999999993,24999.999999999993,22999.999999999993,21999.999999999993,23999.999999999993,29999.999999999993,26999.999999999993,29999.999999999993,31999.999999999993,34999.999999999985,31999.999999999993,31999.999999999993,33999.999999999985,34999.999999999985,32999.999999999985,32999.99999999998,32999.99999999997,32999.99999999997,32999.99999999997,32999.999999999985,32999.999999999985,34999.999999999985,32999.999999999985,32999.999999999985,32999.999999999985,35999.999999999985,32999.999999999985,35999.999999999985,32999.999999999985,33999.999999999985,30999.999999999993,28999.999999999993,31999.999999999993,32999.999999999985,33999.999999999985,30999.999999999993,32999.999999999985,32999.999999999985,30999.999999999993,30999.999999999993,31999.999999999993,31999.999999999993,29999.999999999993,29999.999999999993,30999.999999999993,30999.999999999993,26999.999999999993,25999.999999999993,27999.999999999993,29999.999999999993,27999.999999999993,26999.999999999993,25999.999999999993,26999.999999999993,27999.999999999993,25999.999999999993,28999.999999999993,29999.999999999993,26999.999999999993,24999.999999999993,18999.999999999993,17999.999999999993,16999.999999999993,16999.999999999993,15999.999999999996,16999.999999999993,15999.999999999996,14999.999999999996,15999.999999999996,15999.999999999996,14999.999999999996,14999.999999999996,15999.999999999996,15999.999999999996,14999.999999999996]

but the values on the xaxis are:

00:00:00.020    00:00:00.040     00:00:00.020    00:00:00.020

I've poked through the highcharts API but I can't make head nor tails of how it deals with timeseries.

How can I tell highcharts to display the time correctly?

score 3 · Accepted Answer · edited Sep 08 '16 at 16:44

3

If the axis is of type datetime then the chart will render them the best way it sees fit. If you don't like the way they are rendered, you can control the datetime formats of the chart using dateTimeLabelFormats like you are already doing.

Based on the datetime span of the data at the time the chart will pick one of the following default formats:

second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'

If you want to force them all to the Hour and Minute no matter what the range is then set them as follows:

second: '%H:%M',
minute: '%H:%M',
hour: '%H:%M',
day: '%H:%M',
week: '%H:%M',
month: '%H:%M',
year: '%H:%M'

To control the interval of the dates shown use tickInterval. Since your axis is of type datetime you will have to use milliseconds as the unit for your tickInterval. So, a 1 hour tickinterval in milliseconds is 3600000. If you want it to be 2 hours then use 7200000.

edited Sep 08 '16 at 16:44

Evan Giesel

371
1
4
13

answered Jul 13 '12 at 12:35

Linger

14,942
23
52
79

Going to throw this out here...So HighCharts does not care if do not set the time in the series? I know it will then treat it as a linear chart series, but you can then tell it what the linear xAxis points are? If so, that solves a ton of logistics problems for us. – wergeld Jul 13 '12 at 15:09
My xAxis settings are : type: 'dateTime', and I'm using the format you suggest (the second one), with tick interval at 7200000, my data series looks like this:[["00:15:00",15.999999999999996],["00:30:00",14.999999999999996]...etc] yet my xAxis is still wrong. This time it just says "Ok" and there's nothing after that. – Squishy Jul 16 '12 at 10:40
I think I'll just take a different approach and output the timestamps into its own array and just pass the xAxis that – Squishy Jul 16 '12 at 10:44
@Squishy, you need to parse your datetime component. HighCharts expects time to be in javascript time (UNIX time * 1000). – wergeld Jul 16 '12 at 12:15
Your time has to be in milliseconds. Here is an [**example**](http://stackoverflow.com/q/9724246/1253219) of converting a DateTime object to milliseconds via C#. You cannot have a decimal in the number. – Linger Jul 16 '12 at 12:22
Well I had the time in milliseconds too, but that refused to output in anything recognizable as time. The data series was [[900000, 15.9999],[1800000, 14.999]...etc] and the xAxis output was between 0M and 55M - despite the fact that it was between 900000 and 86400000 which constitutes 24hours. – Squishy Jul 16 '12 at 12:51
What you really want to do is have the DateTime in milliseconds. However, it should be the milliseconds that have transpired since January 1, 1970. Using the JavaScript [**parse**](http://www.w3schools.com/jsref/jsref_parse.asp) function will automatically do this for you. Or you can do something like the [**following**](http://jsfiddle.net/ku8cr/). – Linger Jul 16 '12 at 12:57
Got it into my thick skull, finally. @Linger Thanks for the help, much appreciated man! – Squishy Jul 16 '12 at 13:24

score 1 · Answer 2 · answered Jul 13 '12 at 12:34

Rough guess here is that you do not include a time in your series. If your xAxis is datetime you need to somehow provide that to HighCharts. For example you series should look like:

[[timeInJSTime1, 15999.999999999996],
 [timeInJSTime2, 14999.999999999996],
 ....
]

Highcharts: set regular intervals on xaxis

2 Answers2

Linked