CODEWITHSUNDEEP
javascriptchartsd3.jsdc.js
Dave Long
Dave Long

Reputation: 9759

Hiding entries in a dc.js pie chart/legend if they have 0 value

When using a Pie Chart in dc.js, is there a way to hide a pie slice if the value is 0?

In the code that I use to generate my pie chart, you can see that my key is an object with a number of metrics within. If the given metric has a value of 0, I want to hide the pie slice from the chart.

Summary.prototype.drawPie = function (name, metric, selector, labelFormatter) {
  var chart = dc.pieChart(selector, this.chartGroup);

  chart.width(200).height(200)
    .slicesCap(7)
    .dimension(this.dimension)
    .group(this.group)
    .valueAccessor(function (d) { return d.value[metric]; })
    .legend(dc.legend().x(10).y(225).gap(5).horizontal(true).itemWidth(100).legendWidth(200))
    .minAngleForLabel(.75)
    .label(function (d) {
      if (d.key == 'Others') {
        return labelFormatter(d.value);
      } else {
        return labelFormatter(d.value[metric]);
      }
    })
    .title (function (d) {
      var value = (d.key == 'Others' ? d.value : d.value[metric]);
      return d.key + ': ' + labelFormatter(value);
    })
    .ordering(function (d) { return 0-d.value[metric]; });
  this.charts[name] = chart;
  chart.render();
}

Upvotes: 1

Views: 3539

Answers (1)

Gordon
Gordon

Reputation: 20140

dc.js 2.0 has a .data() function on the base mixin which will allow you to pre-filter the groups in most cases.

It works for pie charts but it can interfere with capping.

BaseMixin.data() docs

See this issue for an example:

https://github.com/dc-js/dc.js/issues/494

A more general but uglier solution is the fake group.

Upvotes: 2

Related Questions