javascripthtmlchartsgoogle-visualizationgoogle-pie-chart

create multilevel donut chart with Google Chart

I am creating a multilevel donut chart with google charts. I am successful to creating a single level chart. But now I have to create another chart in that chart. Please help me. And also is that possible to write text on chart slice in circular form?

here is my code for single donut chat.

HTML

  <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="donutchart" style="width: 900px; height: 500px;"></div>

JS

 google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
            chartArea:{left: '100'},
         pieSliceText: 'label',
            pieStartAngle: 0,
            pieSliceTextStyle:{color: 'white', fontName: 'arial', fontSize: 10}
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }

and here is code link in JsFiddle IT should be look like enter image description here

Solution

  • This was possible with the Google Image Charts API, which has been deprecated in 2012. It seems to still be up and running, it's just not maintained anymore.

    With that API, it was (and still is) possible to create concentric pie charts such as the one below

    http://chart.apis.google.com/chart?chd=s:Yr3,ff9&cht=pc&chs=300x200&chxr=0,20,45|1,25,50

    which yields the following pie chart

    enter image description here

    Also you can play with the API and easily create your own pie charts here: http://www.jonwinstanley.com/charts/

    Supporting this kind of concentric Pie chart in the new Google Charts API is still an open issue