Saturday, November 24, 2012

10 time reading = 1 time writing , 10 times writing=1 time hearing and 10 hearing =1 time seeing. So its always better to visualize any thing to learn. For example if we take an online stores we can visualize the sales of different products to better understand,improve there marketing plans to get profits.
There are several tools to create visual charts like line chart, pie chart, bar chart, etc.Today we will learn how to use Google Chart API to create such amazing charts.

Amazing Charts Using Google Chart API:techumber
Setting Up
<html lang="en">
<head>
   <script type='text/javascript' src='http://www.google.com/jsapi'></script>
   <script type="text/javascript">
   </script>
</head>
<body>
  <div id="chart_container"></div>
</body>
</html>
Drawing Simple Pie Chart
// The will load chart API and package.
google.load('visualization', '1.0',  {'packages':['piechart', 'imagepiechart', 'barchart','imageBarChart','linechart']});
//To set a callback to run when API loaded.
google.setOnLoadCallback(drawChart);
//This function will be called in above step
function drawChart() {
  // To create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Sales');
  data.addRows([
          ['Laptops', 300],
          ['Desktops', 100],
          ['Ultrabooks', 100],
          ['Notebooks', 100],
          ['All-in-Ons', 200]
        ]);

  //Pie charts
  var chart = new google.visualization.PieChart(document.getElementById('chart_container'));
 //drawing Chart and setting options
  chart.draw(data, {width: 400, height: 300, title:'Computers Sales Report in Pie Chart'});
}
Add this code inside scripts tags under head section. In this code we are adding data, Creating Chart and adding chart to chart_container div.
Here I am taking sample data of a computer stores one month sales. If you want you can take add your own data. Basically we use following types of charts we use regularly.
Amazing Charts Using Google Chart API

Available Chart types
1)PieChart
2)ImagePieChart
3)BarChart
4)ImageBarChart
5)LineChart
6)ImageLineChart

If you want to use other chart type just replace the
google.visualization.PieChart
With
google.visualization.functionName
Another great feature provied by Google Chart API is 3D view. Yes you can view charts in 3D. Just add is3D: true in options along with width,height,title.
complete Code with other type of charts
// The will load chart API and package.
google.load('visualization', '1.0',  {'packages':['piechart', 'imagepiechart', 'barchart','imageBarChart','linechart']});
//To set a callback to run when API loaded.
google.setOnLoadCallback(drawChart);
//This function will be called in
function drawChart() {
// To create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Sales');
data.addRows([
  ['Laptops', 300],
  ['Desktops', 100],
  ['Ultrabooks', 100],
  ['Notebooks', 100],
  ['All-in-Ons', 200]
]);

//Pie charts
 var chart = new google.visualization.PieChart(document.getElementById('pie'));
chart.draw(data, {width: 400, height: 300, title:'Computers Sales Report in Pie Chart'});
//3d pie charts
 var chart = new google.visualization.PieChart(document.getElementById('pie_3d'));
chart.draw(data, {width: 400, height: 300, is3D: true, title:'Computers Sales Report 3D pie charts'});
//Image Pie charts
var chart = new google.visualization.ImagePieChart(document.getElementById('pie_img'));
chart.draw(data, {width: 400, height: 300, title:'Computers Sales Report Image pie charts'});
//Image Pie 3D charts
var chart = new google.visualization.ImagePieChart(document.getElementById('pie_img_3d'));
chart.draw(data, {width: 400, height: 300, is3D: true, title:'Computers Sales Report 3D Image pie charts'});
//bar chart
var chart = new google.visualization.BarChart(document.getElementById('bar'));
chart.draw(data, {width: 400, height: 300, title:'Computers Sales Report Bar charts'});
 //bar 3D chart
var chart = new google.visualization.BarChart(document.getElementById('bar_3d'));
chart.draw(data, {width: 400, height: 300, is3D: true, title:'Computers Sales Report Bar 3D charts'});

//Image Bar chart
var chart = new google.visualization.ImageBarChart(document.getElementById('bar_img'));
chart.draw(data, {width: 400, height: 300, title:'Computers Sales Report Image Bar charts'});
//Image Bar 3D chart
var chart = new google.visualization.ImageBarChart(document.getElementById('bar_img_3d'));
chart.draw(data, {width: 400, height: 300, is3D: true, title:'Computers Sales Report Image Bar 3D charts'});
//line chart
var chart = new google.visualization.LineChart(document.getElementById('line'));
chart.draw(data, {width: 400, height: 300,  title:'Computers Sales Report Image line charts'});
//line Image chart
var chart = new google.visualization.ImageLineChart(document.getElementById('line_img'));
chart.draw(data, {width: 400, height: 300,  title:'Computers Sales Report Image line charts'});
}
Reference
https://google-developers.appspot.com/chart/
That's it. Is't it so simple. Try with some original data and see results on fly.

1 comments :

  1. Hello sir I want to use pie in pie using google chart API, Can I do that?
    I want to divide one slice into two or more slices to display data within data..
    please reply..
    thanks in advance..
    - monika

    ReplyDelete