Google Pie Chart
by Alvin Olavarrieta
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_a"></div>
<div id="chart_b"></div>
<div id="chart_c"></div>
CSS
body {
background-color: #DDD;
}
#chart_a, #chart_b, #chart_c {
width: 100px;
height: 100px;
float: left;
margin-right: 15px;
}
JavaScript
// Charts
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var piaA = google.visualization.arrayToDataTable([
['Peer Groups', 'Overall'],
['All', 55],
['Compares', 45]
]);
var pieB = google.visualization.arrayToDataTable([
['Peer Groups', 'Overall'],
['All', 60],
['Compares', 40]
]);
var pieC = google.visualization.arrayToDataTable([
['Peer Groups', 'Overall'],
['All', 52],
['Compares', 48]
]);
var optionsA = {
pieHole: 0.7,
width: '100%',
height: '100%',
pieSliceText: 'percentage',
legend: 'none',
pieSliceText: 'none',
title: 'PR Among All Vice Presidents',
colors: ['#9cdb3b', '#DDDDDD'],
chartArea: {
height: "100%",
width: "100%"
},
backgroundColor: '#FFF',
enableInteractivity: false
};
var optionsB = {
pieHole: 0.7,
width: '100%',
height: '100%',
pieSliceText: 'percentage',
legend: 'none',
pieSliceText: 'none',
title: 'PR Among All Vice Presidents',
colors: ['#fbc300', '#DDDDDD'],
chartArea: {
height: "100%",
width: "100%"
},
backgroundColor: '#FFF',
enableInteractivity: false
...