Google Charts and REBOL

Important Google have deprecated the Google Image Charts API and will cease to work [at some point].

Red The Charts script has been updated to work with Red (at the time of writing v0.6.3). Examples here are written for Rebol 2 and may need tweaks to work with Red.

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.


This script allows you to build Google Charts using more familiar, readable and malleable terms than editing the oft cryptic URL.

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 [...]]

In Red, you can use COMPOSE:

view compose [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


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


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.


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:


clipdata: {Adsense Revenue^-300

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) "%"]