HTML table import utility
- Introduction
- Example HTML table markup and JavaScript code
- API documentation
- Using the HTML table connector without RGraph
- Using the HTML table connector with a string
- An alternative method of referencing rows and columns
Introduction
The html
table 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.
Example HTML table markup and JavaScript code
This is an example table that could be used with the table 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 thecss
that styles the table. It improves on a defaulthtml
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> // This is the canvas tag that the chart is shown on <canvas id="cvs" width="700" height="300">[No canvas support]</canvas> <!-- 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, 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'}} ] } }).grow({frames: 45}); }); </script>
API documentation
The api
for the RGraph.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
RGraph.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 HTML table 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 HTML table 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.