HTML Table import utility

[No canvas support]
An example of fetching data from an HTML table (code shown below)

Introduction

The HTMLTable connector is new in October 2021 and makes fetching data from an HTML table that's on the same page easy. Example markup for the HTML table and the code for the import utility and bar chart are shown below.

The HTML table markup and JavaScript code

Figure 1 Figure 2
Richard 8 15
Julie 5 11
Gary 4 9
David 9 16
Charlie 6 13
Jacky 1 10
Nevil 8 15
The table that the above chart is created from

This is the table that produces the chart above using the HTMLTable connector. The table has been styled with CSS, which is also shown below. The table structure (the HTML code) is quite simple - with all of the styling having been done by the CSS. 

<!--
    This is the CSS that styles the table. It improves on a
    default HTML table, making it a little more presentable.
-->
<style>
    table {
        font-family: Arial;
        border: 1px solid #aaa;
        line-height: 1.1em;
        margin-left: auto;
        margin-right: auto;
    }
    
    table tr th {
        padding: 5px;
        background-color: #ccc;
    }
    
    table tr:nth-child(1) th:nth-child(1) {
        background-color: white;
    }
    
    table tr th,
    table tr td {
        text-align: center;
    }
    
    table tr:nth-child(2n+1) td:nth-child(1n+2) {
        background-color: #eee;
    }
</style>

<!--
    This is the table. The structure of it is quite simple,
    though it does have an ID attribute so that RGraph can
    identify it.
-->
<table id="myTable">
    <tr>
        <th></th>
        <th>Figure 1</th>
        <th>Figure 2</th>
    </tr>
    <tr>
        <td>Richard</td>
        <td>8</td>
        <td>15</td>
    </tr>
    <tr>
        <td>Julie</td>
        <td>5</td>
        <td>11</td>
    </tr>
    <tr>
        <td>Gary</td>
        <td>4</td>
        <td>9</td>
    </tr>
    <tr>
        <td>David</td>
        <td>9</td>
        <td>16</td>
    </tr>
    <tr>
        <td>Charlie</td>
        <td>6</td>
        <td>13</td>
    </tr>
    <tr>
        <td>Jacky</td>
        <td>1</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Nevil</td>
        <td>8</td>
        <td>15</td>
    </tr>
</table>

<!-- Include the RGraph libraries -->
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.table.js" ></script>
<script src="RGraph.bar.js" ></script>

<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 that are documented below 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,
                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>

API documentation

The API for the HTMLTable object is not big by any means - there are only a few methods along with a few properties. But by using the API you can easily get access to your data and make charts with it. For the documentation below you can assume that the table argument (that gets passed to the callback functions) is the HTMLTable object.

Using the HTMLTable connector without RGraph

The RGraph.HTMLTable connector works with no changes when the RGraph common core library isn't included in the page. So you can use it in your own projects freely and you don't have to include the core library on the page - which is by no means a small file (at the time of writing it weighed in at roughly 300k unminified and uncompressed).

Using the HTMLTable connector with a string

If it's easier for you then you can, instead of referencing an id, supply the whole HTML for the <table>. RGraph will then use an HTML5 <template> tag to dynamically create a <table> tag, parse it and you can then use the RGraph.HTMLTable object as you would with a regular, embedded <table> tag in your page. You could use this method inconjunction with an AJAX request in order to fetch tables from another page on your website. If you have cross-domain AJAX setup (normally AJAX can't cross domains) then you could fetch a table from a page on another website.

Here's some example code that shows the connector being used with a string: 

<script>
    RGraph.HTMLTable('string:<table><tr><td> ... </td></tr></table>', function (table)
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: table.row(1),
            options: {
                marginInner: 25,
                xaxisLabels: table.row(0),
                xaxis: false,
                yaxis: false,
                backgroundGridBorder: false,
                backgroundGridHlines: false
            }
        }).draw();
    });
</ssript>

An alternative method of referencing rows and columns

Instead of referencing rows and columns with numbers like this: 

// Get the first row starting at the second column
row = table.row(1,1);

You can also reference columns by the contents of the first item in the row or column. So for example consider this data: 

Rich,4,8,6,3,5,8,9
Paul,8,6,9,6,8,7,8
Olga,4,7,1,8,5,2,6
Dave,5,6,3,5,9,9,6
Xena,1,5,2,3,4,8,6

You can either do this:

// Get the second row starting at the second column
table.row(1, 1);

Or you can also reference the rows by the first column (the name) like this: 

// Get the first row where the first column is Paul, starting at the second column
table.row('Paul', 1);

And that would return this array: 

[8,6,9,6,8,7,8]
If your data is in no particular order then this method may help when it comes to extracting the information that you want. As well as the row() method, this also applies to the column() method.

Note
Be aware that when comparing strings they're both passed through the trim() function. This removes extraneous whitespace from each side of the string. When the column/row is returned though the whitespace is preserved. If you want to remove it though you too can use the trim() function on it.