Tech Tip Tuesday: HTML Donut Charts and Apache Web Server on Mac OSX

UntitledQuick 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!

4 Comments

  1. Thanks for the reference Denny. Best regards. – Ron

    1. By all means! It’s your code! 🙂

  2. Thank you so much Denny!!! great help.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s