@cloudformatter template

A simple starting template for @cloudformatter testing

HTML

<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1.1&#39;,&#39;packages&#39;:[&#39;corechart&#39;]}]}"></script>
<div id="buttons" class="buttons"></div>
<hr/>
<div id="JSFiddle">
    <div id="chart_div"></div>
    <div id="cnt" class="overlay"></div>
    <div class="overlay-label">total components</div>
</div>

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;
}

JavaScript

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);
}