Google donut chart
Fixed: 1. Markup - Separated HTML, CSS and JavaScript code; 2. :after pseudo-element inside #chart_div for donut hole; 3. Hide tooltip when mouseover on "hidden" slice.
by gdicerbo
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
JavaScript
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
['CEC', 58, 'CEC\n 58 Projects'],
['NAI', 31, 'NAI\n 31 Projects'],
['Framework A', 0, 'Framework A\n 0 MW'],
['Framework B', 0, 'Framework B\n 0 MW'],
['Framework C', 0, 'Framework B\n 0 MW']
]);
var options = {
width: 200,
height: 200,
colors: ['#8dc641','#6a747b','#C02942','#542437','#53777A'],
legend: {position:'none'},
pieHole: 0.4,
chartArea: {'width': '90%', 'height': '90%'},
animation: {duration:800,easing:'in'},
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function roundNumber(num, dec) {
var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
return result;
}
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
['CEC', 58, 'CEC\n 58 Projects'],
['NAI', 31, 'NAI\n 31 Projects'],
['Framework A', 0, 'Framework A\n 0 MW'],
['Framework B', 0, 'Framework B\n 0 MW'],
['Framework C', 0, 'Framework B\n 0 MW']
]);
var options = {
width: 300,
height: 300,
colors: ['#8dc641','#6a747b','#C02942','#542437','#53777A'],
legend: {position:'none'},
pieHole: 0.4,
chartArea: {'width': '90%', 'height': '90%'},
animation:...