display total in center of donut pie chart using google charts?

Question

I am new to angularjs and google charts i made a pie chart now i want following:

1- display total components inside the centre of the pie charts.
2- display pieSliceText outer side of the pie slice

you can see the this is what i want:

how can this be done my sample code:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}">                    </script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

javascript:

google.setOnLoadCallback(drawChart);
function drawChart() {

    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
    ]);

    var options = {     
        height: 360,
        width: 360,
        pieHole: 0.5,
        showLables: 'true',
        pieSliceText: 'value',
        pieSliceTextStyle: {
            color: 'white',
            fontSize:18
        },
        legend: {
            position: 'right',
            alignment: 'center'
        },
        chartArea: { 
            left: 10, 
            top: 10, 
            width: '130%', 
            height: '65%'
        },
        tooltip: {
            trigger:'none'
        }
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
}

Answer 1

OK, try this http://jsfiddle.net/L1tct3Lv/3/ ... its a fast hack but you could certainly vastly improve it by calculating the positions based on sizes and such.

google.setOnLoadCallback(drawChart);

<!-- This generates the google chart -->
function drawChart() {
var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
]);

var options = {     
    height: 360,
    width: 360,
    pieHole: 0.8,
    showLables: 'true',
    pieSliceText: 'value',
    pieSliceTextStyle: {
        color: 'white',
        fontSize:18
    },
    legend: {
        position: 'right',
        alignment: 'center'
    },
    chartArea: { 
        left: 10, 
        top: 10, 
        width: '130%', 
        height: '65%'
    },
    tooltip: {
        trigger:'none'
    }
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
jQuery('#cnt').text(data.Gf.length);
chart.draw(data, options);

}

Setting up a few overlays like this:

<div id="JSFiddle">
<div id="chart_div"></div>
<div id="cnt" class="overlay"></div>
<div class="overlay-label">total components</div>
</div>

With this css:

#JSFiddle {
position: relative;
}

.overlay {
display:block;
width:240px;
height:240px;
text-align:center;
vertical-align: middle;
position: absolute;
top: 0px;  /* chartArea top  */
left: 0px; /* chartArea left */
font-size: 80px;
margin-top: 60px;
}
.overlay-label{
    display:block;
width:240px;
height:240px;
text-align:center;
vertical-align: middle;
position: absolute;
top: 0px;  /* chartArea top  */
left: 0px; /* chartArea left */
margin-top: 140px;
font-size: 20px;
}

Result is this: