A Look at Google Charts Library

Introduction

Today, we will experience another great application of Google i.e. Google Charts. Before we go into deep, lets find out what exactly charts are? I am not going to make things complex here, since Wikipedia has already provided us a neat and clean definition of Charts.

From Wikipedia

A chart is a graphical representation of data, in which “the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart”. A chart can represent tabular numeric data, functions or some kinds of qualitative structure and provides different info. (1)

Google Charts

Google Charts provides a way to dynamically render data through different visualizations  on your website. Google is providing a large number of available charts ranging from simple line charts to complex hierarchical tree maps, you can view all available charts from Google Chart Gallery(2)

The most usual way to apply Google Charts is with mere JavaScript that you embed in your website. All you have to do is load some Google Chart libraries, list out the data that needs to be graphed, customize the chart with the available options, and at last make a chart object with an id or class that you may choose. Afterwards in the website, you have to define a <div> with that id or class to show the Google Chart.

Getting Started

The Google chart needs 3 libraries which is required to add in the <head> tag:

  1. The Google JSAPI API: The following scripts loads the JSAPI library which is the starting point of Google Charts.
    <!-- Load the AJAX API -->
    <script type="text/javascript" src="https://www.google.com/jsapi" > </script>
  2. The Google Visualization library: The following scripts loads the Google Visualization and chart libraries which defines all the core utility classes and functions. For example: `DataTable` to hold your data; and `Query` for querying data providers; and `error handlers` to help you trap and display errors on page.
    <script type="text/javascript" >
        // Load the Visualization API library and add package name.
        google.load( 'visualization', '1.0', { 'packages' :[ <list_of_package_names>] });
    </script>
  3. The Library for the chart itself: The following code holds your chart code which should create and define the chart. The `corechart` library holds several common chart classes such as PieChart, BarChart etc. The other charts require to load specific library.
    <script type="text/javascript" >
        google.setOnLoadCallback( drawChart );
        // ... draw the chart ...
    </script>

Note: The JavaScript files are loaded directly from Google’s servers. Hence your application always need internet connection to view the charts.

Google is offering a variety of charts to handle your information visualization needs. There will be a default representation of all types of chart and you can always make it according to the requirements which corresponds the look and feel of your website. These are common charts which Google offers:

The google.load for the following packages name are “corechart”.

Synatax

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

  • Pie Chart: It is a circular statistical graphic, which is divided into sectors to illustrate numerical proportion.

    The visualization’s class name is google.visualization.PieChart.

    var visualization = new google.visualization.PieChart( container );

    pie chart

    Figure 1: Pie Chart (3)

  • Bar Chart: It is a chart rectangular bars with lengths proportional to the values that they represent.

    For Material Bar Charts, the google.load package name is “bar“.

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

    The visualization’s class name is google.visualization.BarChart.

    var chart = new google.visualization.BarChart( container );

    For Material Bar Charts, the visualization’s class name is google.charts.Bar.

    var chart = new google.charts.Bar( container );

    Figure 2: Bar Chart (4)

  • Bubble Chart: 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.

    The visualization’s class name is google.visualization.BubbleChart.

    var visualization = new google.visualization.BubbleChart( container );

    bubble chart

    Figure 3: Bubble Chart (5)

  • Scatter Chart: It plot points on a graph.

    The visualization’s class name is google.visualization.ScatterChart.

    var visualization = new google.visualization.ScatterChart( container );

    scatter chart

    Figure 4: Scatter Chart (6)

  • Column Chart: A column chart is vertical bar chart.

    For Material Column Charts, the google.load package name is “bar”. (Not a typo: the Material Bar Chart handles both orientations.)

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

    The visualization’s class name is google.visualization.ColumnChart.

    var visualization = new google.visualization.ColumnChart( container );

    For Material Column Charts, the visualization’s class name is google.charts.Bar. (Not a typo: the Material Bar Chart handles both orientations.)

    var chart = new google.charts.Bar( container );

    column chart

    Figure 5: Column Chart (7)

  • Histogram: A histogram is a chart that groups numeric data into bins, displaying the bins as segmented columns. They are used to depict the distribution of a dataset: how often fall into ranges.

    The visualization’s class name is google.visualization.Histogram:

    var visualization = new google.visualization.Histogram( container );

    histogram

    Figure 6: Histogram (8)

  • Combo Chart: A chart that lets you render each series as a different marker type from the following list: line, area, bars, candlesticks and stepped area.

    The visualization’s class name is google.visualization.ComboChart

    var visualization = new google.visualization.ComboChart( container );

    combo chart

    Figure 7: Combo Chart (9)

  • Area Chart: The area chart draws the series on top of one another.

    The visualization’s class name is google.visualization.AreaChart.

        var visualization = new google.visualization.AreaChart( container );

    area chart

    Figure 8: Area Chart (10)

  • Line Chart: It is a type of chart which displays information as a series of data points called ‘markers’ connected by straight line segments. You can smooth the lines by setting curveType option to function.

    The visualization’s class name is google.visualization.LineChart.

    var visualization = new google.visualization.LineChart( container );

    line chart

    Figure 9: Line Chart (11)

