/pie-frame

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

Primary LanguageJavaScript

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.