A basic 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: 650px; height: 350px; border: 1px solid #ddd" id="chart-container"></div>

This is the code that generates the chart:

<script>
    for (var i=0,dataset1=[]; i<100; ++i) {
        dataset1.push({
            x: RGraph.SVG.random({min: 0,max: 365}),
            y: RGraph.SVG.random({min: 0,max: 50})
        });
    }

    for (var i=0,dataset2=[]; i<100; ++i) {
        dataset2.push({
            x: RGraph.SVG.random({min: 0,max: 365}),
            y: RGraph.SVG.random({min: 0,max: 50})
        });
    }

    var scatter = new RGraph.SVG.Scatter({
        id: 'chart-container',
        data: [dataset1,dataset2],
        options: {
            gutterTop: 50,
            xaxisMax: 365,
            xaxisLabels: [
                'Jan','Feb','Mar','Apr',
                'May','Jun','Jul','Aug',
                'Sep','Oct','Nov','Dec'
            ],
            tickmarksStyle: ['rect','circle'],
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            colors: ['red', 'black'],
            title: 'This is a Scatter chart with two datasets',
            titleSubtitle: 'Two different tickmark styles'
        }
    }).draw();
</script>

« Back