A time based SVG Scatter chart

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>

« Back