HOWTO: Get the original value from a click
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
click
event. 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/object containing
details of the shape. One of these details is the
index - and this allows you to get the original value from the object's 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 // pie = new RGraph.Pie({ id: 'cvs', data: [4,3,5,8,6], options: { labels: ['Lois','Pete','Luis','Kevin','John'], textSize: 14 } }).draw().on('click', function (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__; // You can also get the object from the shape: shape.object var shape = obj.getShape(e); if (shape) { // Get the index that was clicked from the shape object var index = shape.index; // Use the index to get the correct data value var value = obj.data[index]; // Show the user what the value is alert('Value is: ' + value); } }).on('mousemove', function (e, shape) { return true; }); </script>
The Line chart
Because you can have multiple sets of data with the Line chart
it's a
little different from 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 it's a
two-dimensional array.
<script> // // This creates the Line chart and adds the click listener to it // line = new RGraph.Line({ id: 'cvs', data: [ [4,-3,5,-8,6], [8,6,1,3,5] ], options: { xaxisLabels: ['Lois','Pete','Luis','Kevin','John'], xaxisPosition: 'center', textSize: 14 } }).draw().on('click', function (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 shape = obj.getShape(e); if (shape) { var index = shape.index, dataset = shape.dataset, value = obj.original_data[dataset][index]; alert('Value is: ' + value); } }).on('mousemove', function () { return true; }); </script>
The Bar chart
The Bar chart
data array
can either be a straightforward array
of numbers
(ie the data) or a two-dimensional array
when
showing a stacked or a grouped chart.
<script> // // This creates the Bar chart and adds the click listener to it // bar = new RGraph.Bar({ id: 'cvs', data: [[34,6],[4,8,5],[5,1,2],[4,3,2]], options: { xaxisLabels: ['Lois','Pete','Luis'], textSize: 14 } }).draw().on('click', function (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 shape = obj.getShape(e); if (shape) { var dataset = shape.dataset; var index = shape.index; var value = typeof shape.object.data[dataset] === 'number' ? obj.data[dataset] : obj.data[dataset][index]; alert('Value: ' + value); } }).on('mousemove', function (e, shape) { return true; }); </script>