A library that auto-generates responsive D3 charts from Google Sheets.
This library has the following dependencies:
- randomColor (https://github.com/davidmerfield/randomColor)
These dependencies can be called individually or via the included vendor file at
The library relies on a new HTML-like tag called
<chart>. This tag will be replaced in the DOM by the library with a SVG chart, as dictated by the tag's attributes.
- data-id: (required) The Google Sheet data ID. The spreadsheet must be publicly accessible.
- data-type: (required) The style of chart that should be generated. Supported options are:
- data-colorseed: (optional) A random string or integer that will ensure the same colors are generated each time. If no seed is specified, random colors will be generated on each page load.
- data-hue: (optional) Determines which color hue is used by the chart. Supported hues (as per the randomColor library) are
<html> <head> <link href="assets/css/pieFrame.css" rel="stylesheet"> </head> <body> <chart data-id="GOOGLE-SHEET-ID" data-type="TYPE-OF-CHART"> A short description of your chart. </chart> <script src="assets/js/pieFrame-vendor.min.js"></script> <script src="assets/js/pieFrame.min.js"></script> </body> </html>
index.html file is included in this repository.