jQuery Google Charting Reference

A jQuery plugin that sets a division to request a Google chart. If you find this plugin useful please vote for it on the jQuery site.

This page provides a documentation reference for working with the plugin v1.2.3. See a demonstration of the Google chart plugin and download the code from there. Or see a minimal page that you could use as a basis for your own investigations.

Instance Options

A separate chart instance is created for each targetted division and may have its own settings: $('divs').gchart({series: [...]});.

Below are the options that may be applied to each Google chart instance. Although all are optional, you probably want to provide at least the data values to be plotted via the series setting.

axes | backgroundColor | barGroupSpacing | barSpacing | barWidth | barZeroPoint | chartColor | dataLabels | encoding | extension | gridLine | gridOffsets | gridSize | height | legend | legendSize | mapArea | mapColors | mapDefaultColor | mapRegions | margins | markers | maxValue | minValue | onLoad | pieOrientation | qrECLevel | qrMargin | ranges | series | title | titleColor | titleSize | type | visibleSeries | width

NameTypeDefaultComments
widthnumber0 Set the width of the desired chart. If not set explicitly it defaults to the width of its containing division. Google imposes size restrictions on the charts, being 1000 pixels in either direction, but with an overall maximum of 300,000 pixels in area (e.g. 1000 x 300, 600 x 500). If either dimension exceeds 1000 it is reduced to this amount. If the image size is greater than the area limit the height is recalculated so that it is valid again. Map charts are restricted to 440 x 220 pixels in size.
heightnumber0 Set the height of the desired chart. If not set explicitly it defaults to the height of its containing division. See width for restrictions.
marginsnumber or number[2] or number[4]null Set the minimum margins around the chart. The value may be a single number representing identical margins all around or an array containing either left/right and top/bottom margins or left, right, top, and bottom margins in pixels. Leave as null for default margins.

Since 1.2.0.
titlestring'' Set the title of the chart as a whole. Include pipe (|) characters to indicate new lines.
titleColorstring'' Set the colour of the title. See the section on colour for more details.
titleSizenumber0 Set the size (pixels) of the chart title.
backgroundColorstring or objectnull Set the background colour to be used for the entire image. See the section on colour for more details.

If more than a single colour is required you can set this option to an object with the following attributes:

angle (string or number) either a descriptive term for the angle ('horizontal' for left to right, 'vertical' for bottom to top, 'diagonalUp' for bottom/left to top/right, or 'diagonalDown' for top/left to bottom/right) or the number of degrees from the positive x-axis (may be negative),

striped (boolean) true for a series of distinct stripes or false for a continuous gradient,

colorPoints ([][2]) an array of two-item arrays containing a colour and an offset from 0.0 (bottom/left) to 1.0 (top/right).

See the gradient and stripe functions for an easy way to create simple gradients and stripes.
chartColorstring or objectnull Set the background colour for the chart itself. See backgroundColor above for more details.
legendstring'' Set the position of the legend: 'top', 'topVertical', 'bottom', 'bottomVertical', 'left', or 'right', or '' for none.

Since 1.2.0 - added 'topVertical' and 'bottomVertical'.
legendSizenumber[2]null Set the minimum size of the legend. The array contains width and height in pixels. Leave as null for default size. This setting is ignored if margins is not set.

Since 1.2.0.
typestring'pie3D' Specify the type of chart required.

line is a simple line chart with implied x-values.

lineXY is a line chart with explicit x- and y-values.

sparkline is a simple line chart with implied x-values and no axes.

barHoriz is a bar chart oriented horizontally with stacked series.

barVert is a bar chart oriented vertically with stacked series.

barHorizGrouped is a bar chart oriented horizontally with side-by-side series.

barVertGrouped is a bar chart oriented vertically with side-by-side series.

pie is a two-dimensional pie chart showing a single series.

pie3D is a three-dimensional pie chart showing a single series.

pieConcentric is a two-dimensional pie chart showing multiple series in concentric rings.

venn is a Venn diagram showing relationships between up to three sets, see the venn function for assistance in creating these diagrams.

scatter is a chart of individual points specified as x- and y-values along with a size, see the scatter function for assistance in creating these charts.

