What format does the highcharts js library accept for dates?

What format does the highcharts js library accept for dates?

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.


Solution 1:

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

Related:  Google.com and clients1.google.com/generate_204

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):

  1. 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]
  2. 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]]
  3. Or specifying the epoch time directly:

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

Example on jsfiddle

Solution 2:

Adding to @eolsson, epoch time is usually the way to go since technically, Date() objects are javascript, not JSON, and you’re unlikely to find an off-the-shelf serializer that generates them.

You’ll want to format the date, too, something like this —

xAxis: {
  type: 'datetime',
  labels: {
    formatter: function() {
      return Highcharts.dateFormat('%e %b', this.value*1000); // milliseconds not seconds

The date formatting is done php style.


Related:  Submit form to another page (which is different from the page used in ACTION)