CODEWITHSUNDEEP
dc.js
Pygirl
Pygirl

Reputation: 13349

Showing the percentage value in pie chart

console.log(group1.top(Infinity));

gives me:

0:
key: "M"
value: {Recovered: 122, Hospitalized: 38922, Deceased: 641, Migrated_Other: 1}
__proto__: Object
1:
key: "F"
value: {Recovered: 82, Hospitalized: 19215, Deceased:.....

In this code:

.label(function(d) {
                    return d.key+": " + (d.value[type]/<?> * 100).toFixed(2) + "%";
                })

if the type is Recovered then I want the sum of recovered values (122+82) in place of <?> i.e d.value["Recovered"]/(122+82)

I am just stuck at the syntax how to take the sum of values of the matched type in place of <?>.

I can only think of

group1.all()[0].value['Recovered']+group1.all()[1].value['Recovered']

Is there any better way?

Working Code: https://blockbuilder.org/ninjakx/61d405cb0aaeda3be960e836f803cdd5

Upvotes: 1

Views: 83

Answers (1)

Gordon
Gordon

Reputation: 20120

There are a couple of ways to do this. One is to compute the sum, manually as you show above, or by using a groupAll object.

The other way, which the pie chart example uses, is to use the angle data saved in the pie slices:

// workaround for #703: not enough data is accessible through .label() to display percentages
 .on('pretransition', function(chart) {
     chart.selectAll('text.pie-slice').text(function(d) {
         return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
     })
 });

As noted, there is not enough data supplied to .label() to use this approach, so this is applied after drawing, using the full data objects.

Upvotes: 1

Related Questions