javascript - Highcharts: set regular intervals on xaxis - Stack Overflow

admin管理员组

文章数量:1335423

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?

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?

• javascript
• highcharts

Share Improve this question Follow asked Jul 13, 2012 at 12:23 SquishySquishy 19311 gold badge33 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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],
 ....
]

本文标签： javascriptHighcharts set regular intervals on xaxisStack Overflow