A new HTML table import utility for version 6.03

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>