radar is a circular graph with values plotted out towards the perimeter, series are joined by straight lines.

radarCurved is a circular graph with values plotted out towards the perimeter, series are joined by curved lines.

map is a country or US state map shaded based on data values, see the map function for assistance in creating these charts.

meter is a Google meter showing a single value, see the meter function for assistance in creating these charts.

qrCode is a two-dimensional bar code that can encode text, see the qrCode function for assistance in creating these bar codes.

Since 1.2.0 - added 'pieConcentric'.
encodingstring'' Set the type of encoding of data values to be used.

text normalises the values to 0-100 and presents them as normal text with commas (,) separating values and pipes (|) separating series (the default).

scaled doesn't normalise the values and presents them as normal text with commas (,) separating values and pipes (|) separating series.

simple normalises the values to 0-61 and presents them as one character (A-Za-z0-9) with no value separator and commas (,) separating series.

extended normalises the values to 0-4095 and presents them as two characters (A-Za-z0-9-.) with no value separator and commas (,) separating series.
seriesobject[][this.series('Hello World', [60, 40])] Provide the data values to be charted. You can create the series objects directly or you can use the series function to generate a new series object. Since an x-y line chart requires a special format for the series, you should use the seriesForXYLines function to assist in that case. Series data can also be loaded from external sources via the seriesFromCsv and seriesFromXml functions.

Each entry in the array is an object with the following attributes:

label (string, optional) the display text for this series,

data (number[]) the data values to be plotted,

color (string or string[], optional) the colour for the series - see the section on colour for more details; provide an array to specify colours for each item in the series; if fewer colours than the number of segments are given, the colours are recycled for the remaining segments,

fillColor (string, optional) the background colour between this series and the next one,

minValue (number, optional) the minimum value for this series,

maxValue (number, optional) the maximum value for this series,

lineThickness (number, optional together with lineSegments) the width (pixels) of the line for this series,

lineSegments (number[2], optional together with lineThickness) the lengths (pixels) of line segments and gaps when drawing the line for this series.

Since 1.2.0 - color can be an array.
visibleSeriesnumber0 Indicate how many series should be drawn directly. The remainder are still available for use with markers. A value of 0 means that all series should be drawn. The visible series must appear first in the list of series.

Since 1.2.0.
dataLabelsstring[][] Specify the labels to apply to each of the data items in the series. Whereas the series labels apply to the entire series, these labels apply to all the first, second, etc. items across all the series.
axesobject[][] Define any number of axis labels for your chart, including multiple sets of labels for one axis. Default labels range from 0 to 100 with 10 steps in between. You can use the axis function to assist in creating axis definitions and the GChartAxis functions to modify them.

Each entry in the array is either a string giving the axis name or a GChartAxis object with the following attributes:

axis (string) the name of the axis to which this definition applies ('top', 'left' or 'y', 'bottom' or 'x', 'right'),

labels (string[], optional) the text labels to appear along this axis; unless positioned as described below, these labels are evenly spaced along the axis starting and ending at the edges of the chart; if omitted numeric labels corresponding to each tenth of the range are shown,

positions (number[], optional) the positions of the labels along the axis ranging from the range start (0 by default) at the bottom/left to the range end (100 by default) at the top/right; if positions are defined but no labels are supplied, then these values become the labels as well,

range (number[2 or 3], optional) the start and end points of the range of values depicted, which may be given as highest to lowest to invert the labels; an optional third entry specifies the interval between points in the range; if not specified a range of 0 to 100 and an interval of 1/10th the range is assumed,

color (string, optional) the text colour for the labels; see the section on colour for more details,

alignment (string, optional) the alignment of the labels ('left', 'center', 'right'); the default alignment changes per axis,

size (number, optional) the size (pixels) of the text for the labels,

drawing (string, optional) the drawing control to specify what is drawn for the axis ('line', 'ticks', 'both' (default)),

tickColor (string, optional) the colour of the tick marks; defaults to axis colour,

tickLength (number, optional) the length of the tick marks; negative values are drawn inside the chart; the maximum positive value is 25.

