Amazing Charts Using Google Chart API

Published on November 23, 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.

Demo

Download

Setting Up

<html lang="en">
  <head>
    <script type="text/javascript" src="//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. 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.