How to add events to your charts

Share RGraph:   

Summary
A guide for adding events to your charts. RGraph makes adding interactivity to your charts easy.

Starting from January 2012 adding events to your charts has become much easier. There are two new properties for this:

These properties make adding interactivity to you charts very easy. Here's a step-by-step example of using them.

The chart without the event listeners

Here's the basic chart without any event listeners defined:

[No canvas support]
<script>
    var bar1 = new RGraph.Bar({
        'cvs1',
        data: [4,6,5,3,8,9],
        options: {
            labels: ['Kev','Louise','Pete','Gary','Fliss'],
            textAccessible: true,
            textSize: 14
        }
    }).draw()
</script>

The chart with the click event listener added

The first step would be to add the click event listener. This function is run when a bar is clicked. The function that you specify is passed two arguments - the (standard) event object, and a second array of coordinates that describe the shape. This array contains the RGraph chart object and the index of the shape. The index begins at zero - so the first bar would have an index of zero, the second bar would have an index of one and so on. There's also named properties that you can use like this:

[No canvas support]
<script>

    function myClick (e, shape)
    {
        var index = shape.index;
        var words = ['first','second','third','fourth','fifth','sixth']

        alert('The ' + words[index] + ' bar was clicked');
    }

    var bar2 = new RGraph.Bar({
        id: 'cvs2',
        data: [4,6,5,3,8,9],
        options: {
            labels: ['Kev','Louise','Pete','Gary','Fliss'],
            eventsClick: myClick,
            textAccessible: true,
            textSize: 14
        }).draw();
</script>

The chart with the mousemove event listener added

The second step is to add the mousemove event listener. By returning a truthy value from the handler function this allows us to change the cursor to pointer when the mouse is moved over a bar. Because this is a common operation the pointer is automatically changed back to the previous state when it is moved away from the bar.

[No canvas support]
<script>

    function myMousemove (e, shape)
    {
        // It's automatically changed back to the previous state for you
        return true;
    }

    function myClick (e, shape)
    {
        var index = shape.index;
        var words = ['first','second','third','fourth','fifth','sixth']

        alert('The ' + words[index] + ' bar was clicked');
    }

    var bar3 = new RGraph.Bar({
        `id: 'cvs2',
        data: [4,6,5,3,8,9],
        options: {
            labels: ['Kev','Louise','Pete','Gary','Fliss'],
            eventsClick: myClick,
            eventsMousemove: myMousemove,
            textAccessible: true,
            textSize: 14
        }
    }).draw()
</script>

Adding events using method chaining

Instead of setting RGraph properties as above, you may prefer this newer way of setting the events. It holds no performance benefits (nor detractions) - though may be a more preferable way to add events for you.

<script>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [5,3,8,6,4,7,9,5],
        options: {
            labels: ['Rachel','Nevil','Gary','Hoolio','Jane','Pete','Luis','Kev'],
            textAccessible: true,
            textSize: 14
        }
    
    // Now add the custom event listeners. NOTE: The event listeners are being added to the RGraph object
    // and NOT the canvas
    }).on('click', function (e, shape)
    {
        alert('Bar has been clicked!');
    }).on('mousemove', function (e, shape)
    {
        console.log('Bar has been mouseover'ed!');
        return true;
    }).draw()
</script>

Standard DOM1 events

In October 2012 RGraph was reverted to DOM2 events. This frees up the DOM1 events for you to use. You may find that these are far easier and less verbose to use.

<script>
    window.onmousedown = function (e)
    {
    }
    
    window.onmouseup = function (e)
    {
    }
    
    obj.canvas.onmousedown = function (e)
    {
    }
    
    obj.canvas.onmouseup = function (e)
    {
    }
    
    obj.canvas.onclick = function (e)
    {
    }
    
    obj.canvas.onmousemove = function (e)
    {
    }
</script>

Comments

Add a new comment...