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