Since 1.2.0 - added drawing, tickColor, and tickLength attributes.
rangesobject[][] Define any number of data ranges to display on your chart. You can use the range function to assist in creating range definitions. Each entry in the array is an object with the following attributes:

vertical (boolean) true to draw the range vertically across the chart or false to draw it horizontally,

color (string) the colour to be used for this range; see the section on colour for more details,

start (number) the starting value for the range between 0.0 at the bottom/left and 1.0 at the top/right,

end (number, optional) the ending value for the range between 0.0 at the bottom/left and 1.0 at the top/right; if omitted a line is drawn rather than a rectangular area.
markersobject[][] Define any number of markers to display on your chart. You can use the marker function to assist in creating marker definitions. Each entry in the array is an object with the following attributes:

shape (string) the type of shape to draw for this marker ('arrow', 'circle', 'cross', 'diamond', 'down', 'flag', 'financial', 'horizontal', 'number', 'plus', 'sparkfill', 'sparkline', 'square', 'text', 'vertical'),

color (string) the colour to be used for this marker; see the section on colour below for more details,

series (number) the index of the series to which this marker applies (0-n),

item (number or string or number[2 or 3], optional) the index of the point within that series to which this marker applies (0-n) or -1 or 'all' for all points in that series (the default) or 'everyn' where n is a number to regularly space the markers or 'everyn[start:end]' where the values are numbers to regularly space the markers within the given range of points or [start, end, every] to only apply markers to the specified range of points and optionally evenly space them or [x, y] positions (see positioned below),

size (number, optional) the size (pixels) for this marker,

priority (string or number, optional) the rendering priority of this marker ('behind' or -1, 'normal' or 0 (the default), 'above' or +1),

text (string, optional) the text to show if this is a 'text' or 'flag' type marker or the number format for a 'number' type marker - see the numberFormat function for formatting options,

positioned (boolean, optional) true to absolutely position the marker - the item value must be an array of two values in the range 0.0 to 1.0.

Since 1.1.0 - 'sparkfill' and 'sparkline' types.

Since 1.2.0 - 'flag', 'financial', and 'number' types, ranges on item, positioned setting.
minValuenumber0 The minimum value displayed on the chart. Set to $.gchart.calculate to calculate the minimum from the actual data values.
maxValuenumber100 The maximum value displayed on the chart. Set to $.gchart.calculate to calculate the maximum from the actual data values.
gridSizenumber[2][] Specify the horizontal and vertical spacing (pixels) between grid lines on the chart.
gridLinenumber[2][] Specify the appearance of the grid lines by providing the lengths (pixels) of the line segments and the gaps between them. A continuous line has a gap of zero. This setting is ignored if gridSize hasn't been specified.
gridOffsetsnumber[2][] Specify the offsets of the grid lines by providing the x and y values (pixels). This setting is ignored if gridSize and gridLine haven't been specified.

Since 1.2.0.
extensionobject{} Additional parameters may be passed to the Google chart request via this object, whose attributes are transferred across.

For example: {xyz: 4} would add &xyz=4.
barWidthnumber or stringnull Specify the width (pixels) of the bars in a bar chart. The width can also be set to $.gchart.barWidthAuto to automatically resize the bars to fill the chart, or $.gchart.barWidthRelative to resize the bars based on the spacing between bars and groups being relative to the width of a bar.

Since 1.2.0 - can use $.gchart.barWidthAuto or $.gchart.barWidthRelative.
barSpacingnumbernull Specify the spacing (pixels) between the bars within a group in a bar chart. This setting has no effect unless barWidth is also set. If barWidth is $.gchart.barWidthRelative the value should be between 0.0 and 1.0.
barGroupSpacingnumbernull Specify the spacing (pixels) between groups of bars in a bar chart. This setting has no effect unless barWidth and barSpacing are also set. If barWidth is $.gchart.barWidthRelative the value should be between 0.0 and 1.0.
barZeroPointnumbernull Specify the position of the zero line in a bar chart, ranging from 0.0 at the bottom/left to 1.0 at the top/right. The bars in the chart then extend from this line up or down to the value for each data point.
pieOrientationnumber0 Specify the starting angle for a pie chart in degrees from the positive x-axis.

