HOWTO: Get the original value from a click

[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.

1. The Pie chart

<script>
    /**
    * This creates the Pie chart and adds the click listener to it
    */
    var pie = new RGraph.Pie('cvs', [4,3,5,8,6]);
    pie.Set('chart.labels', ['Lois','Pete','Luis','Kevin','John']);
    pie.Set('chart.exploded', [15]);
    pie.Set('chart.events.click', myFunc);
    pie.Set('chart.events.mousemove', function (e, shape) {e.target.style.cursor = 'pointer';});
    pie.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>

2. 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('cvs2', [4,-3,5,-8,6]);
    line.Set('chart.labels', ['Lois','Pete','Luis','Kevin','John']);
    line.Set('chart.events.click', myFunc2);
    line.Set('chart.events.mousemove', function (e, shape) {e.target.style.cursor = 'pointer';});
    line.Set('chart.xaxispos', 'center');
    line.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>

3. 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('cvs3', [[34,6],[4,8,5],[5,1,2],[4,3,2]]);
    bar.Set('chart.labels', ['Lois','Pete','Luis']);
    bar.Set('chart.events.click', myFunc3);
    bar.Set('chart.events.mousemove', function (e, shape) {e.target.style.cursor = 'pointer';});
    bar.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