Nested Pies with Google Charts

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
    <div id="chart_div1"></div>
    <div id="chart_div2"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 185px; }
img { z-index: -1; }
#chart_div table {
    width: auto;
    margin: 0 auto;
}
#chart_div .ttip {
    padding: 5px;
    background-color: transparent;
	font-family: Arial; 
	font-style: normal; 
	font-weight: normal; 
	font-size: 10px; 
	color: #000000; 
}
#chart_div .google-visualization-tooltip {
    background-color: #ffffff;
}

JavaScript

google.charts.load("current", {
   callback: makePies,
   "packages": ["corechart"]
});
function makePies() {
   var shapeEntry1 = {
      year: 2007,
      y1: 46,
      z1: 1,
      y2: 55,
      z2: 1,
      y3: 18,
      z3: 2
   };
   makeChart("#chart_div1", shapeEntry1);

   var shapeEntry2 = { year: 2008, y1: 55, z1: 2, y2: 45, z2: 2, y3: 25, z3: 1 };
   makeChart("#chart_div2", shapeEntry2);

   makeChart("#chart_div", shapeEntry1, shapeEntry2);
}
function makeChart(sel, shapeEntry, shapeEntry2) {
   // color palette
   var colorPalette = ["#007c9c", "#019fcc", "#8fcd3e", "#82b93a", "#638a2d"];
   var mapColors = {
      "#007c9c": "#007c9c",
      "#019fcc": "#019fcc",
      "#8fcd3e": "#8fcd3e",
      "#82b93a": "#82b93a",
      "#638a2d": "#638a2d"
   };
   // JSON chart options
   var options = {
      width: 300,
      height: 185,
      pieStartAngle: 0,
      colors: colorPalette,
      animation: {
         duration: 1000,
         easing: "out",
         startup: true,
      },
      // interactivity is enabled by default (no need for enableInteractivity: true)
      tooltip: {
         isHtml: true,
      },
      backgroundColor: {
         fill: "transparent"
      },
      title: "2007 Global Sales",
      titleTextStyle: {
         fontName: "Arial",
         fontSize: 14,
         bold: true,
         color: "#000000",
      },
      legend: {
         // legend is visible by default
         position: "right",
         alignment: "center",
         textStyle: {
            fontName: "Arial",
            fontSize: 12,
            bold: false,
            color: "#000000",
         },
      },
      chartArea: {
         backgroundColor: {
            fill: "#ffffff",
            fillOpacity: 0,
         },
      },
      hAxis: {
         textPosition: 'none',
         baselineColor: "transparent",
         gridlines: {
            color: "transparent",
         },
         minorGridlines: {
            color: "transparent",
         },
  ...