Decorate your statistics with Interactive Google Pie-Charts

Shashwat Srivastava

Shashwat Srivastava

— 1 min read

With Free Image and Interactive Chart API, Google has made life easy for us. Google chart API is used in Google analytics and is very beautiful. There are primarily two types of Chart API IMAGE and Interactive type. The first one is light and easy to use while second one is heavy yet interactive. Hover your mouse cursor and feel the difference. Isn't it amazing. In fact interactive Chart API looks pretty cool. Have a look at the HTML code below and enjoy.

Interactive Pie-chart Example: --

google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Votes'); data.addRows(5); data.setValue(0, 0, 'Spain'); data.setValue(0, 1, 11000); data.setValue(1, 0, 'Brazil'); data.setValue(1, 1, 12000); data.setValue(2, 0, 'Argentina'); data.setValue(2, 1, 6000); data.setValue(3, 0, 'England'); data.setValue(3, 1, 5000); data.setValue(4, 0, 'Germany'); data.setValue(4, 1, 10000); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 450, height: 300, title: 'Vote for FIFA Worldcup 2010 Champion'}); }

<html>

<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Task');

data.addColumn('number', 'Votes');

data.addRows(5);

data.setValue(0, 0, 'Spain');

data.setValue(0, 1, 11000);

data.setValue(1, 0, 'Brazil');

data.setValue(1, 1, 12000);

data.setValue(2, 0, 'Argentina');

data.setValue(2, 1, 6000);

data.setValue(3, 0, 'England');

data.setValue(3, 1, 5000);

data.setValue(4, 0, 'Germany');

data.setValue(4, 1, 10000);


       var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

chart.draw(data, {width: 450, height: 300, title: 'Vote for FIFA Worldcup 2010 Champion'});

}

</script>

</head>

<body>

<div id="chart_div"></div>

</body>

</html>

Find out more about Google chart API and explore the gallery..

Read more