Google Charts - Diff Pie Chart
How to Draw a Diff Pie Chart?
var options = { diff: { innerCircle: { radiusFactor: 0.3 } } };
var options = { diff: { innerCircle: { borderFactor: 0.08 } } };
var options = { diff: { oldData: { opacity: 0.2} } };
var options = { diff: { newData: { opacity: 0.7 } } };
var options = { diff: { oldData: { inCenter: false } } };
In this example, we will draw a diff pie chart. Please hover the slices in the above chart to view particular details.
Example
<!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>
Reminder
Hi Developers, we almost covered 98% of Google Charts Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in Google Charts.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author
