Stage 1 : Basic knowledge.

Charts are used to show stats of something, visually. Google provide us library and make the task of creating charts so easy. The library provided by Google is based on most popular language, JavaScript. It also uses HTML5/Scalable Vector Graphics. What you already know?

1. HTML5
2. JavaScript

Let's start by a simple example:

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

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

So, this is the most basic structure of the document. What we have in the above template is we are including the Google JSAPI API. JSAPI is an Interface that allow us to interact with Google APIs. Now to create the charts we required visualization library of Google.

How do we load the library?

To load the library we will use the JSAPI interface through "google" object. Add the following snippet between script tags <scriipt> </scriipt>.

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

What it does?

As i told you google is an object using it we are invoking load() method which takes following three arguments:

1. Library Name : 'Visualization' this library defines all the core utility classes and functions.Google provide various libraries.
2. Version : 1.0 you can search for the latest version.
3. Package Name: 'corechart' like pie chart etc. You can provide list_of_package_names

And the second line is used to invoke the method "drawChart" on loading of the document. At this stage we are ready to create something that can make us happy. Now prepare the data. Before proceeding i would like to tell you that Google Charts store information in two forms:

1. Data Tables
2. Data View

to know more about above two checkout the documentation of Google. In this example i am going to use DataTable. As the name implies tables so its obvious that it having the information in the form of rows and columns. Google provides nice methods to add information to tables. Let's write the code to add or build information.

        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]
        ]);

Here in the above code at very first we create a object i.e. data, using library visualization which invoke the constructor DataTable. Now this object is behaving like a table like we have in our documents. To fill the columns and rows data object provides following two methods:

1. addColumn('[type]', '[name]'): Type can be number, string etc. And Name is an identifier of column name.
2. addRows([array of data]): As you can see in the above code a multidimensional is passed to this method.

Alright, but how to draw this table?
May be a method. If you are thinking the same, may be you are right. Yes the library provide us another method named "draw".

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data);

In the above code we are getting the DOM element with the id "chart_div" and passed it to library method PieChart which add some methods to the DOM element and store it to chart variable. Now use draw method and pass the data table to it.

Following is the complete code:

 <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 library and the piechart library.
      google.load('visualization', '1.0', {'packages':['corechart']});
      google.setOnLoadCallback(drawChart);
       
      function drawChart() {
        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]
        ]);

        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);
        console.log(data);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Conclusion:

In this tutorial we learn following things:

1. JSAPI
2. Visualization Library
3. Data Table
4. Methods: google.load(), addRows(), addColumn(), draw(), PieChart(), DataTable().

I hope this tutorial will help you little bit. Thanks for reading my blog. And don't loose faith and don't stop learning.