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>