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=""></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

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

• javascript
• html
• charts
• google-visualization
• google-pie-chart

2 Answers 2

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

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

I know it's has been a long time ago but here's one way you can do this, using google charts:

But, I removed the subtitles because they interfere in the position of objects, i think it's easier and better if we do our subtitles . Then i just made some drawings e maths to achieve this.

You can control the size and pieHole with 3 variables.

 google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
      
        //control is here
        let larguraGraficoFora = 400;
        let alturaGraficoFora = 400;
        let furoGraficoFora = 0.6;

        var data = google.visualization.arrayToDataTable([
          ['Sabor de Pizza', 'Quantidade'],
          ['portuguesa',     30],
          ['frango com catupiry',     30],
          ['calabresa',     30],
          ['alguma doce',     30],
        ]);

        var options = {
          width: larguraGraficoFora,
          height: alturaGraficoFora,
          chartArea:{left:0,top:0,width:'100%',height:'100%'},
          pieHole: furoGraficoFora,
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
        chart.draw(data, options);
        
        var data2 = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['python',     20],
          ['c#',     20],
          ['javascript',     20],
          ['php',     20],
          ['sql server',     20],
        ]);

        var options2 = {
            legend:'none',
          width: larguraGraficoFora*furoGraficoFora,
          height: alturaGraficoFora*furoGraficoFora,
          chartArea:{left:0,top:0,width:'100%',height:'100%'},
          backgroundColor: 'transparent',
          legend: 'none'
        };

        var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
        chart2.draw(data2, options2);
            ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
      }
      
      
        function ajustePosicaoPieCentral(largura, altura, furo){

            yt = altura*(1+furo)/2.0;
            xt = largura*(1-furo)/2.0;

            var css = document.getElementById('donut_2');
            css.style.transform = "translate("+xt+"px, -"+yt+"px)";
        }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="donut_1" ></div>
       <div id="donut_2"></div>