Difference between revisions of "Google Charts API"
(→Charts) |
(→Options) |
||
Line 26: | Line 26: | ||
Chart options can be created in multiple ways. Here's [[https://developers.google.com/chart/interactive/docs/customizing_charts documentation]] and some examples. | Chart options can be created 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> | <code> | ||
var options = { | var options = { | ||
Line 37: | Line 37: | ||
}; | }; | ||
</code> | </code> | ||
− | + | * chart.setOptions(JSON) which is equivalent to setting options at instantiation | |
− | + | * chart.setOption('key', value) where key is the option being changed | |
− | + | ** Example: <code>chart.setOption('is3D', true);</code> | |
− | <code> | + | * chart.getOptions() is the read accessor |
− | chart.setOption('is3D', true); | ||
− | </code> | ||
− | |||
===Drawing=== | ===Drawing=== |
Revision as of 21:23, 28 February 2014
Under construction during Spring 2014.
Contents
Introduction
- Google Charts are relatively easy to get running but have a lot of nuance to them.
- Consider using Google Sheets instead. Insert -> Chart uses the same API but with an intuitive GUI. Has potential downsides.
- 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. You can use a single datatable as the data source for multiple charts or dashboards.
- Data can be added manually via [functions], via JSON, via [arrayToDataTable()], via [a query] or via JavaScript literals using [this syntax].
Dashboards
The [dashboard] is a container for ChartWrapper and ControlWrapper objects. You must use a dashboard if you want to use controls or to use multiple charts that use the same datatable. Dashboards use ONE datatable. If you need to represent multiple datatables you need multiple dashboards. It has a draw function that'll redraw everything in the dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
Charts
Charts use options, must have a container div, must have a datatable, and must be drawn.
Options
Chart options can be created 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:
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 instantiation
- chart.setOption('key', value) where key is the option being changed
- Example:
chart.setOption('is3D', true);
- Example:
- chart.getOptions() is the read accessor
Drawing
- draw a chart by using chart.draw(data, options) where data is a datatable and options is a JSON string
chart.draw(data, options);
- to draw a dashboard, and all of its charts/controls, call the draw function with your datatable
dashboard.draw(data);
Views
The [DataView] class changes how a DataTable is represented. It's a wrapper that
Controls
The [controls] are filters that affect how data is represented in a chart. They're instantiated with JSON options similar to charts. In order to affect charts they must be bound to the chart using this snippet: "dashboard.bind(control, chart);".
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 format for that chart 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]
External
[Discrete vs Continuous timelines]