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