Pseudo-standard events

• The various-events properties
• The new dollar syntax
• Using DOM1 style addition
• The RGraph events property
• Note

The various events properties

Normally, if you apply a click listener to the canvas it will apply to the whole canvas. RGraph provides a way to add event listeners to your chart so that the event listeners apply only to the appropriate areas. In the case of the Bar chart here this means the actual bars themselves.

You can use the on method with these events:

• click
• mousemove
• mouseover
• mouseout

...to add your listeners to the chart. The listener is simply a function that is called when the event fires. You can add multiple event listeners if you want to.

<script>
    new RGraph.Bar({
        id:'cvs',
        data: [4,5,8,4,6,8,5],
        options: {
            xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            colors: ['blue'],
            textSize: 14
        }
    }).wave().on('click', function (e, shape)
    {
        var obj   = shape.object,
            x     = shape.x,
            y     = shape.y,
            w     = shape.width,
            h     = shape.height,
            index = shape.dataset;
    
        alert('The onclick listener just fired with index: ' + index);
    }).on('mousemove', function ()
    {
        return true;
    });
</script>

The new $ syntax

To add an event to a specific shape you can use the dollar syntax - this provides you with a very easy way to add an event listener to a specific bar/point/segment etc.

bar = new RGraph.Bar({
    id: 'cvs',
    data: [6,5,-5,5,-5,4,2,1,3,-2,-3,-6],
    options: {
        xaxisPosition: 'center'
    }
}).draw();

bar.$2.onclick = function (e, shape)
{
    alert(shape.dataset);
}

Using DOM1 style addition

As of September 2012, you can now use the dom1 style way to add these events to your charts. This is a much less verbose and far more readable way of adding these events to your charts.

<script>
    window.onload = function ()
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [4,5,8,4,6,8,5],
            options: {
                xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                colors: ['blue'],
                textSize: 14
            }
        }).draw()


        // Notice that unlike adding event listeners in HTML here you're adding them to the RGraph Bar chart
        // object - NOT the canvas tag.
        bar.onclick = function (e, shape)
        {
            alert('A bar has been clicked!');
        }
        
        // If the mousemove event listener function returns a truthy value then
        // the cursor is changed to pointer Keep in mind that when the
        // cursor is moved away from the shape it is automatically changed back
        //  to 'default'.
        bar.onmousemove = function (e, shape)
        {
            return true
        }
    }
</script>

Note

If you want the mouse pointer to change to the hand when you move the mouse over a bar you need to simply return true from the mousemove event listener, as shown below. When you move the mouse away from the bar the cursor will be restored to its previous state. Like this:

obj.onmousemove =  function (e, shape)
{
    return true;
};

The RGraph events property

Since the release of version 6.22 you've been able to use the events property to add events as well as the on function. This means there's a bit more consistency in the RGraph configuration for both properties and events. This looks like this example:

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [8,4,6,5,3,2,5],
        options: {
            events: {
                // You can specify either an array of functions if
                // you have multiple that you want to run.
                beforedraw: [
                    function (obj) {alert('Before the chart was drawn!');},
                    function (obj) {alert('For the second time - before the chart was drawn!');}
                ],
                
                // Or you can specify a single function for each event.
                draw:  function (obj) {alert('The chart was drawn');},
                click: function (obj) {alert('A bar was clicked!');}
            }
        }
    }).draw();
</script>

Note

There's information about replacements for the standard DOM1 events here