The new pseudo-standard events

  Read comments...

Summary
Documentation about the pseudo-standard events (such as the click, mousemove and mouseover events) that are available in RGraph.

Update September 2016 The onmouseout event has been added making the total number of available events four.

Update April 2016 Now, if the mousemove event handler function returns a value that is "truthy" (ie: true, 1, [], {}, function () {} etc) then the mouse cursor shape is changed to pointer. If not then it remains at default
[No canvas support]

 

The events properties

Normally, if you apply an onclick 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 see the effect here when you click on a bar - you get an alert. And when you click on a non-bar area - nothing happens.

You can use the properties:

...to add your listeners to the chart. The listener is simply a function that is called when the event fires. Only one function can be specified, so you need to check the index to see if the bar is the one you want.


<script>
    /**
    * This is the function that is run when the event fires.
    */
    function myClick (e, shape)
    {
        var obj = shape[0],
            x   = shape[1],
            y   = shape[2],
            w   = shape[3],
            h   = shape[4],
            idx = shape[5]
        
        alert('The onclick listener just fired with index: ' + idx);
    }

    function myMousemove ()
    {
        return true;
    }


    new RGraph.Bar({
        id:'cvs',
        data: [4,5,8,4,6,8,5],
        options: {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            colors: ['blue'],
            textSize: 14,
            eventsClick: myClick // The myClick function is the one above
            eventsMousemove: myMousemove // The myMousemove function is the one above
        }
    }).wave()
</script>

 

The new $ syntax

Added in October 2012 the new dollar syntax provides you with a very easy way to add an event listener to a specific bar/point/segment etc. You can read more about this new method here.

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: {
                labels: ['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 in the eventsMousemove property. When you move the mouse away from the bar the cursor will be restored to its previous state. Like this:

obj.set('eventsMousemove', function (e, shape)
{
    return true;
});

Note

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

Share RGraph
X

Comments