This Scatter chart has been configured to use datetime values for the X coordinates, the title has been customised slightly and the points have tooltips. The background grid has no vertical gridlines.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.scatter.js"></script>Put this where you want the chart to show up:
<div style="width: 700px; height: 250px" id="chart-container"></div>This is the code that generates the chart:
<script> data = [ {x:'23:59 15-01-2012', y:5, tooltip: 'Yunka'}, {x:'2012 15th February', y:6, tooltip: 'Ally'}, {x:'Mar 15 2012', y:6, tooltip: 'Fred!'}, {x:'2012/04/15', y:6, tooltip: 'Tom!'}, {x:'2012-05.15', y:5, tooltip: 'Rachel!'}, {x:'2012 June 15', y:4, tooltip: 'Jone!'}, {x:'July 2012 15th', y:5, tooltip: 'Luis!'}, {x:'aug 15th 2012', y:6, tooltip: 'Peter!'}, {x:'15th september 2012', y:7, tooltip: 'Harry!'}, {x:'15 Oct 2012', y:6, tooltip: 'Bert!'}, {x:'2012.11.15', y:4, tooltip: 'Bob!'}, {x:'2012.12-15 00:00:00', y:5, tooltip: 'Bill!'} ]; new RGraph.SVG.Scatter({ id: 'chart-container', data: data, options: { // tickmarksStyle: 'plus', // tickmarksStyle: 'cross', // tickmarksStyle: 'square', // tickmarksStyle: 'rect', // tickmarksStyle: 'dot', // tickmarksStyle: 'circle', // tickmarksStyle: 'cross', tickmarksStyle: 'cross', backgroundGridVlines: false, backgroundGridBorder: false, yaxis: false, tickmarksSize: 15, colors: ['red'], title: 'A Scatter chart using datetime values', titleItalic: true, titleBold: true, //tooltipsEvent: 'click', xaxisMin: '2012/01/06 12:14:12', xaxisMax: '31st dec 2012', xaxisLabels: [ 'Jan','Feb','Mar','Apr', 'May','Jun','Jul','Aug', 'Sep','Oct','Nov','Dec' ] } }).draw(); </script>