Visualization
Visualization is an HTML5 wrapper to Google Visualizations to avoid dealing with any JavaScript directly. Instead, simply add the appropriate <script> tag and then add HTML5 data attributes to the page.
Including the JavaScript File
Link directly to a hosted version of the script:
- Use directly: https://www.brainite.org/visualization/dist/visualization.min.js
- Download the file to your server:
- Use either link above
- Access from Github: https://github.com/brainite/visualization
Include the HTML5 Data Attributes
The following configurations are for Brainite Visualization:
| Name | Default | Description |
|---|---|---|
data-gv-image="[true|print]" |
"" |
Convert the chart to an image client-side for easier copy-paste. If set to “true”, then the image is created at web resolution. If set to “print”, then the image is created at 4x web resolution. |
data-gv-datatable="[HTML ID]" |
N/A | The ID of the HTML table that contains the data. This is unnecessary if the table is inside the chart <div>. |
data-gv-datatablehide="1" |
"0" |
Hide the HTML table that contains the data. This only applies to tables outside of the chart <div>. |
data-gv-datatablerotate="1" |
"0" |
Rotate the data from the HTML table so that the series exist in rows rather than columns. |
The JavaScript converts all other data-gv-VARNAME attributes to Google Visualization option parameters.
Other examples
- Basic line chart example with series in rows using Brainite Visualization
- Basic line chart example using Brainite Visualization
External Resources
- jQuery: Used for interface manipulation
- Google Visualizations: Create visualizations based on data
- canvg: Convert visualizations to jpeg/png