Since 1.2.0.
mapAreastring'world' Define the area to show in a map chart ('world', 'africa', 'asia', 'europe', 'middle_east', 'south_america', 'usa').
mapRegionsstring[][] Specify the codes for the regions to be coloured on the map. Use the appropriate ISO 3166 country codes or US state codes to identify the regions. The order in this array needs to match that in the series data array.

You can use the map function to assist in creating map options.
mapDefaultColorstring'white' Specify the colour used for regions without associated data. See the section on colour below for more details.
mapColorsstring[2]['aaffaa', 'green'] Specify the starting and ending colours for coloured regions on a map. Colours are calculated between these end points based on the data value for each region relative to the maximum for the chart.
qrECLevelstringnull Specify the error correction level to use for a QR code ('low' (default), 'medium', 'quarter', 'high').
qrMarginnumbernull Specify the margin (squares) to leave around the outside of a QR code. The default is 4.
onLoadfunctionnull Provide a callback function that is invoked when the chart has been loaded. There are no parameters and this refers to the surrounding division.

Since 1.2.3.

Functions

axis | 'change' | color | 'destroy' | gradient | lineXYSeries | map | marker | meter | numberFormat | qrCode | range | scatter | series | seriesForXYLines | seriesFromCsv | seriesFromXml | setDefaults | stripe | venn

SignatureReturnsComments
$(div).gchart('change', options)jQuery object Update the options for the Google chart instance attached to the given division(s).
$(div).gchart('destroy')jQuery object Remove the Google chart functionality from the given division(s).
$.gchart.axis(axis, labels, positions, rangeStart, rangeEnd, rangeInterval, colour, alignment, size) GChartAxis object Create an axis definition for use with the axes option.

axis (string) the name of the axis being defined ('top', 'bottom' or 'x', 'left' or 'y', 'right'),

labels (string[], optional) the labels shown on this axis - unless positioning details are included the labels are evenly spaced along the axis starting and ending at the edges of the chart; if omitted numeric labels corresponding to each tenth of the range are shown,

positions (number[], optional - may only be present if labels is present) the positions of the labels along the axis ranging from the range start (0 by default) at the bottom/left to the range end (100 by default) at the top/right; if positions are defined but no labels are supplied, then these values become the labels as well,

rangeStart (number, optional) the starting value for the range of the axis,

rangeEnd (number, optional - may only be present if rangeStart is present) the ending value for the range of the axis; this value may be less than the start of the range to invert the axis,

rangeInterval (number, optional - may only be present if rangeStart and rangeEnd are present) the interval between values for the range of the axis; note that it must be negative for an inverted range,

colour (string, optional) the text colour for the labels; see the section on colour for more details,

alignment (string, optional) the alignment of the labels ('left', 'center', 'right'),

size (number, optional) the size (pixels) of the text for the labels.

For example:
$.gchart.axis('bottom', ['Jan', 'Feb', 'Mar',
	'Apr', 'May', 'Jun'], 'black');
$.gchart.axis('left', 0, 40, 'red', 'right'),
$.gchart.axis('left', ['C'], [50], 'red', 'right')

Since 1.2.0 - added rangeInterval.
$.gchart.color(r, g, b, a)string Create a colour value in the format required by Google charts (six or eight hexadecimal digits). You can specify the red/green/blue and optional alpha (transparency) values (0-255) or the name of a standard colour with an optional alpha value.

You can always pass colour names directly as values to all functions.

The standard colours are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, transparent, white, yellow.

For example:
$.gchart.color(255, 165, 0) // orange
$.gchart.color('red')
$.gchart.color('blue', 128) // translucent blue
$.gchart.gradient(angle, colour1, colour2) object Create a simple colour gradient for a background for use with the backgroundColor or chartColor options.

angle (string or number) the direction of the gradient as a name ('horizontal', 'vertical', 'diagonalUp', 'diagonalDown') or the number of degrees from the positive x-axis (may be negative),

colour1 (string[]) a list of colours to evenly transform between or (string) the start colour for the gradient (bottom/left); see the section on colour for more details,

colour2 (string) the end colour for the gradient (top/right); omit if colour1 is an array.

For example:
$.gchart.gradient('horizontal',
	'black', 'transparent')
