Donut chart example
An example of a Google Donut Chart.
HTML
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="i1" style="width: 900px; height: 500px;"></div>
<div id="i2" style="width: 900px; height: 500px;"></div>
<div id="i3" style="width: 900px; height: 500px;"></div>
<div id="i4" style="width: 900px; height: 500px;"></div>
<div id="i5" style="width: 900px; height: 500px;"></div>
CSS
#i4 svg g text{
font-size:11px !important;
}
JavaScript
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Percentage'],
['', 41.2],
['', 29.4],
['', 17.6],
['', 5],
['', 4.9],
['', 1.4],
['', 0.5],
]);
var chart;
chart = new google.visualization.PieChart(document.getElementById('i1'));
chart.draw(data, {
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
},
legend: 'none'
});
chart = new google.visualization.PieChart(document.getElementById('i2'));
chart.draw(data, {
sliceVisibilityThreshold: 0.05,
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
},
legend: 'none'
});
chart = new google.visualization.PieChart(document.getElementById('i3'));
chart.draw(data, {
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
fontSize:11
},
legend: 'none'
});
chart = new google.visualization.PieChart(document.getElementById('i4'));
chart.draw(data, {
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
fontSize:0.5
},
legend: 'none'
});
}