Google Charts API: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 3: | Line 3: | ||
=Summary= | =Summary= | ||
=Introduction= | =Introduction= | ||
Google Charts are relatively easy to get running but have a lot of nuance to them. | Google Charts are relatively easy to get running but have a lot of nuance to them. Please make use of existing documentation and resources as it will help you immensely. | ||
==Data== | ==Data== | ||
The [[https://developers.google.com/chart/interactive/docs/reference#DataTable DataTable]] class stores data to be used by charts. | The [[https://developers.google.com/chart/interactive/docs/reference#DataTable DataTable]] class stores data to be used by charts. | ||
* Data can be imported via JSON or via arrays using [[https://developers.google.com/chart/interactive/docs/reference#dataparam this syntax]]. | * Data can be imported via JSON or via arrays using [[https://developers.google.com/chart/interactive/docs/reference#dataparam this syntax]]. | ||
==Charts== | ==Charts== | ||
Chart options can be set in multiple ways: | |||
* at creation by passing JSON as the chart's options parameter | ===Options=== | ||
** Example: | Chart options can be set in multiple ways. Here's [[https://developers.google.com/chart/interactive/docs/customizing_charts documentation]] and some examples. | ||
* options can be set in the following ways: | |||
** at creation by passing JSON as the chart's options parameter | |||
*** Example: | |||
<code>var options = { | <code>var options = { | ||
width: 400, | width: 400, | ||
| Line 16: | Line 26: | ||
title: 'Toppings I Like On My Pizza', | title: 'Toppings I Like On My Pizza', | ||
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] | colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] | ||
}; | };</code> | ||
** chart.setOptions(JSON) which is equivalent to setting options at creation | |||
chart. | ** chart.setOption('key', value) where key is the option being changed | ||
*** Example: | |||
<code> | |||
chart.setOption('is3D', true); | |||
</code> | |||
** chart.getOptions() is the read accessor | |||
* chart. | ===Drawing=== | ||
*draw a chart by using chart.draw(data, options) where data is a datatable and options is JSON | |||
<code> | <code> | ||
chart. | chart.draw(data, options); | ||
</code> | </code> | ||
==Views== | ==Views== | ||
The [[https://developers.google.com/chart/interactive/docs/reference#DataView DataView]] class changes how a DataTable is represented. | The [[https://developers.google.com/chart/interactive/docs/reference#DataView DataView]] class changes how a DataTable is represented. | ||
==Controls== | ==Controls== | ||
==Errors== | |||
They're a hassle. Most Javascript errors can be debugged from your browser's developer console. Google Charts drawing errors, on the other hand, seem to provide little feedback. | |||
Generally a chart fails to draw in the following ways. | |||
* when the DataTable is | |||
# empty | |||
# incorrectly formatted | |||
# of incorrect type | |||
# lacking vital information such as headers | |||
* when the Chart's options are incorrect such as | |||
# wrong chart type [[https://developers.google.com/chart/interactive/docs/gallery documentation]] | |||
# wrong axis type (discrete/continuous) [[https://developers.google.com/chart/interactive/docs/customizing_axes documentation]] | |||
=Resources= | =Resources= | ||
| Line 38: | Line 73: | ||
[[https://code.google.com/apis/ajax/playground/#column_chart Code Playground]] | [[https://code.google.com/apis/ajax/playground/#column_chart Code Playground]] | ||
* | * Here are some good charts to start with. | ||
** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart column chart]] | |||
** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/table table chart]] | |||
** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart pie chart]] | |||
** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart combo chart]] | |||
==External== | ==External== | ||
==Snippets== | ==Snippets== | ||
Revision as of 08:58, 3 February 2014
Under construction during Spring 2014.
Summary
Introduction
Google Charts are relatively easy to get running but have a lot of nuance to them. Please make use of existing documentation and resources as it will help you immensely.
Data
The [DataTable] class stores data to be used by charts.
- Data can be imported via JSON or via arrays using [this syntax].
Charts
Options
Chart options can be set in multiple ways. Here's [documentation] and some examples.
- options can be set in the following ways:
- at creation by passing JSON as the chart's options parameter
- Example:
- at creation by passing JSON as the chart's options parameter
var options = {
width: 400,
height: 240,
title: 'Toppings I Like On My Pizza',
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
- chart.setOptions(JSON) which is equivalent to setting options at creation
- chart.setOption('key', value) where key is the option being changed
- Example:
chart.setOption('is3D', true);
- chart.getOptions() is the read accessor
Drawing
- draw a chart by using chart.draw(data, options) where data is a datatable and options is JSON
chart.draw(data, options);
Views
The [DataView] class changes how a DataTable is represented.
Controls
Errors
They're a hassle. Most Javascript errors can be debugged from your browser's developer console. Google Charts drawing errors, on the other hand, seem to provide little feedback.
Generally a chart fails to draw in the following ways.
- when the DataTable is
- empty
- incorrectly formatted
- of incorrect type
- lacking vital information such as headers
- when the Chart's options are incorrect such as
- wrong chart type [documentation]
- wrong axis type (discrete/continuous) [documentation]
Resources
- Here are some good charts to start with.
- [column chart]
- [table chart]
- [pie chart]
- [combo chart]