Hide Slice in Google Donut Chart

Question

I am using Google Donut Chart.

In my case, sometime I will have below data

{
    DATA_1: 10,
    DATA_2: 15,
    INVALID_DATA: 10000000 (Big Number)
}

In such case, my valid data is showing very thin or slice not visible in Charts.

Is there any option in Google Charts to hide particular Slice to make visible other slices better?

I want valid data to show percentage with INVALID_DATA, but just hiding the INVALID_DATA Slice.

WhiteHat WhiteHat · Accepted Answer · 2016-07-11T13:05:14

there are no options on the chart itself, but hiding a slice can be done with a DataView

but cannot avoid skewing the size of the remaining slices,
relative to the hidden slice

in the following example, a column is added to calculate the % with the hidden slice

then the option pieSliceText: 'value' is used to show the true %

a DataView is used to hide the original value column, and the row with the big slice

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Data Type', 'Value'],
      ['DATA_1', 10],
      ['DATA_2', 15],
      ['INVALID_DATA', 10000000]
    ]);

    var options = {
      pieHole: 0.4,
      pieSliceText: 'value',
      theme: 'maximized',
      height: 262,
      width: 262,
    };

    // get total -- sum
    var dataGroup = google.visualization.data.group(
      data,
      [{column: 0, type: 'string', modifier: function () {return '';}}],
      [{column: 1, type: 'number', aggregation: google.visualization.data.sum}]
    );

    var hideRows = [];
    data.addColumn({type: 'number', label: '%'});
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      // set % value
      data.setValue(i, 2, data.getValue(i, 1) / dataGroup.getValue(0, 1));

      // hide big #
      if (data.getValue(i, 2) > .99) {
        hideRows.push(i);
      }
    }

    var numberFormat = new google.visualization.NumberFormat({
      pattern: '#,##0.00000 %'
    });
    numberFormat.format(data, 2);

    var dataView = new google.visualization.DataView(data);
    dataView.hideColumns([1]);
    dataView.hideRows(hideRows);

    var pieChart = new google.visualization.PieChart(document.getElementById('pieChart_div'));
    pieChart.draw(dataView, options);

    var tableChart = new google.visualization.Table(document.getElementById('tableChart_div'));
    tableChart.draw(data);
  },
  packages: ['corechart', 'table']
});

div {
  padding: 2px 2px 2px 2px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="pieChart_div"></div>
<div id="tableChart_div"></div>

Hide Slice in Google Donut Chart

1 Answers