HTML Table import utility
- Introduction
- The HTML table markup and JavaScript code
- API documentation
- Using the HTMLTable connector without RGraph
- Using the HTMLTable connector with a string
- An alternative method of referencing rows and columns
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 |
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.
-
Method: table.row(index[, start[, length]])
new RGraph.HTMLTable('myTable', function (table) { // Fetch the 2nd row (the counting starts at zero), ignoring the first column (again, the index starts at zero) column = table.row(1, 1); });
This fetches a row of data from the table. The first argument (the row index) is required whilst the other two are optional.
Arguments-
index
The only required argument to the function - this is the index of the row that you wish to fetch. Remember that the counting starts at zero (sotable.row(0)
will fetch the first row). -
start
This argument allows you to specify the column that the returned row data should start at. Remember that the counting starts at zero. It can be negative, in which case the counting for the start point starts at the end of the row data and goes backwards. This argument is optional. -
length
This argument allows you to specify the number of columns that are returned in the row data by this function. It can be negative, in which case the returned array will stop at this many items from the end of the row. This argument is optional.
-
-
Method: table.column(index[, start[, length]])
new RGraph.HTMLTable('myTable', function (table) { // Fetch the 2nd column (the index starts at zero), ignoring the first row (again, the index starts at zero) column = table.column(1, 1); });
This fetches a column of data from the table. The first argument (the column index) is required whilst the other two are optional.
Arguments-
index
The only required argument to the function - this is the index of the column that you wish to fetch. Remember that the counting starts at zero (sotable.column(0)
will fetch the first column). -
start
This argument allows you to specify the row that the returned column data should start at. Remember that the counting starts at zero. It can be negative, in which case the counting for the start point starts at the end of the column data and goes backwards. This argument is optional. -
length
This argument allows you to specify the number of rows that are returned in the column data by this function. It can be negative, in which case the returned array of column data will stop at this many items from the end of the column. This argument is optional.
-
-
Property: table.numcolumns
This property tells you how many columns there are in the table. -
Property: table.numrows
This property tells you how many rows there are in the table.
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.