Getting started with google-visualization

Remarks#

Google Visualization provides a flexible javascript-based framework for creating a wide variety of interactive charts that can be embedded on webpages. Those chart types include:

Charts created with Google Visualization can be use data from a variety of sources including JSON, Google Spreadsheets, as well as hardcoded arrays written in Javascript.

The Google Visualization API also allows you to filter the data, as well as linking multiple charts to a single data source to create interactive dashboards showing several dimensions of the same data.

Versions#

Version	Syntax for Selecting this Version	Release Date
Current	`google.charts.load('current', {packages: ['corechart']});`	2016-02-23
44	`google.charts.load('44', {packages: ['corechart']});`	2016-02-23
43	`google.charts.load('43', {packages: ['corechart']});`	2015-10-02
42	`google.charts.load('42', {packages: ['corechart']});`	2015-04-30
41	`google.charts.load('41', {packages: ['corechart']});`	2015-02-23

Full list of past releases here.

Loading and Running

Google currently has two ways to load the JS library for Google Visualization (a.k.a Google Charts), gstatic loader (https://www.gstatic.com/charts/loader.js) and jsapi (https://www.google.com/jsapi).

The gstatic loader is recommended because Google is transitioning away from jsapi to the gstatic loader.

See transition reference

In either case, you must first include one of the loaders with a script tag, typically in the head of your document, like this:

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

Once you have included the loader in your webpage, you can use it to load the desired library packages by calling a load function.

For Loader.js

google.charts.load('current', {packages: ['corechart']});

For JSAPI

google.load('visualization', '1', {'packages':['corechart']});

But after you load the library packages, you must wait for them to finish being loaded before proceeding to use them. The way to wait is to set up a callback by calling a setOnLoadCallback function.

Sample Code (for the gstatic loader):

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
 google.charts.load('current', {packages: ['corechart']});
 google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Group');
        data.addColumn('number', 'Gender');
        data.addRows([
          ['Males', 10],
          ['Females', 5]
        ]);

        var options = {
            'title':'Gender distribution',
            'width':300,
            'height':300};
        var chart = new google.visualization.PieChart(
            document.getElementById('gender_chart'));
        chart.draw(data, options);
      }
    </script>

HTML:

<div id="gender_chart"></div>

JSFIDDLE