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.

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.addRows([
        ['A', roundNumber(11 * Math.random(), 2)],
        ['B', roundNumber(2 * Math.random(), 2)],
        ['C', roundNumber(2 * Math.random(), 2)],
        ['D', roundNumber(2 * Math.random(), 2)],
        ['E', roundNumber(7 * Math.random(), 2)]
        ]);
    var options = {
        width: 200,
        height: 500,
        colors: ['#ECD078','#ccc','#C02942','#542437','#53777A'],
        legend: {position:'bottom'},
        pieHole: 0.4,
        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;
}