Google Charts and REBOL

Important Google have deprecated the Google Image Charts API and will cease to work from April 2015.

There’s very few ways to conveniently include a chart in a web page or document than to use the Google Charts API.  However, it’s really not that much fun stitching together the constituent parts of a good looking chart.  Enter REBOL.

Usage

This script allows you to build Google Charts using more familiar, readable terms than editing the URL.  However, an understanding of the basic methods of the API is understood.

The ‘chart function returns a URL that is ready to use.  It can be embedded in HTML, copied and pasted to a browser or included in a REBOL/View application.  Indeed, it’s easy enough to view any of these examples in REBOL/View:

view layout [image chart [...]]

Basic Line Chart

‘Line’ is the default Chart Type.  If you only provide data, you will get the resulting image:

chart [data: [10 95 60 95 10]]

chart [data: [10 95 60 95 10]]

Basic Bar Chart

Types can be specified, either by the preset words (line, line/xy, sparkline, bar, bar/horizontal, pie, pie/flat, map) or by the chart types set in the Google API:

chart [type: 'bar data: [10 95 60 95 10] bars: [55 8]]

chart [type: 'bar data: [10 95 60 95 10] bars: [55 8]]

Data Sets

Data can be supplied as a single or multiple sets.  The default scale is 0-100.

data: [1 2 3 4]
data: [[1 2] [3 4] [5 6]]

For simple data encoding, the scale is 0-1:

data: [0.1 0.2 0.3]
simple: true

Styles

Basic styles can be supplied:

color: red
area: [color solid 255.153.0]
area: [[color solid 255.140.204][chart solid 0.204.204]]
bars: [40 5 10] ; width space group-space

Markers

Work in progress: allows you to add various markers to a chart:

markers: [
financial 0.0.204 0 1x4 10
circle 204.0.0 0 1x-1 3
]

See Google’s Compound Charts page for more info on how markers work.

Supported MarkersDescription
lineLine overlay
financialFinancial or Candlestick
arrow, cross, rectangle, diamond, circle, squareVarious shape markers.

Examples

Generic Pie Chart:

chart [
title: "Chart Example"
type: 'pie
size: 350x150
labels: ["Red" "Green" "Blue"]
data: [50 40 10]
colors: reduce [red green blue]
area: [color solid 244.244.240]
]

My Chart

Example in response to Generate a Google PIE Chart:

do http://reb4.me/r/google-charts

clipdata: {Adsense Revenue^-300
Sponsors^-500
Gifts^-50
Others^-58}

chart [
title: "Revenue"
size: 650x300
type: 'pie

; extract raw data
data: parse/all clipdata "^/^-"
labels: extract data 2
data: extract/index data 2 2

; format data and labels
sum: 0
forall data [sum: sum + data/1: to-integer data/1]
forall data [change data round 100 * data/1 / sum]
forall labels [
labels/1: rejoin [labels/1 " " data/(index? labels) "%"]
]
]