Wednesday, September 28, 2011

Using Google Chart Tools - Visualization: Pie Chart

It's a example of using Google Chart Tools - Visualization: Pie Chart.

Using Google Chart Tools - Visualization: Pie Chart

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i can code! for Web.</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'name');
data.addColumn('number', 'data');
data.addRows(5);
data.setValue(0, 0, 'A');
data.setValue(0, 1, 50);
data.setValue(1, 0, 'B');
data.setValue(1, 1, 50);
data.setValue(2, 0, 'C');
data.setValue(2, 1, 50);
data.setValue(3, 0, 'D');
data.setValue(3, 1, 25);
data.setValue(4, 0, 'E');
data.setValue(4, 1, 25);

// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"Google Chart Tools - Visualization: Pie Chart"});
}

google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>

No comments:

Post a Comment