A Javascript library that auto-generates responsive D3 charts from Google Sheets.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
.gitignore
README.md
gulpfile.js
index.html
package.json

README.md

pie-frame

A library that auto-generates responsive D3 charts from Google Sheets.

Dependencies

This library has the following dependencies:

These dependencies can be called individually or via the included vendor file at js/pieFrame-vendor.min.js.

Usage

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:
    • horizontal-bar
    • vertical-bar
    • pie
  • 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 red, orange, yellow, green, blue, purple, pink, and monochrome.
<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>

An example index.html file is included in this repository.