Google Charts plugin for Quaint
npm install quaint-google-chartsGoogle Charts plugin for Quaint
In your Quaint project directory, run the command:
quaint --setup google-charts
Simple pie chart. The first row is always the column names.
``quaint`
chart pie ::
* Gender, People
* Male, 497
* Female, 503
Bar chart with a title and explicit size:
`quaint`
chart bar ::
height = 400
width = 700
title = What is your favorite programming language?
data =
* Language, People, =style
* C, 7, red
* JavaScript, 10, blue
* Python, 13, purple
* Earl Grey, 1, orange
Line chart with the data taken from a json file:
`quaint`
chart line :: data.json
The same chart, but with labelled axes:
`quaint`
chart line ::
hAxis =
title = Number of days without a zombie apocalypse
vAxis =
title = Dogs
source = data.json
Last example. This chart is the same as found here:
`quaint`
chart bubble ::
width = 900
height = 500
colorAxis =
colors =
* yellow
* red
data =
* ID, X, Y, Temperature
* , 80, 167, 120
* , 79, 136, 130
* , 78, 184, 50
* , 72, 278, 230
* , 81, 200, 210
* , 72, 170, 100
* , 68, 477, 80
macroThe chart macro is used to define a chart at the place it is
used. There are global attributes, and others that are specific to the
chart type you are using.
See the documentation
for the available chart types and options. There are many of them and
I will not list them all here.
Still, here are a few options that will work on all charts:
* height: Height of the chart, in pixels (default: 500).
* width: Width of the chart, in pixels.
* title: Title, displayed on top by default.
* subtitle: Displayed under the title
* data: Data points.
* source: File containing the data points.
Other useful options, will work when applicable:
* hAxis: Settings for the horizontal axis.
* title: Name of the axis.
* vAxis: Settings for the vertical axis.
* title: Name of the axis.
The data must be a list of rows. The first row defines the column
names. The fields are comma-separated.
#### roles
If a column name starts with =, then the column fills a certain=style
role relative to the nearest data column to its left. For instance,
a column named defines the style of the data point on the
left. For instance, this creates a bar chart where each bar has a
different color:
`quaint`
chart bar ::
* Language, People, =style
* C, 7, red
* JavaScript, 10, blue
* Python, 13, purple
* Earl Grey, 1, orange
Instead of data, the source attribute can be set to the path to ajson
file containing the data. The data can be in format, or usingquaint-csv
plugins like or quaint-yaml`, in csv or yaml. This makes
it easy to create charts backed by data generated by a program, as
long as it is saved in a supported format.
There are no global configuration options at the moment.