Witti 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

Fork me on GitHubLink directly to a hosted version of the script:

  1. Use directly from Github: https://stack.payne.run/wcdn/l/lib/visualization/visualization.min.js

Download the file to your server:

  1. Use either link above
  2. Access from Github: https://github.com/wittiws/visualization

Include the HTML5 Data Attributes

The following configurations are for Witti 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

blog comments powered by Disqus