Difference between revisions of "Google Charts API"

From Earlham CS Department
Jump to navigation Jump to search
Line 3: Line 3:
 
=Summary=
 
=Summary=
 
=Introduction=
 
=Introduction=
−
Google Charts are relatively easy to get running but have a lot of nuance to them.
+
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==
 
==Data==
 
The [[https://developers.google.com/chart/interactive/docs/reference#DataTable DataTable]] class stores data to be used by charts.
 
The [[https://developers.google.com/chart/interactive/docs/reference#DataTable DataTable]] class stores data to be used by charts.
 
* 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:
+
 
−
* at creation by passing JSON as the chart's options parameter
+
===Options===
−
** Example:
+
Chart options can be set 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:
 +
** at creation by passing JSON as the chart's options parameter
 +
*** Example:
 
<code>var options = {
 
<code>var options = {
 
   width: 400,
 
   width: 400,
Line 16: Line 26:
 
   title: 'Toppings I Like On My Pizza',
 
   title: 'Toppings I Like On My Pizza',
 
   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
 
   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
−
};
+
};</code>
−
 
+
** chart.setOptions(JSON) which is equivalent to setting options at creation
−
chart.draw(data, options);</code>
+
** chart.setOption('key', value) where key is the option being changed
 +
*** Example:
 +
<code>
 +
chart.setOption('is3D', true);
 +
</code>
 +
** chart.getOptions() is the read accessor
  
−
* chart.setOptions(JSON) which is equivalent to setting options at creation
 
  
−
* chart.setOption('key', value) where key is the option being changed
+
===Drawing===
−
** Example:
+
*draw a chart by using chart.draw(data, options) where data is a datatable and options is JSON
 
<code>
 
<code>
−
chart.setOption('is3D', true);
+
chart.draw(data, options);
 
</code>
 
</code>
−
* chart.getOptions() is the read accessor
+
 
 +
 
  
 
==Views==
 
==Views==
 
The [[https://developers.google.com/chart/interactive/docs/reference#DataView DataView]] class changes how a DataTable is represented.
 
The [[https://developers.google.com/chart/interactive/docs/reference#DataView DataView]] class changes how a DataTable is represented.
 +
 +
 +
 
==Controls==
 
==Controls==
 +
 +
 +
 +
==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
 +
# empty
 +
# incorrectly formatted
 +
# of incorrect type
 +
# lacking vital information such as headers
 +
 +
* when the Chart's options are incorrect such as
 +
# 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]]
  
 
=Resources=
 
=Resources=
Line 38: Line 73:
  
 
[[https://code.google.com/apis/ajax/playground/#column_chart Code Playground]]
 
[[https://code.google.com/apis/ajax/playground/#column_chart Code Playground]]
−
*The column chart, combo chart,
+
* 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/table table 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]]
 
==External==
 
==External==
 
==Snippets==
 
==Snippets==

Revision as of 03:58, 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. 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.


Controls

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]

External

Snippets

Retrieved from "https://wiki.cs.earlham.edu/index.php?title=Google_Charts_API&oldid=14478"