$.gchart.gradient(60, 'lime', 'blue')
$.gchart.gradient(0, ['yellow', 'lime', 'blue'])
$.gchart.lineXYSeries(series) object[] Deprecated in favour of seriesForXYLines.

Since 1.1.0.
$.gchart.map(mapArea, values, defaultColour, startColour, endColour, options) options Generate the options required for a map chart.

mapArea (string, optional) the region of the map to show ('world' (default), 'africa', 'asia', 'europe', 'middle_east', 'south_america', 'usa'),

values (object) the data values to plot; each country/state is identified by its two-character code (ISO 3166 country codes or US state codes) as an attribute name and the plotted value is the associated value,

defaultColour (string, optional) the colour used for regions without associated data; see the section on colour for more details,

startColour (string, optional) the starting colour used for regions with associated data,

endColour (string, optional) the ending colour used for regions with associated data,

options (object, optional) any additional options for this chart.

For example:
$(div).gchart($.gchart.map('world',
	{AU: 20, BR: 40, CO: 60, EG: 80,
	FR: 100, IN: 0, JP: 20, PL: 40,
	SA: 60, TR: 80, US: 100, ZA: 0}))
$.gchart.marker(shape, colour, series, item, size, priority, text, positioned) object Create a marker definition for use with the markers option.

shape (string) the type of shape to draw ('arrow', 'circle', 'cross', 'diamond', 'down', 'flag', 'financial', 'horizontal', 'number', 'plus', 'sparkfill', 'sparkline', 'square', 'text', 'vertical'),

colour (string) the colour to be used for this marker; see the section on colour for more details,

series (number) the index of the series to which this marker applies (0-n),

item (number or string or number[2 or 3], optional) the index of the point within that series to which this marker applies (0-n) or -1 or 'all' for all points in that series (the default) or 'everyn' where n is a number to regularly space the markers or 'everyn[start:end]' where the values are numbers to regularly space the markers within the given range of points or [start, end, every] to only apply markers to the specified range of points and optionally evenly space them or [x, y] positions (see positioned below),

size (number, optional) the size (pixels) for this marker (default 10); both this and the following parameter may be omitted and text specified instead,

priority (string or number, optional) the rendering priority of this marker ('behind' or -1, 'normal' or 0 (default), 'above' or +1),

text (string, optional - takes precedence over priority if size is absent) the text to show if this is a 'text' or 'flag' type marker or the number format for a 'number' type marker - see the numberFormat function for formatting options,

positioned (boolean, optional) true to absolutely position the marker - the item value must be an array of two values in the range 0.0 to 1.0.

For example:
$.gchart.marker('diamond', 'red', 0)
$.gchart.marker('circle', 'yellow', 1, 'every3')
$.gchart.marker('text', 'black', 0, 14, 12,
	'above', 'Note this')
$.gchart.marker('number', 'blue', 2, [2, 10], 15,
	'above', $.gchart.numberFormat('f', 1))

Since 1.1.0 - 'sparkfill' and 'sparkline' types.

Since 1.2.0 - 'flag', 'financial', and 'number' types, ranges on item, and positioned setting.
$.gchart.meter(text, value, maxValue, colours, options) options Generate the options required for a Google meter chart.

text (string, optional) the text to display at the end of the arrow,

value (number) the position of the arrow,

maxValue (number, optional) the maximum value for the meter (default 100),

colours (string[], optional) the colours to display blended across the band,

options (object, optional) any additional options for this chart.

For example:
$(div).gchart($.gchart.meter('Speed', 70))
$(div).gchart($.gchart.meter('Memory', 200, 1000,
	['lime', 'yellow', 'red'], {title: 'PC1'}))

Since 1.2.0 - added colours parameter.
$.gchart.numberFormat(type, prefix, suffix, precision, showX, zeroes, separators) string Generate a number format string for use with a 'number' marker.

type (string) the type of format: $.gchart.formatFloat ('f'), $.gchart.formatPercent ('p'), $.gchart.formatScientific ('e'), or $.gchart.formatCurrency ('c') - with the last you also need to add the three-character currency designation, e.g. AUD or EUR

prefix (string, optional) the text that appears before each number,

