Google Charts
Sai Goud Durgappagari
Introduction
Interactive charts for browsers and mobile devices. Google chart tools are powerful,
simple to use, and free.
Why Google Charts?
•
•
•
•
•
•
Rich Gallery
o Variety of charts available.
o Simple scatter plots to Hierarchical treemaps.
Customizable
o provides extensive set of options to match look and feel
HTML5/SVG
o Cross-browser compatibility
Free
o Completely free with three years backward compatibility guaranteed
Controls and Dashboard
o Easily connect charts and controls into interactive dashboard
Dynamic Data
o Connect data in real time using data connection tools and protocols
Common Terms
Animation: An option for including motion when a chart is first drawn or redrawn after
modification.
Axis: A reference line in a chart indicating the measurement of coordinates. In Google
Charts, the two main axes are categorized as either:
•
horizontal vs. vertical
•
domain vs. target
Google Charts does not call them "x" and "y" axes because this would be
ambiguous: Google Charts allows the user to break the traditional association
between the "axis showing domain values" and the "horizontal axis," and it would
not be clear which one "x axis" describes. For example, you can flip the
orientation of a chart to show the domain variables on the vertical axis.
Callback: A piece of executable code that is passed as an argument to a second piece
of code, which is expected to "call back," or execute, the first piece of code at a later
time. In Google Charts, callbacks are commonly used with library loaders and event
handlers. Example: "Set a callback to run when the Google Charts library is loaded."
Chart Type: A combination of data representation, appearance, and options that is
implemented as a JavaScript object. Examples of chart types include Pie
Charts and Bubble Charts.
ChartEditor: The user interface for editing Google Charts on the fly, which you can
include in any web page.
ChartWrapper: A JavaScript class that wraps your chart and can handle all loading,
drawing, and queries against Datasources for your chart. ChartWrappers are required
when using Dashboards and ChartEditor. Read more at ChartWrapper.
Column Role: A property of a column in a DataTable that describes its purpose. For
example, the tooltip column role is assigned to columns that store tooltip text. Read
more at What roles are available? and getColumnRole.
Column Type: The data type assigned to a column in a DataTable. Column types can
be one of the following:
•
string
•
number
•
boolean
•
date
•
datetime
•
timeofday
Continuous: Having a smooth progression of consecutive values. Used to describe an
axis where a variable can take on any value between two given values, as opposed to
a discrete axis. Example: "The major axis of a chart can be either discrete or
continuous."
Control: A user interface widget on a dashboard, such as sliders or autocompleters,
which allows the viewer to alter the data or charts that are part of a dashboard.
Example: "This dashboard contains a control that lets you select an option from a dropdown menu." Read more at Controls and Dashboards.
Core Charts: The most popular chart types in Google Charts. You can load all core
charts simultaneously by using the corechart package. The core chart types are:
•
Area Charts
•
Bar Charts
•
Bubble Charts
•
Candlestick Charts
•
Column Charts
•
Combo Charts
•
Histogram Charts
•
Line Charts
•
Pie Charts
•
Scatter Charts
•
Stepped Area Charts
Dashboard: A visual display that combines chart and control instances, typically with at
least one chart and one control. If a dashboard contains multiple charts, they must all
have the same data source.
DataTable: A JavaScript class that represents a two-dimensional, mutable table of
values.
DataView: A JavaScript class that is derived from a DataTable. A DataView can serve
as a data source for Google Charts, but unlike a DataTable, it is read-only.
A DataView auto-updates when the underlying DataTable is changed, with some
exceptions.
Discrete: Referring to a set of values that are not based a continuous value system. In
the context of Google Charts, "discrete" can describe data types or axes. Read more
about discrete axes at Discrete vs Continuous." Example: "A list of countries should be
stored as a column with a discrete data type."
Domain: The set of all possible inputs which a function or relation can take. If multiple
data series are shown in a chart, it is possible for one domain value to have multiple
target values. Example: "For the domain value '3', this data series has value '5'."
Event: Pre-defined actions that a Google Chart can register, such as a user clicking a
button. The page for each chart type contains an Events section listing the events
supported by that chart type, such as ready, selectand onmouseover. Example: "When
the user clicks 'I want apples,' this throws a userWantsApples event."
Formatter: Determines how the data in a DataTable column is displayed without
affecting the underlying values. Google Charts provides a pre-defined list of formatters
and formatter options. For example, you can use the prefixoption of
the NumberFormat formatter to display the value "1000" as "$1000."
Google Sheets: Google Sheets allows users to create, update, modify, and share
spreadsheets online. Google Sheets are a common data source for Google Charts.
Interval: An optional column role which contains additional target values for given
domain values in a data series. For example, you can store data about confidence
intervals in an interval column in order to display it as part of a bar chart. Intervals are
most commonly displayed in line, scatter, and bar charts. Google Charts offers several
styles for displaying intervals.
Legend: An area within a chart which lists the label and visual appearance of all data
series in a chart, and/or the visual sub-components of a single data series in a chart.
For example, in a pie chart which contains only one data series, the legend will contain
the label and color corresponding to each "slice" of the pie.
Library Loader: The JavaScript method google.charts.load, which loads the Google
Charts API library. Loading the library is necessary whenever you build a web page that
uses Google Charts.
Query: A request for information issued against a database. Google Charts
supports Data Queries, which are SQL-like queries used to query sources such as
Google Sheets. Queries must be written using the Google Visualization API Query
Language.
Series: A data column in a DataTable or DataView, where each value corresponds oneto-one with a domain value from the domain column. A series may have one or more
associated columns which have different column roles, e.g. annotation or style roles.
Example: "The following chart demonstrates a chart with two series, one in dark blue,
one in light blue."
Stacking: A chart option for displaying multiple data series where each series is graphed
relative to the preceding series by adding up all previous series values for a given
domain value. This creates the visual effect of the series being "stacked" on top of each
other. Stacking is available for the following chart types by setting the isStacked option
to true:
•
Area Charts
•
Bar Charts
•
Column Charts
•
Stepped Area Charts
Style: A column role which uses specific properties to determine the appearance of a
series. Properties include color, opacity, stroke-width, and stroke-color.
Tooltip: The small boxes that pop up when your cursor hovers over certain chart
components. Tooltip content can be either automatically generated from the underlying
series data or stored in a column with the tooltip column role.
Popular charts:
•
GeoChart
A geochart is a map of a country, a continent, or a region with areas identified in one
of three ways:
o The region mode colors whole regions, such as countries, provinces, or
states.
o The markers mode uses circles to designate regions that are scaled
according to a value that you specify.
o The text mode labels the regions with identifiers (e.g., "Russia" or "Asia").
•
Scatter Chart
o Scatter charts plot points on a graph. When the user hovers over the points,
tooltips are displayed with more information.
o Google scatter charts are rendered within the browser
using SVG or VML depending on browser capabilities.
•
Column Chart
o A column chart is a vertical bar chart rendered in the browser
using SVG or VML, whichever is appropriate for the user's browser. Like all
Google charts, column charts display tooltips when the user hovers over the
data.
•
Histogram
o A histogram is a chart that groups numeric data into bins, displaying the bins
as segmented columns. They're used to depict the distribution of a dataset:
how often values fall into ranges.
•
Bar Charts
•
Combo Charts
o A chart that lets you render each series as a different marker type from the
following list: line, area, bars, candlesticks, and stepped area
•
Area Chart
•
Stepped Area Chart
•
Line Chart
•
Pie Chart
•
Bubble Chart
o A bubble chart is used to visualize a data set with two to four dimensions. The
first two dimensions are visualized as coordinates, the third as color and the
fourth as size.
•
Donut Chart
•
Treemaps
o A visual representation of a data tree, where each node can have zero or
more children, and one parent (except for the root, which has no parents).
Each node is displayed as a rectangle, sized and colored according to values
that you assign. Sizes and colors are valued relative to all other nodes in the
graph. You can specify how many levels to display simultaneously, and
optionally to display deeper levels in a hinted fashion. If a node is a leaf node,
you can specify a size and color; if it is not a leaf, it will be displayed as a
bounding box for leaf nodes. The default behavior is to move down the tree
when a user left-clicks a node, and to move back up the tree when a user
right-clicks the graph.
•
Timelines
o A timeline is a chart that depicts how a set of resources are used over time. If
you're managing a software project and want to illustrate who is doing what
and when, or if you're organizing a conference and need to schedule meeting
rooms, a timeline is often a reasonable visualization choice. One popular type
of timeline is the Gantt chart.
•
Guage
•
Candlestick charts
o A candlestick chart is used to show an opening and closing value overlaid on
top of a total variance. Candlestick charts are often used to show stock value
behavior. In this chart, items where the opening value is less than the closing
value (a gain) are drawn as filled boxes, and items where the opening value is
more than the closing value (a loss) are drawn as hollow boxes.
Using Google Charts
•
Load Charts Library
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
...
</script>
•
Prepare data
All charts require data. Google Chart Tools charts require data to be wrapped in
a JavaScript class called google.visualization.DataTable. This class is defined in
the Google Visualization library that you loaded previously.
A DataTable is a two-dimensional table with rows and columns, where each
column has a datatype, an optional ID, and an optional label.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
•
Customize Chart
Every chart has many customizable options, including title, colors, line thickness,
background fill, and so on.
var options = {
'legend':'left',
'title':'My Big Pie Chart',
'is3D':true,
'width':400,
'height':300
}
•
Draw the Chart
Web page must have an HTML element (typically a <div>) to hold your chart. We
must pass your chart a reference to this element, so assign it an ID that you can
use to retrieve a reference using document.getElementById(). Anything inside
this element will be replaced by the chart when it is drawn.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0',
{'packages':['corechart']});
// Set a callback to run when the Google Visualization API is
loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
//Div that will hold the pie chart
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
References:
•
•
https://developers.google.com/chart/
https://support.google.com/docs/