Google Visualization API is a Javascript library displays methods to load and control the visualization. It's useful to display nice charts in your web sites.
To load Google Visualization AJAX API.
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
Download Script 
Live DemoTake a look at live demo.
JavaScript Code
<script type="text/javascript">
google.load('visualization', '1', {'packages':['piechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'list');
data.addColumn('number', 'Tutorials Pesentage');
data.addRows(5);
data.setValue(0, 0, 'jQuery');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Java');
data.setValue(1, 1, 5);
data.setValue(2, 0, 'PHP');
data.setValue(2, 1,6);
data.setValue(3, 0, 'Web Design');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Database');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.
getElementById('9lessonschart'));
chart.draw(data, {width: 400, height: 240, is3D:
true, title: '9lessons Tutorials 3D Chart'});
}
<div id="9lessonschart"> </div>
google.load('visualization', '1', {'packages':['piechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'list');
data.addColumn('number', 'Tutorials Pesentage');
data.addRows(5);
data.setValue(0, 0, 'jQuery');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Java');
data.setValue(1, 1, 5);
data.setValue(2, 0, 'PHP');
data.setValue(2, 1,6);
data.setValue(3, 0, 'Web Design');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Database');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.
getElementById('9lessonschart'));
chart.draw(data, {width: 400, height: 240, is3D:
true, title: '9lessons Tutorials 3D Chart'});
}
</script>
<div id="9lessonschart"> </div>
Take a look at above code 3D. If you want plane chart just change into 2D
Blue Chart
Google package name imagepiechart to use to display chart below style.
google.load('visualization', '1', {'packages':[ 'imagepiechart']});
var chart = new google.visualization.ImagePieChart(document.
getElementById('bluechart'));
<div id="bluechart"> </div>
getElementById('bluechart'));
<div id="bluechart"> </div>
Load multiple packages.
google.load('visualization', '1', {'packages':['piechart', 'imagepiechart', 'barchart']});
Hey thanks for sharing...
http://www.bpojobsathome.com
Great article! Thanks for taking the time to explain Google Visualization API
Thanks very much! how do I use it offline?
Very nice..thanks. Can you help me with another article which shows reading an csv file and drawing an chart using google visualization please..thanks in advance
Hi Srinivas,
Are they also suitable for blogs at blogspot.com?