suffix (string, optional - may only be present if prefix is present) the text that appears after each number,

precision (number, optional) the number of decimal places to display,

showX (boolean, optional) is true to display the x-value for the point or false (default) to show the y-value,

zeroes (boolean, optional - may only be present if showX is present) is true to display trailing zeroes or false (default) to drop them,

separators (boolean, optional - may only be present if showX and zeroes are present) is true to display group separators or false (default) to omit them.

For example:
$.gchart.marker('number', 'blue', 0,
	$.gchart.numberFormat($.gchart.formatFloat, 1))
$.gchart.marker('number', 'green', 1,
	$.gchart.numberFormat('cAUD', '', 'M', 2))

Since 1.2.0.
$.gchart.qrCode(text, encoding, ecLevel, margin) options Generate the options required for a QR code.

text (string) the text to encode into the bar code or (object) these parameters as attributes of an object,

encoding (string, optional) the encoding scheme to use ('UTF-8' (default), 'ISO-8859-1', 'Shift_JIS'),

ecLevel (string, optional) the error correction level ('low' (default), 'medium', 'quarter', 'high'),

margin (number, optional) the margin (squares) to leave around the outside of the bar code (default 4).

For example:
$(div).gchart($.gchart.qrCode(
	'This is a QR Code'))
$(div).gchart($.gchart.qrCode(
	'This one contains a longer text message',
	'ISO-8859-1', 'high', 2))
$.gchart.range(vertical, colour, start, end) object Create a range definition for use with the ranges option.

vertical (boolean, optional) true if a vertical range or false if horizontal (default),

colour (string) the colour of the range; see the section on colour for more details,

start (number) the starting point for the range (0.0 to 1.0),

end (number, optional) the ending point for the range (0.0 to 1.0); if omitted a line is drawn instead of a rectangular area.

For example:
$.gchart.range('ccccff', 0.25, 0.75)
$.gchart.range(true, 'ccffcc', 0.6)
$.gchart.scatter(values, options) options Generate the options required for a scatter chart.

values (number[][]) the details of the points to plot, each data value is an array of two or three numbers: the x- and y-coordinates and an optional point size (0-100),

options (object, optional) any additional options for this chart.

For example:
$(div).gchart($.gchart.scatter(
	[[10, 80], [30, 40, 50], [60, 70, 25],
	[90, 20], [20, 10], [40, 90], [20, 50, 75],
	[50, 70, 75], [90, 30], [70, 50]]))
$.gchart.series(label, data, colour, fillColour, minValue, maxValue, thickness, segments) object Generate a new series object for a chart for use with the series option.

label (string, optional) the label for this series,

data (number[]) the data values for this series,

colour (string or string[], optional) the colour for this series; provide an array to specify colours for each item in the series; if fewer colours than the number of segments are given, the colours are recycled for the remaining segments,

fillColour (string, optional) the fill colour for this series - from this line to the next,

minValue (number, optional) the minimum value for this series - both this and the next parameter should be present or both omitted,

maxValue (number, optional) the maximum value for this series,

thickness (number, optional) the thickness (pixels) of the line for this series - both this and the next parameter should be present or both omitted,

segments (number[2], optional) the line and gap lengths (pixels) of the line for this series.

For example:
$.gchart.series([10, 20, 30])
$.gchart.series('Firefox',
	[0.00, 4.06, 8.13, 9.95], 'blue')

Since 1.2.0 - colour can be an array.
$.gchart.seriesForXYLines( series) object[] Transform a series into the format required for an x-y line chart for use with the series option.

series (object[]) the details of the points to plot as normal series, where each data value may be an array of two points specifying the x- and y-coordinate of the point. If you want to use the default even spacing for one of the series, provide just the y-values.

For example:
$(div).gchart({type: 'lineXY',
	series: $.gchart.seriesForXYLines(
	[$.gchart.series([[0, 20], [30, 30],
	[60, 40], [70, 50], [90, 60], [95, 70],
	[100, 80]], 'red'),
	$.gchart.series([[10, 100], [30, 90],
	[40, 40], [45,20], [52, 10]], 'green'),
	$.gchart.series([5, 33, 50, 55, 7], 'blue')])})

