https://github.com/breuleux/quaint-google-charts
Embed Google Charts in Quaint documents
https://github.com/breuleux/quaint-google-charts
chart google-charts quaint
Last synced: about 1 month ago
JSON representation
Embed Google Charts in Quaint documents
- Host: GitHub
- URL: https://github.com/breuleux/quaint-google-charts
- Owner: breuleux
- Created: 2016-01-26T23:54:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-02T05:33:58.000Z (over 8 years ago)
- Last Synced: 2025-04-14T20:14:43.231Z (about 1 month ago)
- Topics: chart, google-charts, quaint
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# quaint-google-charts
Google Charts plugin for Quaint
## Install
In your Quaint project directory, run the command:
quaint --setup google-charts
## Sample usage
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](https://developers.google.com/chart/interactive/docs/gallery/bubblechart#color-by-numbers):
```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
```
## `chart` macro
The `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](https://developers.google.com/chart/interactive/docs/)
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.
### `data`
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
*role* relative to the nearest data column to its left. For instance,
a column named `=style` 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
```
[Documentation on column roles](https://developers.google.com/chart/interactive/docs/roles)
### `source`
Instead of `data`, the `source` attribute can be set to the path to a
file containing the data. The data can be in `json` format, or using
plugins like `quaint-csv` 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.
## Options
There are no global configuration options at the moment.