# 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