While working on an iPad compatible version for our healthcare enrollment dashboard, i wrote about utilizing google visualization API charts. One of the chart types we utilized in Xcelsius was a donut chart, and while the google visualization library doesn’t have a donus chart per se, i was able to produce one using some layering techniques. This nice interactive donut chart will render just as well on any browser or device. You can find the source code below. Enjoy.
donut.html src:
<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([ ['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: 450, height: 300, colors:['#ECD078','#D95B43','#C02942','#542437','#53777A'], legend: {position: 'none'}, 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> </body> </html>
