About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

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>

See also