Create Dynamic Time User Graph using Google Charts – A Practical Tutorial

Chart Error

In my last post, we have studied the basics of Google Chart. Google Charts helps us display the dry-data in a very beautiful visualization.

If you look around the web, you’ll find that there is a lot of buzz about Google charts but there are not many tutorials which demonstrate how to  use Google Charts. So I came up with this tutorial.

In this tutorial I will share how to create time user graph using Google Charts , PHP and MYSQL.  Here are the steps :

  1. Load the Google Charts AJAX api: jsapi .
  2. Load the Visualization API Library and add package name corechart.
  3. Then, set google callback function and call `getData()` function which will fetch data from the database.
  4. In the getData() function, we will retrieve an array of data and will push the data in the drawChart() method.
  5. In the drawChart() method, we will push the array data to tables and will draw line chart with the data.

For this tutorial we will be using a DB table as a data source. The table contains users and their date of registration.  Here, we will display the number of registered users on a particular date.  Lets start with the tuorial:

Continue Reading

A Look at Google Charts Library

bubble chart

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.Continue Reading