Google visualization donut chart

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>
This entry was posted in Data visualization and tagged , , , . Bookmark the permalink.

17 Responses to Google visualization donut chart

  1. Anny says:

    Thanks for piehole !! 🙂
    God Job guys

  2. Sikky says:

    <%—————————————-

    google.load(‘visualization’, ‘1’, {packages: [‘corechart’]});

    function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
    [‘Task’, ‘Hours per Day’],
    [‘Connected’, 1054165],
    [‘Not Connected’, 0],
    [‘Terminated’, 100]
    ]);
    new google.visualization.PieChart(document.getElementById(‘visualization’)).
    draw(data, {pieHole: 0.5, legend:’none’});
    }
    google.setOnLoadCallback(drawVisualization);

    ——————%>

  3. Sikky says:

    Hi Ron,

    There is no issue in google Chrome but in Internet Explorer 8 am getting bullet kind of Image.
    Please find full code to replicate the image.

    google.load(‘visualization’, ‘1’, {packages: [‘corechart’]});

    function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
    [‘Task’, ‘Hours per Day’],
    [‘Connected’, 1054165],
    [‘Not Connected’, 0],
    [‘Terminated’, 100]
    ]);
    new google.visualization.PieChart(document.getElementById(‘visualization’)).
    draw(data, {pieHole: 0.5, legend:’none’});
    }
    google.setOnLoadCallback(drawVisualization);

  4. Sikky says:

    Hi Ron,

    I am getting centered dot(.) like image while drawing donut chart with the following data.

    data.addRows([
    [‘A’, 1002515],
    [‘B’, 0],
    [‘C’, 15]
    ]);

    Please help to resolve this issue.

    Thanks in advance.
    Sikky.

    • Ron Keler says:

      Please read through the comments thread, and note the usage of teh pieHole option to get a donust chart with no need for any special graphics. Thanks.

      • Sikky says:

        Hi Ron,

        Thanks for your reply.

        I have used pieHole: 0.4 to suit my requirement
        and used pieSliceText:’none’,
        enableInteractivity :false,

        to make sure no extra things needed with donut chart, still getting bullet kinda image.

        even we can reproduce bullet kinda image with the below mentioned data.
        function drawVisualization() {
        var data = google.visualization.arrayToDataTable([
        [‘Task’, ‘Hours per Day’],
        [‘Red’, 1064273],
        [‘Amber’, 0],
        [‘Green’, 10]
        ]);
        new google.visualization.PieChart(document.getElementById(‘visualization’)).
        draw(data, {pieHole: 0.3, legend:’none’});
        }

        Kindly let me know is there any way to resolve this issue.

        Thanks,
        Sikandar.

  5. sikky says:

    how to send the parameters once after clicking the part.

    • Ron Keler says:

      Hi Sikky, the google visualization api used in this example provides event listeners you can use to handle click events and execute any operation needed by your application.

  6. Pingback: Tech Tip Tuesday: HTML Donut Charts and Apache Web Server on Mac OSX « Denny Lee

  7. Jorge Klemm says:

    So, Can you post the source-code of this native example donut chart?

    Cheers.

    • Ron Keler says:

      I thought i did, but the html code rendered… here it is again:

      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’},
      pieHole: 0.5
      };
      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;
      }

  8. Huzi says:

    Is there a way to have this other than it being positioned absolute! because I wont be able to know the distance from the top and all! Otherwise I would have to create a whole bunch of iframes like you did here. But that is super messy!

    • Ron Keler says:

      Huzi, yes, there is! Since i posted this, i discovered an undocumented option for the pie chart called piHole that lets you create a native donut chart. For example:









      • Jorge Klemm says:

        Native is really better !!!

        Note that using the image circle.png cause not focus other donut part while the mouse cursor is on the image (imagine a square, not a circle).

        In native mode, it works very well!

Comments are closed.