Google Charts API

Under construction during Spring 2014.

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. You can use a single datatable with multiple charts.

• Data can be imported via JSON or via arrays using [this syntax].

Dashboards

The [[

Charts

Charts are

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:

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

1. empty
2. incorrectly formatted
3. of incorrect format for that chart type
4. lacking vital information such as headers

• when the Chart's options are incorrect such as

1. wrong chart type [documentation]
2. wrong axis type (discrete/continuous) [documentation]

Resources

Google

[Library Documentation]

[Code Playground]

• Here are some good charts to start with.
  • [column chart]
  • [table chart]
  • [pie chart]
  • [combo chart]

External

[Wikipedia Overview] [Discrete vs Continuous timelines]