How to use the new dollar syntax for events

  Read comments...

Summary
A guide that shows you how to use the new dollar syntax for events

The new dollar syntax in RGraph, which was added in October 2012, makes it a breeze for you to add event listeners to your charts. Previously you would add an event listener with the chart.events.click or chart.events.mousemove properties and then check the index property of the shape array to verify which shape had been clicked or mouseover'ed. Now though, you can add event listeners to specific shapes (bars/points/segments etc) by using the dollar syntax as shown below. Keep in mind though that, as with arrays, the numbering begins at zero.

The initial chart

[No canvas support]

Here is the plain Bar chart before the event listeners have been added:


<script>
    window.onload = (function ()
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [13,12,16,15,12,11,21],
            options: {
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
                textAccessible: true,
                textSize: 14
            }
        }).draw()
    })
</script>

The chart with the click event added

[No canvas support]

Here is the Bar chart with the click event added. Note the mouse pointer doesn't change as there hasn't been a mousemove listener added yet.


<script>
    var bar2 = new RGraph.Bar({
        id: 'cvs2',
        data: [13,12,16,15,12,11,21],
        options: {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
        }
    }).draw()
    
    bar2.$3.onclick = function (e, shape)
    {
        alert('The second Bar charts event listener');
    }
</script>

The chart with the mousemove event added

[No canvas support]

And here is the Bar chart with the mousemove event listener added. This changes the cursor to the hand when the relevant bar is mouseover'ed. The pointer is automatically changed back for you when the mouse is moved away from the bar.


<script>
    var bar3 = new RGraph.Bar({
        id: 'cvs3',
        data: [13,12,16,15,12,11,21],
        options: {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            textAccessible: true,
            textSize: 14
        }
    }).draw()


    bar3.$3.onclick = function (e, shape)
    {
        alert('In the fourth bar charts event listener');
    }
    
    bar3.$3.onmousemove = function (e, shape)
    {
        return true;
    }
</script>
Share RGraph
X

Comments