How to add events to your charts

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. You can now use the on() function to add click, mousemove, mouseover or mouseout event listeners to your charts (or the RGraph custom events).

This makes adding interactivity to your charts very easy. Here's a step-by-step example of using the events.

The chart without the event listeners

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

[No canvas support]
<script>
    bar1 = new RGraph.Bar({
        'cvs1',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss'],
            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 shape object comprised of coordinates that describe the shape. This object also contains the RGraph chart object and the index of the shape. The shape object contains named properties that you can use like this:

[No canvas support]
<script>
    bar2 = new RGraph.Bar({
        id: 'cvs2',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss'],
            textSize: 14
        }).draw().on('', function (e, shape)
        {
            var index = shape.dataset;
            var words = ['first','second','third','fourth','fifth','sixth']
    
            alert('The ' + words[index] + ' bar was clicked');
        });
</script>

The chart with the mousemove event listener added

The second step is to add the mousemove event listener. By returning a value that can cast to a positive value (eg true or 1) 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>
    bar3 = new RGraph.Bar({
        `id: 'cvs2',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss'],
            textSize: 14
        }
    }).draw().on('click', function (e, shape)
    {
        var index = shape.dataset;
        var words = ['first','second','third','fourth','fifth','sixth']

        alert('The ' + words[index] + ' bar was clicked');
    }).on('mousemove', function (e, shape)
    {
        // It's automatically changed back to the previous state for you
        return true;
    });
</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>