Difference between revisions of "Google Charts API"

From Earlham CS Department
Jump to navigation Jump to search
(Charts)
(Charts)
Line 8: Line 8:
 
* Data can be imported via JSON or via arrays using [[https://developers.google.com/chart/interactive/docs/reference#dataparam this syntax]].
 
* Data can be imported via JSON or via arrays using [[https://developers.google.com/chart/interactive/docs/reference#dataparam this syntax]].
 
==Charts==
 
==Charts==
* Chart options can be set in multiple ways:
+
Chart options can be set in multiple ways:
** at creation by the chart's options parameter
+
* at creation by passing JSON as the chart's options parameter
** chart.setOptions(json) which is equivalent to setting options at creation
+
* chart.setOptions(JSON) which is equivalent to setting options at creation
** chart.setOption('key', value) where key is the option being changed
+
 
 +
** Example:
 +
<code>
 +
var options = {
 +
  width: 400,
 +
  height: 240,
 +
  title: 'Toppings I Like On My Pizza',
 +
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
 +
};
 +
 
 +
chart.draw(data, options);
 +
</code>
 +
 
 +
* chart.setOption('key', value) where key is the option being changed
 
** Example: <code>chart.setOption('is3D', true);</code>
 
** Example: <code>chart.setOption('is3D', true);</code>
 +
* chart.getOptions() is the read accessor
  
 
==Views==
 
==Views==

Revision as of 04:30, 3 February 2014

Under construction during Spring 2014.

Summary

Introduction

Google Charts are relatively easy to get running but have a lot of nuance to them.

Data

The [DataTable] class stores data to be used by charts.

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

Charts

Chart options can be set in multiple ways:

  • at creation by passing JSON as the chart's options parameter
  • chart.setOptions(JSON) which is equivalent to setting options at creation
    • Example:

var options = {

 width: 400,
 height: 240,
 title: 'Toppings I Like On My Pizza',
 colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']

};

chart.draw(data, options);

  • chart.setOption('key', value) where key is the option being changed
    • Example: chart.setOption('is3D', true);
  • chart.getOptions() is the read accessor

Views

The [DataView] class changes how a DataTable is represented.

Controls

Resources

Google

[Library Documentation]

[Code Playground]

  • The column chart, combo chart,

External

Snippets