A Scatter chart demonstrating the crosshairs snap option

This Scatter chart demonstrates how you can extract the Scatter chart's dataset and index from the variables set on the canvas tag by RGraph.

[No canvas support]

Dataset:


Point:

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.scatter.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="400">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    new RGraph.Scatter({
        id:'cvs',
        data: [
            [[0,0,'red'],[5,5,'red'],[10,10,'red'],[15,15,'red'],[20,20,'red'],[25,25,'red'],[30,30,'red'],[35,35,'red'],[40,40,'red'],[45,45,'red'],[50,50,'red']],
            [[0,0,'green'],[5,1,'green'],[10,2,'green'],[15,3,'green'],[20,4,'green'],[25,5,'green'],[30,6,'green'],[35,7,'green'],[40,8,'green'],[45,9,'green'],[50,10,'green']]
        ],
        options: {
            xaxisScaleMax: 100,
            crosshairs: true,
            crosshairsSnap: true,
            marginLeft: 50,
            line: true,
            lineColors: ['red','green'],
            labels: ['Q1','Q2','Q3','Q4']
        }
    }).draw();

    
    scatter.oncrosshairs = function (obj)
    {
        document.getElementById("dataset").value =  obj.canvas.__crosshairs_snap_dataset__;
        document.getElementById("point").value =  obj.canvas.__crosshairs_snap_point__;
    };
</script>