Pie Chart Example
An example of a Google Pie Chart.
by victorxpp
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
JavaScript
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Webster Lead',0],
['Webster Tech',0],
['Calgary Lead',0],
['Calgary Tech',0],
['Vianen Lead',0],
['Vianen Tech', 0],
['Abu Dhabi Lead', 0],
['Abu Dhabi Tech', 0],
['Mexico City Lead', 0],
['Mexico City Tech', 0],
['Pipeline Projects', 0],
['?Office', 0],
['Vacation/PTO', 0],
['Training', 0]
]);
var options = {
title: 'My Daily Activities',
animation: {
duration: 1500,
startup: true //This is the new option
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
chart.draw(data, options);
// initial value
var percent = 0;
// start the animation loop
var handler = setInterval(function(){
// values increment
percent += 1;
// apply new values
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(0, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
data.setValue(1, 1, 2);
// update the pie
chart.draw(data, options);
// check if we have reached the desired value
if (percent > 74)
// stop the...