The demo below shows a very basic application of the visualization library to create a line chart from a simple HTML table. The HTML table is converted to a DataTable, and the HTML data-* attributes on the div tag are converted to Google Visualization parameters. This particular approach signficantly reduces the logic that has to be implemented using the server-side language.
Instructions
If you have the data in an HTML table, there are only a couple extra steps you'll need to take.
Add JavaScript to the page
Add the JS to the page. If you use the hosted JS, the script tag would look like this:
<script type="text/javascript" src="https://www.brainite.org/visualization/dist/visualization.min.js"></script>
Add properly formatted HTML table to the page
- Use the <thead> and <th> tags on the first row
- Use the <tbody> tag for the table content
- Optionally use the table's <caption> tag for the chart title
Wrap the table in a div tag with the chart configurations
- Add a <div data-gv-type="LineChart"> tag around the table. The data-gv-type attribute is the bare essential for loading a line chart.
- Other Google Visualization properties can be set as HTML5 data tags with the extra prefix for a total prefix of "data-gv-".
- For example, the legend could be moved above the chart using data-gv-legend="top".
Demo (Example Line Chart)
| Year | Company A | Company B | Company C |
|---|---|---|---|
| Y2001 | 1 | 2 | 3 |
| Y2002 | 2 | 3 | 4 |
| Y2003 | 2 | 4 | 5 |
| Y2004 | 3 | 5 | 5 |
| Y2005 | 2 | 4 | 6 |
| Y2006 | 2 | 7 | 9 |
| Y2007 | 2 | 7 | 5 |
| Y2008 | 3 | 4 | 5 |
| Y2009 | 4 | 6 | 7 |