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.

chart pie ::
  * Gender,  People
  * Male,    497
  * Female,  503

Bar chart with a title and explicit size:

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:

chart line :: data.json

The same chart, but with labelled axes:

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:

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 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:

chart bar ::
  * Language,    People,  =style
  * C,           7,       red
  * JavaScript,  10,      blue
  * Python,      13,      purple
  * Earl Grey,   1,       orange

Documentation on column 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.