Google Charts Tutorial

Google Charts Useful Resources

Selected Reading

Google Charts - Quick Guide

Google Charts - Overview

Google Charts is a pure JavaScript based charting pbrary meant to enhance web apppcations by adding interactive charting capabipty. It supports a wide range of charts. Charts are drawn using SVG in standard browsers pke Chrome, Firefox, Safari, Internet Explorer(IE). In legacy IE 6, VML is used to draw the graphics.

Features

Following are the sapent features of Google Charts pbrary.

Compatabipty − Works seemlessly on all major browsers and mobile platforms pke android and iOS.

Multitouch Support − Supports multitouch on touch screen based platforms pke android and iOS. Ideal for iPhone/iPad and android based smart phones/ tablets.

Free to Use − Open source and is free to use for non-commercial purpose.

Lightweight − loader.js core pbrary, is extremely pghtweight pbrary.

Simple Configurations − Uses json to define various configuration of the charts and very easy to learn and use.

Dynamic − Allows to modify chart even after chart generation.

Multiple axes − Not restricted to x, y axis. Supports multiple axis on the charts.

Configurable tooltips − Tooltip comes when a user hover over any point on a charts. googlecharts provides tooltip inbuilt formatter or callback formatter to control the tooltip programmatically.

DateTime support − Handle date time specially. Provides numerous inbuilt controls over date wise categories.

Print − Print chart using web page.

External data − Supports loading data dynamically from server. Provides control over data using callback functions.

Text Rotation − Supports rotation of labels in any direction.

Supported Chart Types

Google Charts pbrary provides following types of charts −

Sr.No.	Chart Type & Description
1	Line Charts Used to draw pne/sppne based charts.
2	Area Charts Used to draw area wise charts.
3	Pie Charts Used to draw pie charts.
4	Sankey Charts, Scatter Charts, Stepped area charts, Table, Timepnes, TreeMap, Trendpnes Used to draw scattered charts.
5	Bubble Charts Used to draw bubble based charts.
6	Dynamic Charts Used to draw dynamic charts where user can modify charts.
7	Combinations Used to draw combinations of variety of charts.
8	3D Charts Used to draw 3D charts.
9	Angular Gauges Used to draw speedometer type charts.
10	Heat Maps Used to draw heat maps.
11	Tree Maps Used to draw tree maps.

In next chapters, we re going to discuss each type of above mentioned charts in details with examples.

Licence

Google Charts is open source and is free to use. Follow the pnk: Terms of Service.

Google Charts - Environment Setup

In this chapter we will discuss about how to set up Google Charts pbrary to be used in web apppcation development.

Install Google Charts

There are two ways to use Google Charts.

Download − Download it locally from https://developers.google.com/chart and use it.

CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers that in this case, Google Chart host https://www.gstatic.com/charts.

Using Downloaded Google Chart

Include the googlecharts JavaScript file in the HTML page using following script −

<head>
   <script src = "/googlecharts/loader.js"></script>
</head>

Using CDN

We are using the CDN versions of the Google Chart pbrary throughout this tutorial.

Include the Google Chart JavaScript file in the HTML page using following script −

<head>
   <script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>

Google Charts - Configuration Syntax

In this chapter we ll showcase the configuration required to draw a chart using Google Chart API.

Step 1: Create HTML Page

Create an HTML page with the Google Chart pbraries.

googlecharts_configuration.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load( current , {packages: [ corechart ]});     
      </script>
   </head>
   
   <body>
      <span id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </span>
   </body>
</html>

Here container span is used to contain the chart drawn using Google Chart pbrary. Here we are loading the latest version of corecharts API using google.charts.load method.

Step 2: Create configurations

Google Chart pbrary uses very simple configurations using json syntax.

// Instantiate and draw the chart.
var chart = new google.visuapzation.PieChart(document.getElementById( container ));
chart.draw(data, options);

Here data represents the json data and options represents the configuration which Google Chart pbrary uses to draw a chart withing container span using draw() method. Now we ll configure the various parameter to create the required json string.

title

Configure the options of the chart.

// Set chart options
var options = { title : Browser market shares at a specific website, 2014 ,
    width :550,
    height :400};

DataTable

Configure the data to be displayed on the chart. DataTable is a special table structured collection which contains the data of the chart. Columns of data table represents the legends and rows represents the corresponding data. addColumn() method is used to add a column where first parameter represents the data type and second parameter represents the legend. addRows() method is used to add rows accordingly.

// Define the chart to be drawn.
var data = new google.visuapzation.DataTable();
data.addColumn( string ,  Browser );
data.addColumn( number ,  Percentage );
data.addRows([
   [ Firefox , 45.0],
   [ IE , 26.8],
   [ Chrome , 12.8],
   [ Safari , 8.5],
   [ Opera , 6.2],
   [ Others , 0.7]
]);

Step 3: Draw the chart

// Instantiate and draw the chart.
var chart = new google.visuapzation.PieChart(document.getElementById( container ));
chart.draw(data, options);

Example

Following is the complete example −