Since 1.1.0 - previously was lineXYSeries.
$.gchart.seriesFromCsv(csv) object[] Generate a set of series objects from data in CSV (comma-separated values) format for use with the series option.

csv (string or string[]) the CSV data for all the series.

Each line represents one series and consists of any number of data values and, optionally, additional details about the series. For the latter, a header line is required to identify the columns. They should be named for the series attributes (label, color, fillColor, minValue, maxValue, lineThickness, lineSegmentLine, lineSegmentGap) or be of the form yn, where n is a sequential number, for the data values. If you want to specify x-y line values, include columns named xn before the corresponding y-values. If x-values are not required for one series, leave the fields blank on that line. If there is no header line, all entries are treated as data values.

If the data reside remotely, use Ajax to retrieve it as text and pass that to this function.

For example:
$.gchart.seriesFromCsv(
	'label,color,y1,y2,y3,y4\n' +
	'IE,ff0000,95.97, 91.80, 88.16, 86.64\n' +
	'Netscape,00ff00,3.39, 2.83, 1.61, 0.00\n' +
	'Firefox,0000ff,0.00, 4.06, 8.13, 9.95')

Since 1.1.0.
$.gchart.seriesFromXml(xml) object[] Generate a set of series objects from data in XML format for use with the series option.

xml (string or Document) the XML data for all the series with the structure shown below. All attributes except point/@y are optional. Use the point/@x attribute to specify an X-Y line point.

<data>
	<series label="" color="" fillColor=""
		minValue="" maxValue=""
		lineThickness="" lineSegments="">
		<point x="" y=""/>
		...
	</series>
	...
</data>
If the data reside remotely, use Ajax to retrieve it as XML and pass that to this function.

For example:
$.gchart.seriesFromXml(
  '<?xml version="1.0" encoding="UTF-8"?>\n' +
  '<data>\n' +
  '  <series label="IE" color="ff0000">\n' +
  '    <point y="95.97"/>\n' +
  '    <point y="91.80"/>\n' +
  '    <point y="88.16"/>\n' +
  '    <point y="86.64"/>\n' +
  '  </series>\n' +
  '  <series label="Netscape" color="00ff00">\n'+
  '    <point y="3.39"/>\n' +
  '    <point y="2.83"/>\n' +
  '    <point y="1.61"/>\n' +
  '    <point y="0.00"/>\n' +
  '  </series>\n' +
  '  <series label="Firefox" color="0000ff">\n'+
  '    <point y="0.00"/>\n' +
  '    <point y="4.06"/>\n' +
  '    <point y="8.13"/>\n' +
  '    <point y="9.95"/>\n' +
  '  </series>\n' +
  '</data>')

Since 1.1.0.
$.gchart.setDefaults(options)void Update the default instance options (see options tab) to use with all Google chart instances.
$.gchart.stripe(angle, colours) object Create a simple colour striping for a background with equal widths for each stripe for use with the backgroundColor or chartColor options.

angle (string or number) the direction along which the stripes are drawn as a name ('horizontal', 'vertical', 'diagonalUp', 'diagonalDown') or the number of degrees from the positive x-axis (may be negative),

colours (string[]) the colours for the stripes; see the section on colour for more details.

For example:
$.gchart.stripe('horizontal', ['white', 
	'silver', 'gray', 'white', 'silver'])
$.gchart.stripe(60, ['white', 'ffa500'])
$.gchart.venn(size1, size2, size3, overlap12, overlap13, overlap23, overlap123, options) options Generate the options required for a Venn diagram.

size1, size2, size3 (number) the relative sizes of the three sets,

overlap12, overlap13, overlap23 (number) the percentage overlaps between each pair of the three sets,

overlap123 (number) the percentage overlap of all three sets,

options (object, optional) any additional options for this chart.

For example:
$(div).gchart($.gchart.venn(
	100, 80, 60, 10, 30, 30, 10))

Constants

NameTypeComments
$.gchart.barWidthAutostring Assign this value to the barWidth setting to have the bars in a bar chart automatically resize to fill the chart.

