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.
The preferred Javascript date formats are: Dates Only — YYYY-MM-DD. Dates With Times — YYYY-MM-DDTHH:MM:SSZ.
Highcharts® JS Highcharts, the core library of our product suite, is a pure JavaScript charting library based on SVG that makes it easy for developers to create responsive, interactive and accessible charts. Our library includes all the standard chart types and more.
Highcharts is a software library for charting written in pure JavaScript, first released in 2009. The license is proprietary. It is free for personal/non-commercial uses and paid for commercial applications.
Highcharts runs entirely on the client, and works with any web server that can deliver HTML and JavaScript content.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With