How to display date/time values on a Scatter chart
Summary
A guide for displaying date/time values on a Scatter chart. The Line chart has no X axis scale and that's why the Scatter chart is used instead.
Displaying Date/Time values can be done using the Scatter chart. This chart (not the Line chart) allows the X axis to be scaled and as a result you can specify a minimum date value, a maximum date value and then specify appropriate X values for your data. - You can see an example in the Scatter chart - and if required you can also specify a line to be drawn as well. The example shows how a line can be drawn and no tickmarks.
NoteWith Internet Explorer you must use the slash (/) as a date seperator - not the hyphen (-)
<script> window.onload = (function () { var scatter = new RGraph.Scatter({ id: 'cvs', data:[ ['2012/02/12 15:51:55', 5], ['2012/04/01 21:45',10], ['April 15 2012',20], ['15 Nov 2012', 13], ['2012-12-01',20], ['2012-12-31T20:10:10',19] ], options: { // Set the start value to be the beginning of the year. If they're omitted time values // default to 00:00:00 xmin: '2012/01/01', // Set the end value to the end of the year xmax: '2012/12/31 23:59:59', labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], line: true, lineColors: 'gray', tickmarks: 'circle', textAccessible: true, textSize: 14 } }).draw() }) </script>
Supported Date/Time formats
The underlying Date/Time parsing uses Date.parse() so all formats that this function supports are usable. Examples of the different formats are:
- 2012/05/12 15:51:55
- 2012-05-12 15:51:55
- 2012/05/12 21:45
- 2012-05-12
- April 15 2012
- 15 Nov 2012
- 15:51:55 (todays date is used)
The range of the Date.parse() function goes as far back as January 1 1970 00:00:00 UTC. You can read more about the Date.parse() function on the Mozilla developer website (link below).
Related links