<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<style>
#myDrawChart{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
align-items:center;
margin:20px 0;
}
#myDrawChart > div{
width:450px;
}
</style>
</head>
<body>
<div id="myDrawChart">
<p><code><b>var options = { diff: { innerCircle: { radiusFactor: 0.3 } } };</b></code></p>
<div id='piechart_radius'></div>
<p><code><b>var options = { diff: { innerCircle: { borderFactor: 0.08 } } };</b></code></p>
<div id='piechart_border'></div>
<p><code><b>var options = { diff: { oldData: { opacity: 0.2} } };</b></code></p>
<div id='piechart_old_opacity'></div>
<p><code><b>var options = { diff: { newData: { opacity: 0.7 } } };</b></code></p>
<div id='piechart_new_opacity'></div>
<p><code><b>var options = { diff: { oldData: { inCenter: false } } };</b></code></p>
<div id='piechart_invert'></div>
</div>
<script>
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var oldData = google.visualization.arrayToDataTable([
['Company', 'Items Sold'],
['Apple', 25607],
['Samsung', 10803],
['LG', 12710],
['Motorola', 8186],
['other', 7419]
]);
var newData = google.visualization.arrayToDataTable([
['Major', 'Degrees'],
['Apple', 35829],
['Samsung', 10126],
['LG', 17278],
['Motorola', 12963],
['other', 9721]
]);
var options1 = {
diff: {
innerCircle: { radiusFactor: 0.3 }
}
};
var options2 = {
diff: {
innerCircle: { borderFactor: 0.08 }
}
};
var options3 = {
diff: {
oldData: { opacity: 0.2}
}
};
var options4 = {
diff: {
newData: { opacity: 0.7 }
}
};
var options5 = {
diff: {
oldData: {
inCenter: false
}
}
};
var chartRadius = new google.visualization.PieChart(document.getElementById('piechart_radius'));
var chartBorder = new google.visualization.PieChart(document.getElementById('piechart_border'));
var chartOldOpacity = new google.visualization.PieChart(document.getElementById('piechart_old_opacity'));
var chartNewOpacity = new google.visualization.PieChart(document.getElementById('piechart_new_opacity'));
var chartInvert = new google.visualization.PieChart(document.getElementById('piechart_invert'));
var diffData = chartRadius.computeDiff(oldData, newData);
chartRadius.draw(diffData, options1);
chartBorder.draw(diffData, options2);
chartOldOpacity.draw(diffData, options3);
chartNewOpacity.draw(diffData, options4);
chartInvert.draw(diffData, options5);
}
</script> </body>
</html>