Google Chart Builder 1.0.1

Change Log
Version 1.0.1

This document discribes how to use the Google Chart Builder with Groovy and Grails. This builder is used to generate a RESTful URL to call the Google Charts API

Developer: Zan Thrash Email
Thanks to:
Justin Grammens for testing in Grails.

Creating a new chart

def chart = new GoogleChartBuilder()

Base URL

http://chart.apis.google.com/chart?

Chart Types (required) Google Charts API

Parameter Description Example
pieChart Creates a 2D pie chart chart.pieChart{}
pie3DChart Creates a 3D pie chart chart.pie3DChart{}
lineChart Creates a line chart chart.lineChart{}
lineXYChart Creates a XY coord line chart chart.lineXYChart{}
barChart Creates one of 4 types of bar charts based
on the parameters passed to it. The paramters
need to passed in an orderd fashion.
The first paramter indicates the directionallity of the bars
either horizontal or vertiacal
Note: you can use any word as long as it start with a lowercase h or v
The seocnd paramter indicates weather the bars are grouped
or stacked Note: you can use any word as long as it start with a lowercase
g or s 		chart.barChart('horizontal','stacked'){}
chart.barChart('horizontal','g'){}
chart.barChart('vert','s'){}
chart.barChart('v','grouped'){}
vennDiagram Creates a venn diagram chart.vennDiagramstrong>{}
scatterPlot Creates a scatter plot chart chart.scatterPlot{}

Chart Size (required)Google Charts API

Parameter Description Example
size Sets the width and height of the chart.
Must be within the chart type closure.
The size takes a map of named parameters.
Lowercase h stands for 'height'.
Lowercase w stands for 'width'. 		size(w:300, h:200)

Data (required)Google Charts API

Parameter Description Example
data The data closure takes one named paramater: encoding
Encoding can be set to:
text: Used for values 0.0 to 100.0
simple: Used for values 0 to 61
extended: Used for values 0 to 4095
Must be within the chart type closure.
 data(encoding:'text'){}
data(encoding:'simple'){}
data(encoding:'extended'){}
dataSet The dataSet closure takes a list of data points.
These data points are to be numeric.
The closure will take care of converting the numberic
values into the respecive encoding scheme.
Multiple set closues can be included within the data closure. 		set([])

Chart Title (optional)Google Charts API

Can be used in charts: All
Parameter Description Example
title The title closure can take two optional name parameters:
color: sets the titles font color(HEX value)
size: sets the titles font size
title{}
title(color:'ff0000', size:16){}
row The title closure takes a string value for the title.
Multiple rows can be added to the title closure for a
multiple row title.
rows must be within the title closure. 		row('Title string')

Chart Legend (optional)Google Charts API

Can be used in charts: line, lineXY, scatter, bar, venn
Parameter Description Example
legend The legend closure takes
one or more label closures 		legend{}
label Used to set the text of a legend key.
Each label takes a string paramter for the key name.
Each label corresponds to the
ordianl set under the data
closure. 		label('Legend string')

Colors (optioal)Google Charts API

Can be used in charts: all
Parameter Description Example
colors The colors closure takes
one or more color closures.
This closure must be within the chart type closure. 		color{}
color Used to set the color of a data set.
Each color takes a string paramter of a HEX color value.
Each color corresponds to the
ordianl set under the data
closure. 		color('fff000')

Chart and Background Fill (optional)Google Charts API

Can be used in charts: all
Parameter Description Example
backgrounds Closure used to set the background or area backgrounds
of the chart.
This closure must be within the chart type closure. 		background{}
area Clousure used within the backgrounds closure
Used to set the entire chart area background.
Closure can take one or both of the following closures:
solid
gradient
stripes
 area{}
solid Closure used to set the background or area to a solid color.
Closure takes a single named parameter: color which has a string value of a
HEX color. 		solid(color:'ff0000')
gradient Closure used to set the background or area to a gradient color.
Closure takes three named parameter:
angle: numeric value that set the gradient angle between 0 and 90 degrees
start: string value of a HEX color for the start color
end: string value of a HEX color for the end color
This closure must be within the background or area closure. 		gradient(angle:0, start:'fff000', end:'0000ff')
stripes Closure used to specificy linear stripse in the background or area of the chart.
Closure takes one or more stripe closures. This closure must be within the background or area closures. 		stripes{}
stripe Closure used to set the color and width of strips in the background or area of the chart.
Closure takes two named parameter:
color: string value of a HEX color for the stripe
width: decimal value representign the percentage of the charts width to stripe
This closure must be within the stripesclosure.
Mulitple stripe closues can be used. The pattern will repeate itself to fill the width of the chart. 		stripe(color:'CCCCCC', width:0.2)

