google pie chart animation
Pie chart animation based on unknown size of an array
by victorxpp
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
JavaScript
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Condition');
data.addColumn('number', 'Number');
var pieDataTest = [
["Webster Lead",130],
["Webster Tech",300],
["Calgary Lead",300],
["Calgary Tech",130],
["Shorewood Lead",200],
["Shorewood Tech",200],
["Vianen Lead",200],
["Vianen Tech",200],
["Abu Dhabi Lead",200],
["Abu Dhabi Tech",200],
["Mexico City Lead",200],
["Mexico CIty Tech",200],
["Pipeline Projects",200],
["?Office",200],
["Vacation/PTO",200],
["Training/Meeting",200],
];
data.addRows(pieDataTest);
var options = {
'title':'Product Summary (last 30 days)',
pieSliceText: 'value',
'chartArea': { width:'90%', height:'85%', right:0 },
// customizing colors is always nice...
colors: ['#00b050','#92d050','#ff0000','#ff7c80','#3333ff','#548dd4','#00ffff','#afffff','#674ea7','#ccc0d9','#a64d79','#bebebe','#f6b26b','#bebebe','#f8ff91','#ffdafc'],
pieHole:0.2,
sliceVisibilityThreshold: 0.0001
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}