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.
  • 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. They must have a container

, 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);

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

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]

Snippets