Google Charts - Quick Guide


Advertisements


Google Charts - Overview

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

Features

Following are the salient features of Google Charts library.

  • Compatability − Works seemlessly on all major browsers and mobile platforms like android and iOS.

  • Multitouch Support − Supports multitouch on touch screen based platforms like 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 library, is extremely lightweight library.

  • 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 library provides following types of charts −

Sr.No. Chart Type & Description
1

Line Charts

Used to draw line/spline 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, Timelines, TreeMap, Trendlines

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 link: Terms of Service.

Google Charts - Environment Setup

In this chapter we will discuss about how to set up Google Charts library to be used in web application 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 library 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 libraries.

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>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
   </body>
</html>

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

Step 2: Create configurations

Google Chart library uses very simple configurations using json syntax.

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

Here data represents the json data and options represents the configuration which Google Chart library uses to draw a chart withing container div 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.visualization.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.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

Example

Following is the complete example −

googlecharts_configuration.htm

Live Demo
<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>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.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]
            ]);
               
            // Set chart options
            var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};

            // Instantiate and draw the chart.
            var chart = new google.visualization.PieChart(document.getElementById ('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Following code call drawChart function to draws chart when Google Chart library get loaded completely.

google.charts.setOnLoadCallback(drawChart);

Result

Verify the result.

Google Charts - Area Charts

Area charts are used to draw area based charts. In this section we're going to discuss following types of area based charts.

Sr.No. Chart Type & Description
1 Basic Area

Basic area chart

2 Area with negative values

Area chart having negative values.

3 Stacked area

Chart having areas stacked over one another.

4 Percentage area

Chart with data in percentage terms.

5 Area with missing points

Chart with missing points in the data.

6 Inverted axes

Area using inverted axes.

Google Charts - Bar Charts

Bar charts are used to draw bar based charts. In this section we're going to discuss following types of bar based charts.

Sr.No. Chart Type & Description
1 Basic Bar

Basic bar chart

2 Grouped Bar Chart

Grouped Bar chart.

3 Stacked Bar

Bar chart having bar stacked over one another.

4 Negative Stacked bar

Bar chart with negative stack.

5 Percentage Stacked bar

Bar Chart with data in percentage terms.

6 Material Bar Chart

A Material Design inspired bar chart.

7 Bar Chart with data labels

Bar chart with data labels.

Google Charts - Bubble Charts

Bubble charts are used to draw bubble based charts. In this section we're going to discuss following types of bubble based charts.

Sr.No. Chart Type & Description
1 Basic Bubble

Basic bubble chart.

2 Bubble chart with data labels

Bubble chart with data labels.

Google Charts - Calendar Charts

Calendar charts are used to draw activities over the course of long span of time like months or years. In this section we're going to discuss following types of calendar based charts.

Sr.No. Chart Type & Description
1 Basic Calendar

Basic Calendar chart.

2 Calendar with customized colors

Customized Calendar Chart.

Google Charts - Candlestick Charts

Candlestick charts are used to show opening and closing value over a value variance and are normally used to represent stocks. In this section we're going to discuss following types of candlestick based charts.

Sr.No. Chart Type & Description
1 Basic Candlestick

Basic Candlestick chart.

2 Candlestick with customized colors

Customized Candlestick Chart.

Google Charts - Column Charts

Column charts are used to draw column based charts. In this section we're going to discuss following types of column based charts.

Sr.No. Chart Type & Description
1 Basic Column

Basic Column chart.

2 Grouped Column

Grouped Column chart.

3 Stacked Column

Column chart having column stacked over one another.

4 Negative Stacked Column

Column chart with negative stack.

5 Percentage Stacked Column

Column Chart with data in percentage terms.

6 Material Column Chart

A Material Design inspired column chart.

7 Column Chart with data labels

Column chart with data labels.

Google Charts - Combination Chart

Combination chart helps in rendering each series as a different marker type from the following list: line, area, bars, candlesticks, and stepped area. To assign a default marker type for series, use the seriesType property. Series property is to be useed to specify properties of each series individually. We've already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let's see the complete example.

Configurations

We've used ComboChart class to show combination based chart.

//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));

Example

googlecharts_combination_chart.htm

Live Demo
<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>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Fruit', 'Jane', 'John', 'Average'],
               ['Apples', 3, 2, 2.5],
               ['Oranges', 2, 3, 2.5],
               ['Pears', 1, 5, 3],
               ['Bananas', 3, 9, 6],
               ['Plums', 4, 2, 3]      
            ]);
              
            // Set chart options
            var options = {
               title : 'Fruits distribution',
               vAxis: {title: 'Fruits'},
               hAxis: {title: 'Person'},
               seriesType: 'bars',
               series: {2: {type: 'line'}}
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.ComboChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.

Google Charts - Histogram Charts

A histogram is a chart that groups numeric data into buckets, displaying the buckets as segmented columns. They're used to depict the distribution of a dataset as how often values fall into ranges. Google Charts automatically chooses the number of buckets for you. All buckets are equal width and have a height proportional to the number of data points in the bucket. Histograms are similar to column charts in other aspects. In this section we're going to discuss following types of histogram based charts.

Sr.No. Chart Type & Description
1 Basic Histogram

Basic Histogram chart.

2 Controlling Color

Customized Color of Histrogram Chart.

3 Controlling Buckets

Customized Buckets of Histrogram Chart.

4 Multiple Series

Histrogram Chart having multiple series.

Google Charts - Line Charts

Line charts are used to draw line based charts. In this section we're going to discuss following types of line based charts.

Sr.No. Chart Type & Description
1 Basic line

Basic line chart.

2 With visible points

Chart with visible data points.

3 Customizable background color

Chart with customized background color.

4 Customizable line color

Chart with customized line color.

5 Customizable axis and tick labels

Chart with customized axis and tick labels.

6 Crosshairs

Line charts showing crosshairs at data point on selection.

7 Customizable line style

Chart with customized line color.

8 Line Charts with curved lines

Chart with smooth curve lines.

9 Material Line Chart

A Material Design inspired line chart.

10 Top X Line Chart

A Material Design inspired line chart with X-Axis on top of the chart.

Google Charts - Maps

A Google Map Chart uses Google Maps API to display Map. Data values are displayed as markers on the map. Data values may be coordinates (lat-long pairs) or actual addresses. The map will be scaled accordingly so that it includes all the identified points.

Sr.No. Chart Type & Description
1 Basic Map

Basic Google Map.

2 Map using Latitude/Longitude

Map having locations specified using Latitude and Longitude.

3 Customizing markers

Customized Markers in Map.

Google Charts - Organization Chart

Organization chart helps in rendering a hierarchy of nodes, used to portray superior/subordinate relationships in an organization. For example, A family tree is a type of org chart.. We've already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let's see the complete example.

Configurations

We've used OrgChart class to show organization based chart.

//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));

Example

googlecharts_organization_chart.htm

Live Demo
<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: ['orgchart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();   
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            // For each orgchart box, provide the name, manager, and tooltip to show.
            data.addRows([
               [{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
               [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
               ['Alice', 'Robert', ''],
               ['Bob', 'Jim', 'Bob Sponge'],
               ['Carol', 'Bob', '']
            ]);			

            // Set chart options
            var options = {allowHtml:true};
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.

Google Charts - Pie Charts

Pie charts are used to draw pie based charts. In this section we're going to discuss following types of pie based charts.

Sr.No. Chart Type & Description
1 Basic Pie

Basic pie chart.

2 Donut Chart

Donut Chart.

3 3D Pie chart

3D Pie chart.

4 Pie chart with exploded slices

Pie chart with exploded slices.

Google Charts - Sankey Charts

A sankey chart is a visualization tool and is used to depict a flow from one set of values to another. Connected objects are called nodes and the connections are called links. Sankeys are used to show a many-to-many mapping between two domains or multiple paths through a set of stages.

Sr.No. Chart Type & Description
1 Basic Sankey Chart

Basic Sankey Chart.

2 Multilevel Sankey Chart

Multilevel Sankey Chart.

3 Customizing Sankey Chart

Customized Sankey Chart.

Google Charts - Scatter Charts

Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines are used to draw scatter based charts. In this section we're going to discuss following types of scatter based charts.

Sr.No. Chart Type & Description
1 Basic Scatter

Basic scatter chart.

2 Material Scatter Chart

Material Scatter Chart.

3 Dual Y Axis Scatter Chart

Material Scatter Chart having dual Y-Axis.

4 Top X Axis Scatter Chart

Material Scatter Chart having X-Axis on top.

Google Charts - Stepped Area Charts

A stepped area chart is a step based area chart. We're going to discuss following types of stepped area charts.

Sr.No. Chart Type & Description
1 Basic Stepped Chart

Basic Stepped Area Chart.

2 Stacked Stepped Chart

Stacked Stepped Area Chart.

3 100% Stacked Stepped Chart

100% Stacked Stepped Area Chart.

Google Charts - Table Chart

Table chart helps in rendering a table which can be sorted and paged. Table cells can be formatted using format strings, or by directly inserting HTML as cell values. Numeric values are right-aligned by default; boolean values are displayed as check marks or cross marks. Users can select single rows either with the keyboard or the mouse. Column headers can be used for sorting. The header row remains fixed during scrolling. The table fires events corresponding to user interaction. We've already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let's see the complete example.

Configurations

We've used Table class to show Table based chart.

//table chart
var chart = new google.visualization.Table(document.getElementById('container'));

Example

googlecharts_table_chart.htm

Live Demo
<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: ['table']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('boolean', 'Full Time Employee');
            data.addRows([
               ['Mike',  {v: 10000, f: '$10,000'}, true],
               ['Jim',   {v:8000,   f: '$8,000'},  false],
               ['Alice', {v: 12500, f: '$12,500'}, true],
               ['Bob',   {v: 7000,  f: '$7,000'},  true]
            ]);

            var options = {
               showRowNumber: true,
               width: '100%', 
               height: '100%'
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.Table(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.

Google Charts - Timelines Charts

Timelines depicts how a set of resources are used over time. We're going to discuss following types of Timelines charts.

Sr.No. Chart Type / Description
1 Basic Timelines Chart

Basic Timelines Chart

2 Timelines Chart with data labels

Timelines Chart with data labels

3 Timelines chart without Row Label

Timelines chart without Row Label

4 Timelines chart coloring

Customized Timelines Chart

Google Charts - TreeMap Chart

TreeMap is a visual representation of a data tree, where each node may have zero or more children, and one parent (except for the root). Each node is displayed as a rectangle, can be sized and colored according to values that we assign. Sizes and colors are valued relative to all other nodes in the graph. Following is an example of a treemap chart. We've already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let's see the complete example.

Configurations

We've used TreeMap class to show treemap diagram.

//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));

Example

googlecharts_treemap.htm

Live Demo
<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['treemap']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([
               ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
               ['Global',    null,                 0,                               0],
               ['America',   'Global',             0,                               0],
               ['Europe',    'Global',             0,                               0],
               ['Asia',      'Global',             0,                               0],
               ['Australia', 'Global',             0,                               0],
               ['Africa',    'Global',             0,                               0],  
               
               ['USA',       'America',            52,                              31],
               ['Mexico',    'America',            24,                              12],
               ['Canada',    'America',            16,                              -23],
               
               ['France',    'Europe',             42,                              -11],
               ['Germany',   'Europe',             31,                              -2],
               ['Sweden',    'Europe',             22,                              -13],   
               
               ['China',     'Asia',               36,                              4],
               ['Japan',     'Asia',               20,                              -12],
               ['India',     'Asia',               40,                              63],                  
               
               ['Egypt',     'Africa',             21,                              0],          
               ['Congo',     'Africa',             10,                              12],
               ['Zaire',     'Africa',             8,                               10]
            ]);
            var options = {      
               minColor: '#f00',
               midColor: '#ddd',
               maxColor: '#0d0',
               headerHeight: 15,
               fontColor: 'black',
               showScale: true
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.TreeMap(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.

Google Charts - Trendlines Charts

A trendline is a line superimposed on a chart to reveal the overall direction of the data. Google Charts can automatically generate trendlines for Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines, Bar Charts, Column Charts, and Line Charts.. We're going to discuss following types of trendlines charts.

Sr.No. Chart Type & Description
1 Basic Trendlines Chart

Basic Trendlines Chart.

2 Exponential Trendlines Chart

Exponential Trendlines Chart.

3 Polynomial Trendlines Chart

Polynomial Trendlines Chart.



Advertisements
E-Books Store