Bar Charts
Single Bar
// signups_cancellations.json
[
{"month":"2019-07-01", "signups":191, "cancellations":54},
{"month":"2019-08-01", "signups":224, "cancellations":66},
{"month":"2019-09-01", "signups":225, "cancellations":48}
]
<div
pg-chart="bar"
pg-data-path="/data/signups_cancellations.json"
pg-x="month"
pg-y="signups"
pg-title="Signups by Month"
></div>
Grouped Bars using pg-series
// signup_cancellation_events.json
[
{"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-07-01", "event":"cancellation", "count":54},
{"month":"2019-08-01", "event":"cancellation", "count":66},
{"month":"2019-09-01", "event":"cancellation", "count":48}
]
<div
pg-chart="bar"
pg-data-path="/data/signup_cancellation_events.json"
pg-x="month"
pg-y="count"
pg-series="event"
pg-title="Signups & Cancellations by Month"
></div>
Grouped Bars using pg-y
If all of the y values appear in each object (like signups and cancellations below), plot
them by passing a comma separated list eg. pg-y="signups,cancellations".
If the y values have a different key
// signups_cancellations.json
[
{"month":"2019-07-01", "signups":191, "cancellations":54},
{"month":"2019-08-01", "signups":224, "cancellations":66},
{"month":"2019-09-01", "signups":225, "cancellations":48}
]
<div
pg-chart="bar"
pg-data-path="/data/signups_cancellations.json"
pg-x="month"
pg-y="signups,cancellations"
pg-title="Signups & Cancellations by Month"
></div>
Stacked Bars using pg-y
// popsicle_sales.json
[
{"month":"2019-07-01", "strawberry":191, "blueberry":54, "lemon":111},
{"month":"2019-08-01", "strawberry":224, "blueberry":66, "lemon":130},
{"month":"2019-09-01", "strawberry":225, "blueberry":48, "lemon":96 },
]
<div
pg-chart="bar"
pg-stacked="true"
pg-data-path="/data/popsicle_sales.json"
pg-x="month"
pg-y="strawberry,lemon,blueberry"
pg-title="Popsicle Flavor Sales"
pg-colors="#FF6384,#FFC863,#5499C7"
></div>
Line Charts
Single Line
// signups_cancellations.json
[
{"month":"2019-07-01", "signups":191, "cancellations":54},
{"month":"2019-08-01", "signups":224, "cancellations":66},
{"month":"2019-09-01", "signups":225, "cancellations":48}
]
<div
pg-chart="line"
pg-data-path="/data/signups_cancellations.json"
pg-x="month"
pg-y="signups"
pg-title="Signups by Month"
></div>
Stacked Lines using pg-y
// signups_cancellations.json
[
{"month":"2019-07-01", "signups":191, "cancellations":54},
{"month":"2019-08-01", "signups":224, "cancellations":66},
{"month":"2019-09-01", "signups":225, "cancellations":48}
]
<div
pg-chart="line"
pg-data-path="/data/signups_cancellations.json"
pg-x="month"
pg-y="signups,cancellations"
pg-title="Signups & Cancellations by Month"
></div>
Stacked Lines using pg-series
// signup_cancellation_events.json
[
{"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-07-01", "event":"cancellation", "count":54},
{"month":"2019-08-01", "event":"cancellation", "count":66},
{"month":"2019-09-01", "event":"cancellation", "count":48}
]
<div
pg-chart="line"
pg-data-path="/data/signup_cancellation_events.json"
pg-x="month"
pg-y="count"
pg-series="event"
pg-title="Signups & Cancellations by Month"
></div>
Scatter Charts
Scatter Chart using pg-y
// global_signups.json
[
{"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},
]
<div
pg-chart="scatter"
pg-data-path="/data/global_signups.json"
pg-x="month"
pg-y="N America,Asia,Europe"
pg-title="Global Sign Ups by Continent"
pg-colors="#FF6384,#FFC863,#E5E5E5"
></div>
Scatter Chart using pg-series
// global_signups.json
[
{"month": "6", "continent": "Europe", "count": 112},
{"month": "6", "continent": "Asia", "count": 142},
{"month": "6", "continent": "N America", "count": 142},
{"month": "7", "continent": "Asia", "count": 149},
{"month": "7", "continent": "Europe", "count": 163},
{"month": "7", "continent": "N America", "count": 121},
{"month": "8", "continent": "Asia", "count": 140},
{"month": "8", "continent": "Europe", "count": 132},
{"month": "8", "continent": "N America", "count": 156},
]
<div
pg-chart="scatter"
pg-data="/data/global_signups.json"
pg-x="month"
pg-y="count"
pg-series="event"
pg-title="Global Signups by Continent"
></div>
Bubble Chart using pg-series
// global_signups.json
[
{"month": "6", "continent": "Europe", "count": 112},
{"month": "6", "continent": "Asia", "count": 142},
{"month": "6", "continent": "N America", "count": 142},
{"month": "7", "continent": "Asia", "count": 149},
{"month": "7", "continent": "Europe", "count": 163},
{"month": "7", "continent": "N America", "count": 121},
{"month": "8", "continent": "Asia", "count": 140},
{"month": "8", "continent": "Europe", "count": 132},
{"month": "8", "continent": "N America", "count": 156},
]
<div
pg-chart="scatter"
pg-data="/data/planets.json"
pg-x="month"
pg-y="count"
pg-series="event"
pg-title="Global Signups by Continent"
></div>