A Scatter chart with a connecting line

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 04-01-2012', y:1},
        {x:'2012 5th February', y:6},
        {x:'Mar 9 2012', y:6},
        {x:'2012/08/30', y:9},
        {x:'2012-09.12', y:5},
        {x:'2012 November 5', y:4}
    ];

    new RGraph.SVG.Scatter({
        id: 'chart-container',
        data: data,
        options: {
            line: true,
            lineLinewidth: 2,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            tickmarksSize: 0,
            colors: ['black'],
            title: 'A Scatter chart with a connecting line ',
            xaxisMin: '2012/01/01',
            xaxisMax: '31st dec 2012 23:59:59',
            xaxisLabels: [
                'Jan','Feb','Mar','Apr',
                'May','Jun','Jul','Aug',
                'Sep','Oct','Nov','Dec'
            ]
        }
    }).draw();
</script>

« Back