Quick tech tip for today, how to create HTML donut charts like the one below and use Apache Web Server on Mac OSX. Hats off to the BI Happy Blog and Coolest Guy on the Planet Tech blog. I wanted to quickly generate some mockup donut charts by using HTML – and being lazy, figured I would just borrow some code.
For starters, I needed to get Apache Web server started on my Mac OSX Mountain Lion – fortunately, the instructions are already provided – so here’s the link: Install and configure Apache, MySQL, PHP and phpMyAdmin on OSX 10.8 Mountain Lion.
The BI Happy Blog has a great one that allowed me to create a HTML donut chart with relative ease. The original source code for this can be found at: http://bihappyblog.com/2012/03/29/google-visualization-donut-chart/
I have modified the code slightly so it can be run locally on my Mac OSX Mountain Lion web server – below is my version of it for your usage.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/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([
['web', roundNumber(11*Math.random(),2)],
['XML', roundNumber(2*Math.random(),2)],
['json', roundNumber(2*Math.random(),2)],
['avro', roundNumber(2*Math.random(),2)],
['protobuf', roundNumber(7*Math.random(),2)]
]);
var options = {
width: 450, height: 300,
colors:['#ECD078','#D95B43','#C02942','#542437','#53777A'],
legend: {position: 'none'},
pieHole: 0.5
// 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;
}
</script>
</head>
<body>
<div id="link_div" style="z-index: 3; position: absolute; left: 180px; top: 30px;">
<a href="javascript:drawChart()">Change Data</a>
</div>
<div id="chart_div" style="z-index: 1; position: absolute; left: 0px; top: 20px;"></div>
<div id="circle_div" style="z-index: 2; position: absolute; left: 180px; top: 127px;">
<!-- <img src="circle.png"></div> -->
<img src="http://bihappyblog.com/samples/circle.png"></div>
</body>
</html>
Enjoy!
Denny Lee 
Thanks for the reference Denny. Best regards. – Ron
By all means! It’s your code! 🙂
Thank you so much Denny!!! great help.
Reblogged this on Sutoprise Avenue, A SutoCom Source.