Apart from common chart, Google is building more interactive charts. Some interesting charts are:

  • Stepped Area Chart
  • Org Chart
  • Treemap
  • Timeline
  • Gauge
  • Candlestick Chart
  • Geo Chart

The following code is used to embed a pie chart in a web page:

<html>
<head>
<!-- Load the AJAX API -->
<script type="text/javascript" src="https://www.google.com/jsapi" > </script>
<script type="text/javascript" >

    // Load the Google Visualization API and the pie-chart package.
    google.load('visualization', '1', { 'packages': [ 'corechart' ] });

    // Set a function to run when the Google Visualization library is being loaded.
    google.setOnLoadCallback( depictChart );

    // Function that produce and adds a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function depictChart() {
       // Create our data table.
       var data = new google.visualization.arrayToDataTable([
          ['Browser','Usage per month'],
          ['Chrome',13],
          ['IE', 2],
          ['Firefox', 10],
          ['Opera', 4],
          ['Safari', 7]
        ]);

        var options = {
            title: 'Browser Statics'
        };

        // Initialize and depict chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById( 'pie-chart' ));
        chart.draw( data, options);
    } 
</script>
</head>
<body>
    <div id="pie-chart" style="width: 720px; height: 400px" > </div>
</body>
</html>

Browser and Platform Compatibility

Pure HTML5/ SVG technology are used to built Google Charts and for old versions they are taking VML, hence there is no plugin required. Therefore those browser support HTML5/ SVG would support Google Charts and its platform portable to iPhones, iPads and Android.

Your users doesn’t have to install or add plugins or any software.

Terms of Use:

  • All images and code samples are licensed under Google and they are used here just for reference.
  • By using Google Chart API, you accept to be bound by Google APIs Terms of Service (“API ToS”) at Google Terms of Service.

Reference

(1): http://en.wikipedia.org/wiki/Chart

(2): https://google-developers.appspot.com/chart/interactive/docs/gallery

(3): https://developers.google.com/chart/interactive/docs/gallery/piechart

(4): https://developers.google.com/chart/interactive/docs/gallery/barchart

(5): https://developers.google.com/chart/interactive/docs/gallery/bubblechart

(6): https://developers.google.com/chart/interactive/docs/gallery/scatterchart

(7): https://developers.google.com/chart/interactive/docs/gallery/columnchart

(8): https://developers.google.com/chart/interactive/docs/gallery/histogram

(9): https://developers.google.com/chart/interactive/docs/gallery/combochart

(10): https://developers.google.com/chart/interactive/docs/gallery/areachart

(11): https://developers.google.com/chart/interactive/docs/gallery/linechart

About Mohit Bhansali

A hyperactive mind with a passion for getting acquainted with the latest technology.

Trackbacks

  1. […] my last post, we have studied the basics of Google Chart. Google Charts helps us display the dry-data in a very […]

Speak Your Mind

*