Since 1.2.0.
$.gchart.barWidthRelativestring Assign this value to the barWidth setting to have the bars in a bar chart resized based on the barSpacing and barGroupSpacing settings being relative values (0.0 to 1.0).

Since 1.2.0.
$.gchart.calculatenumber Use this value for the minValue or maxValue settings to calculate from the actual data values.
$.gchart.formatFloatstring Use this value for the type in a numberFormat call for a floating point number.

Since 1.2.0.
$.gchart.formatPercentstring Use this value for the type in a numberFormat call for a percentage value - multiplies the value by 100 and appends '%'.

Since 1.2.0.
$.gchart.formatScientificstring Use this value for the type in a numberFormat call for a number in scientific notation (e.g. 1.234e5).

Since 1.2.0.
$.gchart.formatCurrencystring Use this value for the type in a numberFormat call for a currency value in conjunction with the three-character currency code - automatically displays the currency sign.

Since 1.2.0.

Axis Objects

Due to the large number of details that define an axis, they are now represented by a separate object (GChartAxis). Use the axis function to create GChartAxis objects and add them to the chart with the axes setting.

Since 1.2.0.

Attributes

NameTypeDefaultComments
axisstring- The name of the axis to which this definition applies: 'top', 'left' or 'y', 'bottom' or 'x', 'right'.
labelsstring[]null The text labels to appear along this axis. Unless positioned as described below, these labels are evenly spaced along the axis starting and ending at the edges of the chart.
positionsnumber[]null The positions of the labels along the axis ranging from the range start (0 by default) at the bottom/left to the range end (100 by default) at the top/right. If positions are defined but no labels are supplied, then these values become the labels as well.
rangenumber[3]null The start and end points of the range of values depicted, which may be given as highest to lowest to invert the labels. An optional third entry specifies the interval between points in the range. If not specified a range of 0 to 100 and an interval of 1/10 of the range is assumed.
colorstringnull The text colour for the labels. This colour also applies to the tick marks unless tickColor is specified. See the section on colour for more details.
alignmentstringnull The alignment of the labels: 'left', 'center', 'right'.
sizenumbernull The size (pixels) of the text for the labels.
drawingstringnull The drawing control to specify what is drawn for the axis: 'line', 'ticks', or 'both' (default).
tickColorstringnull The colour of the tick marks. This overrides the color setting.
tickLengthnumbernull The length of the tick marks. Negative values are drawn inside the chart. The maximum positive value is 25.

Functions

SignatureReturnsComments
axis(axis)GChartAxis object or string Update the axis position for this axis. Returns the current axis value if no parameters are supplied.

axis (string) is the new position: 'top', 'bottom', 'left', or 'right'.
labels(labels)GChartAxis object or string[] Update the labels for this axis. Returns the current labels if no parameters are supplied.

labels (string[]) is the new labels.
positions(positions)GChartAxis object or number[] Update the axis label positions for this axis. Returns the current label positions if no parameters are supplied.

positions (number[]) is the new label positions.
range(start, end, interval)GChartAxis object or object Update the range of values for this axis. Returns the current range if no parameters are supplied - as an object with start, end, and interval attributes.

start (number) is the starting value for the range,

end (number) is the ending value for the range, which may be less than the starting value,

interval (number, optional) is the interval between values in the range, and defaults to 1/10th of the range.
style(colour, alignment, size)GChartAxis object or object Update the style for this axis. Returns the current style if no parameters are supplied - as an object with color, alignment, and size attributes.

colour (string) is the colour for the axis; see the section on colour for more details,

alignment (string, optional) is the alignment for the axis labels: 'left', 'center', or 'right',

size (number, optional) is the size of the label font.
drawing(drawing)GChartAxis object or string Update the drawing control for this axis. Returns the current drawing control if no parameters are supplied.

drawing (string) is the new drawing control: 'line', 'ticks', or 'both'.
ticks(colour, length)GChartAxis object or object Update the tick mark style for this axis. Returns the current tick mark style if no parameters are supplied - as an object with color and length attributes.

colour (string) is the colour for the tick marks; see the section on colour for more details,

length (number, optional) is the length of the tick marks; negative values draw inside the chart.

Contact Keith Wood at kbwood{at}iinet.com.au with comments or suggestions.