Question

52

rated 0 times [ 57] [ 5] / answers: 1 / hits: 32808 / 12 Years ago, sat, march 3, 2012, 12:00:00

I am using highcharts and cannot figure out what the date input should be from rails dates to the highcharts accepted format for dates.

In my migration file i am storing the date like this:

t.date :consumption_date

The value gets stored in this format 2012-03-25, and going to the terminal and finding the record i get this:

=>  Sat, 31 Mar 2012

When the chart renders, the individual points display Invalid date. The following array gets output to highcharts to render

[[Sun, 25 Mar 2012, 1158], [Sat, 31 Mar 2012, 1200]]

The format that highcharts uses in one of their demo charts, when the data is submitted in jquery is of the form:

[[Date.UTC(1970,  9, 27), 0   ], [Date.UTC(1970, 10, 10), 0.6 ]]

How can i get rid of the invalid date, by submitting the correct date format to highcharts.

Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 604

Total Questions: 96

Total Answers: 115

Location: Tokelau

Member since Wed, Oct 14, 2020

4 Years ago

answered 13 Years ago grayson · Accepted Answer

Internally Highcharts uses javascript Date numbers (the number of milliseconds since Jan 1st 1970) to represent dates. See Mozilla reference.

To get dates on an axis you will first need to set the axis type to 'datetime':

xAxis: {

    type: 'datetime'

}

You have a few options when specifying the series data (all three examples produce the same chart):

Setting a start point and using a fixed interval between points

pointStart: Date.UTC(2012, 2, 6, 10),

pointInterval: 1000 * 60 * 60,

data: [5, 6, 4]

Specifying the exact date using the Date.UTC method. This way its readable for humans:

data: [

    [Date.UTC(2012, 2, 6, 10), 5], 

    [Date.UTC(2012, 2, 6, 11), 6], 

    [Date.UTC(2012, 2, 6, 12), 4]]

Or specifying the epoch time directly:

[[1331028000000, 5], [1331031600000, 6], [1331035200000, 4]]

Example on jsfiddle