Amazing Charts Using Google Chart API

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


demo

download

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.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.