Search code examples
javascriptgoogle-chromechartsgoogle-visualizationgoogle-pie-chart

Google Pie Chart Sliced 3d

I am working on small pie chart visual in js and using Google charts SDK for the same

Everything works fine but when i sliced the pie and rotated pie start angle the sliced one is not coming in 3d

Expected chart :

enter image description here

Google chart with pie sliced and rotated looks like this

enter image description here

I need to get the sliced pie as like 3d sliced pie(green color) in the above image along with blue background for whole piechart

Attached the snipper for the same

and please let know if any other thing is need to fix this

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     75],
          ['Eat',      25],
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
          slices: {  1: {offset: 0.2},                   
          },
          pieStartAngle: 100,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Solution

  • i found that if you reverse the order of the rows,
    you can get the 3d effect to display properly.

    with the slices reversed, I've manually provided the colors to match the default.

    the only other difference is the order of the legend entries.

    see following working snippet...

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Eat',     25],
          ['Work',      75],
        ]);

        var options = {
          colors: ['dc3912', '3366cc'],
          title: 'My Daily Activities',
          is3D: true,
          slices: {
            1: {offset: 0.2},                   
          },
          pieStartAngle: 12
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

    EDIT

    as for adding a background color to the chart area,
    I wasn't able to get config option chartArea.backgroundColor to work.

    as far as I can tell, for the pie chart, the entire chart is the chart area, unlike other charts.

    the only other option I could come up with, would be to add a custom chart element on the chart's ready event.

    finding the exact placement of the background element will be tricky.
    I wasn't able to come up with anything quickly, I've left some hints on how that might be accomplished.
    in the following example, the background element's placement is hard-coded, using a <circle> element.
    but you could use any other element, such as <rect>, or <path>...

    google.charts.load('current', {
  packages: ['corechart']
}).then(function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Eat',     25],
    ['Work',      75],
  ]);

  var options = {
    colors: ['dc3912', '3366cc'],
    title: 'My Daily Activities',
    is3D: true,
    slices: {
      1: {offset: 0.2},
    },
    pieStartAngle: 12
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));

  // add element to chart to use as background color
  function addBG() {
    var bg;
    var chartElements;
    var svg;
    var svgNS;

    // initialize chart elements
    svg = null;
    svgNS = null;
    chartElements = chart.getContainer().getElementsByTagName('svg');
    if (chartElements.length > 0) {
      svg = chartElements[0];
      svgNS = svg.namespaceURI;
    }
    chartElements = chart.getContainer().getElementsByTagName('path');

/*
    // calculate placement
    var x = null;
    var y = null;
    var height = null;
    var width = null;
    Array.prototype.forEach.call(chartElements, function(element, index) {
      var bounds = element.getBBox();
      x = x ?? bounds.x;
      x = Math.min(bounds.x, x);
      y = y ?? bounds.y;
      y = Math.min(bounds.y, y);
      height = height ?? bounds.height;
      height = Math.max(bounds.height, height);
      width = width ?? bounds.width;
      width = Math.max(bounds.width, width);
    });

    console.log('x', x);
    console.log('y', y);
    console.log('height', height);
    console.log('width', width);
*/

    // add background
    // <circle fill="rgba(255, 0, 255, 0.5)" cx="328" cy="260" r="180"></circle>
    bg = document.createElementNS(svgNS, 'circle');
    bg.setAttribute('fill', 'rgba(255, 0, 255, 0.5)');
    bg.setAttribute('cx', 328);
    bg.setAttribute('cy', 260);
    bg.setAttribute('r', 180);
    svg.insertBefore(bg, chartElements[0].parentNode);
  }

  google.visualization.events.addListener(chart, 'ready', function () {
    // add background element
    addBG();
  });

  chart.draw(data, options);
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>