Multiple Axis Labels (optional)Google Charts API

Can be used in charts: line, lineXY, scatter, bar
Parameter Description Example
axis Closure used to set the axis labels.
Closure takes one or more named parameter:
bottom: list of values for the axis labels
top: list of values for the axis labels
right: list of values for the axis labels
left: list of values for the axis labels
This closure must be within the chart type closure
Mulitple lables can be applied to the same axis. 		axis(top:[],bottom:[],right:[],left:[])

Grid Lines (optional)Google Charts API

Can be used in charts: line, lineXY, scatter
Parameter Description Example
grid Closure used to set the charts grid.
Closure takes 2 or 4 named parameter:
x (required): number representing the grid spacing on the x axis
y (required): number representing the grid spacing on the y axis
dash (optional): number representing the segment length in pixels of the grid line
space (optional): number representing the space between segmeints in pixels of the grid line
This closure must be within the chart type closure
 grid(x:20, y:25, dash:3, space:1)

Markers (optional) Google Charts API

Can be used in charts: line, lineXY, scatter
Parameter Description Example
markers Closure used to set the shape, range,fill markers
of the chart.
This closure must be within the chart type closure 		markers{}
shape Closure used to set the charts grid.
Closure takes 5 named parameter:
type: the type of marker for the point (see list below
color: string value of a HEX color to be used for the marker
set: number representing ordinal value (zero base) of the data set to apply to
point: is a floating point value that specifies on which data point the marker will be drawn
size: the size of the marker in pixels.
This closure must be within the chart type closure

Marker Types:
arrow
cross
diamond
circle
square
vPoint: vertical line from the x-axis to the data point.
vTop: vertical line from the x-axis to the top of the chart.
horizontal: horizontal line across the chart.
xShape: an X shape.

 shape(type:[markerType], color:'FF0000', set:0, point:1.0, size:20 )
range Closure used to specify horizontal and vertical range markers.
Closure takes 4 named parameter:
type: string value of 'horizontal' or 'vertical' .
color:string value of a HEX color.
start:
- horizontal range markers is the position on the y-axis at which the range starts where 0.00 is the bottom and 1.00 is the top.
- vertical range markers is the position on the x-axis at which the range starts where 0.00 is the left and 1.00 is the right.
end:
- horizontal range markers is the position on the y-axis at which the range ends where 0.00 is the bottom and 1.00 is the top.
- for vertical range markers is the position on the x-axis at which the range ends where 0.00 is the left and 1.00 is the right.
This closure must be within the markers closure
 rangeMarker(type:'horizontal', color:'FF0000', start:0.75, end:0.25)
fill Closure that specifies the fill area under a line chart. Closure takes 4 named parameter:
single (optional, defalut = false) determines if fill is for a single data seris.
color:string value of a HEX color.
startLine: the index of the line at which the fill starts.
endLine: the index of the line at which the fill ends
This closure must be within the markers closure
 fill(single:false, color:'ff0000', startLine:0, endLine:1)

Line Styles (optional) Google Charts API

Can be used in charts: line, lineXY
Parameter Description Example
lineStyle Closure used to set the graphs line style
Closure a map of named parameters:
The key is used as a lable for the line type list and refers to the ordinal value of the coresponding dataset
The value of each parameter must contain a list of 3 numeric values.
The first value = the line thickness.
The second value = the length of the line segment.
The third value = the length of the blank segment.
This closure must be within the chart type closure 		lineStyle(line1:[1,1,0], line2:[3,3,3])

Pie Chart Labels (optional) Google Charts API

Can be used in charts: pie, pie3d
Parameter Description Example
labels The labels closure can take multiple label closures
This closure must be within the chart type closure 		labels{}
label Closure used to set the label for a data set in a pie chart. This closure takes a single string paramters that is to be assinged to the label. Multiple labels can be added and are assigned relative to the data sets index. label('Label1')