Draw Charts with Google Visualization API

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 Demo

Take 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'});
}

</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>

Load multiple packages.

google.load('visualization', '1', {'packages':['piechart', 'imagepiechart', 'barchart']});