HOWTO: Add interactivity to your charts

• The chart without the event listeners
• The chart with the click event listener added
• The chart with the mousemove event listener added
• Standard DOM1 events
• Adding events with the events property

Starting from January 2012 adding events to your charts has become much easier. You can use the on function or the events configuration property (the preferred method) 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:

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss','Luis'],
            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:

• shape.object
• shape.index
• shape.dataset
• shape.sequentialIndex

<script>
    new RGraph.Bar({
        id: 'cvs2',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss', 'Jan'],
            textSize: 14,
            events: {
                click: function (e, shape)
                {
                    var index = shape.dataset;
            
                    switch (index) {
                        case 0: alert('The first bar was clicked');  break;
                        case 1: alert('The second bar was clicked'); break;
                        case 2: alert('The third bar was clicked');  break;
                        case 3: alert('The fourth bar was clicked'); break;
                        case 4: alert('The fifth bar was clicked');  break;
                        case 5: alert('The sixth bar was clicked');  break;
                    }
                }
            }
        }
    }).draw();
</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 a 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.

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss','Jan'],
            textSize: 14,
            events: {
                click: function (e, shape)
                {
                    var index = shape.dataset;
            
                    switch (index) {
                        case 0: alert('The first bar was clicked');  break;
                        case 1: alert('The second bar was clicked'); break;
                        case 2: alert('The third bar was clicked');  break;
                        case 3: alert('The fourth bar was clicked'); break;
                        case 4: alert('The fifth bar was clicked');  break;
                        case 5: alert('The sixth bar was clicked');  break;
                    }
                },
                mousemove: function (e, shape)
                {
                    return true;
                }
            }
        }
    }).draw();
</script>

Standard DOM1 events

In October 2012 RGraph was reverted to use DOM2 events internally. 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>

Adding events with the events property

Since version 6.22 you've been able to use the events property in the main configuration to add events instead of the on() function. You can see an example of it here. This is now the preferred way to add events.