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.

• 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:

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.

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