How to get the original value from a click

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 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 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
    //
    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__
        var shape = obj.getShape(e);
        
        if (shape) {
            var index = shape.index;
            var value = obj.data[index];
            
            alert('Value is: ' + value);
        }
    }).on('mousemove', function (e, shape)
    {
        return true;
    });
</script>

The Line chart

[No canvas support]

Because you can have multiple sets of data with the line chart it's 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 it's a two dimensional array.


<script>
    //
    // This creates the Line chart and adds the click listener to it
    //
    line = new RGraph.Line({
        id: 'cvs2',
        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

[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
    //
    bar = new RGraph.Bar({
        id: 'cvs3',
        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>

See also