Postgraphs Documentation

Installation

Include postgraphs.js in your html

(The defer attribute will make sure postgraphs loads asynchronously and waits for the page to finish loading before drawing charts.)

Quick Start

• 1. Include postgraphs.js in your html

  <script src="https://postgraphs.com/postgraphs.js" defer></script>

• 2. Postgraphs will Fetch JSON from an endpoint or file with pg-data-path or put the JSON inline with pg-data.

  <div pg-data-path="/endpoint/or/file.json" ... >

  <div pg-data='[{"month": "0", "Asia": 100, "Europe": 100, "N America": 100}, {"month": "1", "Asia": 108, "Europe": 102, "N America": 107}, {"month": "2", "Asia": 104, "Europe": 110, "N America": 116}, {"month": "3", "Asia": 115, "Europe": 115, "N America": 109}, {"month": "4", "Asia": 116, "Europe": 132, "N America": 136}, {"month": "5", "Asia": 120, "Europe": 115, "N America": 120}, {"month": "6", "Asia": 118, "Europe": 136, "N America": 124}, {"month": "7", "Asia": 114, "Europe": 149, "N America": 135}, {"month": "8", "Asia": 132, "Europe": 148, "N America": 132}, {"month": "9", "Asia": 172, "Europe": 172, "N America": 163}, {"month": "10", "Asia": 150, "Europe": 120, "N America": 180}, {"month": "11", "Asia": 166, "Europe": 199, "N America": 177}, {"month": "12", "Asia": 208, "Europe": 136, "N America": 184}, {"month": "13", "Asia": 165, "Europe": 152, "N America": 126}, {"month": "14", "Asia": 198, "Europe": 142, "N America": 226}, {"month": "15", "Asia": 235, "Europe": 175, "N America": 235}, {"month": "16", "Asia": 148, "Europe": 244, "N America": 180}, {"month": "17", "Asia": 185, "Europe": 151, "N America": 134}, {"month": "18", "Asia": 136, "Europe": 172, "N America": 136}, {"month": "19", "Asia": 176, "Europe": 233, "N America": 214}, {"month": "20", "Asia": 240, "Europe": 280, "N America": 140}, {"month": "21", "Asia": 184, "Europe": 247, "N America": 142}, {"month": "22", "Asia": 210, "Europe": 188, "N America": 276}, {"month": "23", "Asia": 238, "Europe": 238, "N America": 261}]' ... >

• 3. Create and configure the chart by making a div with some pg- attributes.

  <div
    pg-chart="scatter"
    pg-data='[{"month": "0", "Asia": 100, "Europe": 100, "N America": 100}, {"month": "1", "Asia": 108, "Europe": 102, "N America": 107}, {"month": "2", "Asia": 104, "Europe": 110, "N America": 116}, {"month": "3", "Asia": 115, "Europe": 115, "N America": 109}, {"month": "4", "Asia": 116, "Europe": 132, "N America": 136}, {"month": "5", "Asia": 120, "Europe": 115, "N America": 120}, {"month": "6", "Asia": 118, "Europe": 136, "N America": 124}, {"month": "7", "Asia": 114, "Europe": 149, "N America": 135}, {"month": "8", "Asia": 132, "Europe": 148, "N America": 132}, {"month": "9", "Asia": 172, "Europe": 172, "N America": 163}, {"month": "10", "Asia": 150, "Europe": 120, "N America": 180}, {"month": "11", "Asia": 166, "Europe": 199, "N America": 177}, {"month": "12", "Asia": 208, "Europe": 136, "N America": 184}, {"month": "13", "Asia": 165, "Europe": 152, "N America": 126}, {"month": "14", "Asia": 198, "Europe": 142, "N America": 226}, {"month": "15", "Asia": 235, "Europe": 175, "N America": 235}, {"month": "16", "Asia": 148, "Europe": 244, "N America": 180}, {"month": "17", "Asia": 185, "Europe": 151, "N America": 134}, {"month": "18", "Asia": 136, "Europe": 172, "N America": 136}, {"month": "19", "Asia": 176, "Europe": 233, "N America": 214}, {"month": "20", "Asia": 240, "Europe": 280, "N America": 140}, {"month": "21", "Asia": 184, "Europe": 247, "N America": 142}, {"month": "22", "Asia": 210, "Europe": 188, "N America": 276}, {"month": "23", "Asia": 238, "Europe": 238, "N America": 261}]'
    pg-x="month"
    pg-y="N America,S America,Europe"
    pg-title="Global Sign Ups by Continent"
  >
  </div>

  <div
    pg-chart="bar"
    pg-data='[{"month":"2019-04-01", "event":"signup", "count":68}, {"month":"2019-05-01", "event":"signup", "count":121}, {"month":"2019-06-01", "event":"signup", "count":141}, {"month":"2019-07-01", "event":"signup", "count":191}, {"month":"2019-08-01", "event":"signup", "count":224}, {"month":"2019-09-01", "event":"signup", "count":225}, {"month":"2019-10-01", "event":"signup", "count":148}, {"month":"2019-11-01", "event":"signup", "count":167}, {"month":"2019-04-01", "event":"cancellation", "count":29}, {"month":"2019-05-01", "event":"cancellation", "count":24}, {"month":"2019-06-01", "event":"cancellation", "count":26}, {"month":"2019-07-01", "event":"cancellation", "count":54}, {"month":"2019-08-01", "event":"cancellation", "count":66}, {"month":"2019-09-01", "event":"cancellation", "count":48}, {"month":"2019-10-01", "event":"cancellation", "count":39}, {"month":"2019-11-01", "event":"cancellation", "count":40}]'
    pg-x="month"
    pg-y="count"
    pg-series="event"
    pg-title="Signups & Cancellations by Month"
  >
  </div>

That's all you need to start making charts. For more details, continue reading the documenation or see the examples page.

Formatting JSON

Postgraphs has two methods of getting data pg-data-path and pg-data.

Use attributes to tell Postgraphs which keys to use for looking up values in the json objects. See the examples page for examples.

Postgraphs expects the JSON to be an array of data points OR an object with a key "results" which is an array of data points.

[
  {"month":"2021-07-01", "signups":29},
  {"month":"2021-08-01", "signups":39},
  {"month":"2021-09-01", "signups":59}
]

{
  "results": [
    {"month":"2021-07-01", "signups":29},
    {"month":"2021-08-01", "signups":39},
    {"month":"2021-09-01", "signups":59}
  ]
}

Each data point should contain a key for the x-axis and y-axis. When there are multiple y-axes, they can be in the same object or separate objects.

[
  {"month":"2021-07-01", "signups":29, "cancellations":4},
  {"month":"2021-08-01", "signups":39, "cancellations":5},
  {"month":"2021-09-01", "signups":59, "cancellations":7}
]

[
  {"month":"2021-07-01", "signups":29},
  {"month":"2021-07-01", "cancellations":4},
  {"month":"2021-08-01", "signups":39},
  {"month":"2021-08-01", "cancellations":5}
]

Styling Charts