Pseudo-standard events

• The events properties
• The new dollar syntax
• Using DOM1 style addition

The 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;
};

Note

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