create multilevel donut chart with Google Chart

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>

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

Tags:

Javascript

Html

Charts

Google Visualization

Google Pie Chart

Recent Posts