How to get the original value from a click

Share RGraph:   

Summary
A guide for retrieving the original value from a click. Retrieving the original value can be useful when you're building interactive or adjustable charts.

[No canvas support]

This HOWTO focuses on retrieving the original value from a click. A similar HOWTO guide is concerned with adding events to a chart. A link to that is at the bottom of this page.

The easiest way to get the original value from a click is by using the chart.events.click property. This allows you to add a function to your chart which is called when a particular shape is clicked (eg a bar, point or segment.). This function is passed two arguments - the original event object and an array containing details of the shape. One of these details is the index - and this allows you to get the original value from the objects data array.

Below are three examples of retrieving the original value from a click.

The Pie chart

<script>
    /**
    * This creates the Pie chart and adds the click listener to it
    */
    var pie = new RGraph.Pie({
        id: 'cvs',
        data: [4,3,5,8,6],
        options: {
            labels: ['Lois','Pete','Luis','Kevin','John'],
            textAccessible: true,
            textSize: 14,
            eventsClick: myFunc,
            eventsMousemove: function (e, shape) {return true;}
        }).draw()


    
    /**
    * This is the function that is called when the Pie chart is clicked on
    */
    function myFunc (e, shape)
    {
        // If you have multiple charts on your canvas the .__object__ is a reference to
        // the last one that you created
        var obj   = e.target.__object__
        
        var index = shape['index'];
        var value = obj.data[index];
        
        alert('Value is: ' + value);
    }
</script>

The Line chart

[No canvas support]

Because you can have multiple sets of data with the line chart its a little different to the Pie chart. The original data is stored in the .original_data array. This contains all of the datasets that you can give to the Line chart so its a two dimensional array.


<script>
    /**
    * This creates the Line chart and adds the click listener to iy
    */
    var line = new RGraph.Line({
        id: 'cvs2',
        data: [
            [4,-3,5,-8,6],
            [8,6,1,3,5]
        ],
        options: {
            labels: ['Lois','Pete','Luis','Kevin','John'],
            eventsClick: myFunc2,
            eventsMousemove: function (e, shape) {return true;},
            xaxispos: 'center',
            textAccessible: true,
            textSize: 14,
        }
    }).draw();
    
    
    /**
    * This is the function that is called when the Pie chart is clicked on
    */
    function myFunc2 (e, shape)
    {
        // If you have multiple charts on your canvas the .__object__ is a reference to
        // the last one that you created
        var obj   = e.target.__object__

        var index   = shape['index_adjusted'];
        var dataset = shape['dataset'];
        var value   = obj.original_data[dataset][index];

        alert('Value is: ' + value);
    }
</script>

The Bar chart

[No canvas support]

The Bar chart data array can either be a straight forward array of numbers (ie the data) or a two dimensional array when showing a stacked or a grouped chart.


<script>
    /**
    * This creates the Line chart and adds the click listener to it
    */
    var bar = new RGraph.Bar({
        id: 'cvs3',
        data: [[34,6],[4,8,5],[5,1,2],[4,3,2]],
        options: {
            labels: ['Lois','Pete','Luis'],
            textAccessible: true,
            textSize: 14,
            eventsClick: myFunc3,
            eventsMousemove: function (e, shape) {return true;},
        }
    }).draw();
    
    
    /**
    * This is the function that is called when the Pie chart is clicked on
    */
    function myFunc3 (e, shape)
    {
        // If you have multiple charts on your canvas the .__object__ is a reference to
        // the last one that you created
        var obj   = e.target.__object__;

        var dataset = shape['dataset'];
        var index   = shape['index_adjusted'];
        var value = typeof(index) == 'number' ? obj.data[dataset][index] : obj.data[dataset];

        alert('Value: ' + value);
    }
    }
</script>

See also

Comments

Add a new comment...