Difference between revisions of "Google Charts API"

From Earlham CS Department
Jump to navigation Jump to search
(External)
m
 
Line 9: Line 9:
  
 
==Data==
 
==Data==
The [[https://developers.google.com/chart/interactive/docs/reference#DataTable DataTable]] class stores data to be used by charts. You can use a single datatable as the data source for multiple charts or dashboards.
+
The [https://developers.google.com/chart/interactive/docs/reference#DataTable 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 [[https://developers.google.com/chart/interactive/docs/datatables_dataviews#emptytable functions]], via JSON, via [[https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable arrayToDataTable()]], via [[https://developers.google.com/chart/interactive/docs/datatables_dataviews#query a query]] or via JavaScript literals using [[https://developers.google.com/chart/interactive/docs/reference#dataparam this syntax]].
+
* Data can be added manually via [https://developers.google.com/chart/interactive/docs/datatables_dataviews#emptytable functions], via JSON, via [https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable arrayToDataTable()], via [https://developers.google.com/chart/interactive/docs/datatables_dataviews#query a query] or via JavaScript literals using [https://developers.google.com/chart/interactive/docs/reference#dataparam this syntax].
  
 
==Dashboards==
 
==Dashboards==
The [[https://developers.google.com/chart/interactive/docs/gallery/controls#using_controls_and_dashboards 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.
+
The [https://developers.google.com/chart/interactive/docs/gallery/controls#using_controls_and_dashboards 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.
  
 
<code>   
 
<code>   
Line 24: Line 24:
  
 
===Options===
 
===Options===
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:
 
options can be set in the following ways:
Line 52: Line 52:
  
 
==Views==
 
==Views==
The [[https://developers.google.com/chart/interactive/docs/reference#DataView DataView]] class changes how a DataTable is represented. It's a wrapper that  
+
The [https://developers.google.com/chart/interactive/docs/reference#DataView DataView] class changes how a DataTable is represented. It's a wrapper that  
  
 
==Controls==
 
==Controls==
The [[https://developers.google.com/chart/interactive/docs/gallery/controls#gallery 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);".
+
The [https://developers.google.com/chart/interactive/docs/gallery/controls#gallery 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);".
  
  
Line 71: Line 71:
  
 
* when the Chart's options are incorrect such as
 
* when the Chart's options are incorrect such as
# wrong chart type [[https://developers.google.com/chart/interactive/docs/gallery documentation]]
+
# 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]]
+
# wrong axis type (discrete/continuous) [https://developers.google.com/chart/interactive/docs/customizing_axes documentation]
  
 
=Resources=
 
=Resources=
 
==Google==
 
==Google==
[[https://developers.google.com/chart/interactive/docs/reference Library Documentation]]
+
[https://developers.google.com/chart/interactive/docs/reference Library Documentation]
  
[[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.
 
* 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/columnchart column chart]
** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/table table 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/piechart pie chart]
** [[https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart combo chart]]
+
** [https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart combo chart]
  
 
==External==
 
==External==
[[http://en.wikipedia.org/wiki/Google_Chart_API Wikipedia Overview]]
+
[http://en.wikipedia.org/wiki/Google_Chart_API Wikipedia Overview]
  
 
==Snippets==
 
==Snippets==

Latest revision as of 12:09, 21 May 2015

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.

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);
  • 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
  5. has data that's type-inferred incorrectly
  • 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

External

Wikipedia Overview

Snippets