Display item in legend even if value = 0 with Google Charts Tools Pie Chart

Question

I'm using Google Charts Tools, specifically the Pie Chart.

Naturally, if a item has a value of 0, it is not displayed in the pie (since it occupies 0% of the pie). However, it doesn't display in the legend either.

How can I manipulate the initialization options to still show a 0 value item in the legend, so that users can see that the item exists, it just has a 0 value?

Laryssa

Answer 1

setting sliceVisibilityThreshold as zero will solve your problem.

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 0],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('visualization')).
      draw(data, {title:"So, how was your day?",
                 sliceVisibilityThreshold:0
                 });
}
​

Cheerly

Exactly what I was looking for - just couldn't understand the description in the API! Thanks! – Laryssa

setting sliceVisibilityThreshold=0 helps if at least one chart data field has a non zero number but legends do not show up is all fields are zero. How can we show legends in that case? – Buckeye

@ocanal - For GoogleVisualr::Image::PieChar, how we can hide the legends which have value as 0? – Skiest

@ocanal Thanks for the help – Betjeman

I have tried to apply this, but the legend in my piechart remains limited to the values greater than zero. Do you have any troubleshooting tips ? I can change other options like the title, and when I log the value of the sliceVisibilityThreshold is shows that it is zero (0)... – Burner

Answer 2

I was recently adding the Google Charts and was facing problem in it, for Adding zero value in it.
Thanks for @ocanal, I used sliceVisibilityThreshold:0, but in some other way.

<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'],
          ['B-TRIPS',     <?php echo $arr_get_a_org['total_trips']; ?>],
          ['Reimbursed',      <?php echo $arr_get_a_org['reimbursed_trips']; ?>],
          ['Approved',  <?php echo $arr_get_a_org['approved_trips']; ?>],
          ['Pending', <?php echo $arr_get_a_org['pending_trips']; ?>]
         // ['Sleep',    <?php echo $arr_get_a_org['total_trips']; ?>]
        ]);

        var options = {
          title: 'OVERVIEW',
          backgroundColor:'#e2e1e0',
          pieSliceText:'value',
          sliceVisibilityThreshold :0

        };

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

        chart.draw(data, options);
      }
</script>

As the way of defining of options have changed, for more info check out Google Chart site

Betjeman

Answer 3

What I did is much sketchier but produced the results I was looking for. I'm working in the Google Apps Script editor itself and utilized an excel formula to force the 0% to show.

=IF(<formula> = 0%, 1E-20%, <formula>)

Basically, in the excel column values, if the value was 0 (or 0% in my situation), I'd replace that cell with 1-E20%. It mimics an actual value (so shows up in the legend), but the other values will still add up to 100% as this value is so miniscule it doesn't affect the pie chart.

Blurt