MENU
.net Powerful JavaScript charts
About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 16 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.20, 1st December 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

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

More »

A new HTML table import utility for version 6.03

Written by Richard Heyes, RGraph author, on 15th September 2021

After a suggestion by a user, RGraph now has an import utility that fetches data from an html table (on the same page). This can make getting data into RGraph even easier than before. All you have to do is give it the id of the table (the html tag attribute) and RGraph will fetch the table and parse it into a usable form.

Actually, you don't even have to do that - you can, instead of the id, give the constructor a string that contains the table tag and RGraph will turn it into a usable table tag and then provide access to the data contained in it.

Here's an example of the code:

<script>
    // Pass the RGraph.HTMLTable constructor the ID (the HTML attribute) of the
    // table and a callback function which creates the chart. The callback function
    // is passed the RGraph.HTMLTable object as the only argument. You can then use
    // the API functions to get to your data.
    new RGraph.HTMLTable('myTable', function (table)
    {
        // Use the column() function to get the labels
        // and the two columns of data
        var labels  = table.column(0, 1), // Column index (starts at zero), start row (starts at zero)
            col1    = table.column(1, 1), // Column index (starts at zero), start row (starts at zero)
            col2    = table.column(2, 1), // Column index (starts at zero), start row (starts at zero)
            numrows = table.numrows,      // Number of rows in the table (including headers and footers)
            numcols = table.numcols,      // Number of columns in the table
            data    = [];                 // The data-array-to-be (it will be populated from the col1 and col2 variables)

        // Combine the two columns into one data array that
        // can be passed to the Bar chart object
        for (var i=0; i<col1.length; ++i) {
            data.push([col1[i], col2[i]]);
        }


        // Now, create the chart
        var bar = new RGraph.Bar({
            id:'cvs',
            data: data,
            options: {
                yaxis: false,
                xaxis: false,
                xaxisLabels: labels,
                marginInner: 5,
                marginBottom: 15,
                colors: ['#666', '#7CB5EC'],
                backgroundGridBorder: false,
                backgroundGridHlines: false
            }
        }).grow({frames: 45}).responsive([
            {maxWidth: null, width: 650, height: 250, options:{textSize: 14},parentCss:{'float':'right'}},
            {maxWidth: 750, width: 400, height: 200, options:{textSize: 10}, parentCss:{'float':'none'}}
        ]);
    });
</script>