javascriptd3.jssvgnvd3.js

D3 Stacked Bar chart : issue calculating and displaying sum/total of each bar


I am trying to calculate the sum/total value of each stacked bar in the chart and display it above each bar

https://jsfiddle.net/n0zjpyow/1/

Desired output:

enter image description here

(note:totals not accurate in image)

I am using the nest and rollup functions but the result from this is the total of each series and not each stacked bar.

var keys = d3.nest()
.key(function(d) { return (d.key) })
.rollup(function (v) {
  return d3.keys(v[0]).filter(function(p, i){return i}) //filter out the heading
    .reduce(function(s, p){   //sum each of the other members
      //p is the category being summed
      return (s[p] = d3.sum(d3.values(v[0][p][0])), s);
    }, {});
})
.map(data);

Output

{1: {values: 190000000}
 2A: {values: 152000000}
 2B: {values: 190000000}
 Non: {values: 128000000}}

I am getting confused with how to apply this to the data structure i have for the chart (which cannot be modified)

How can i calculate the total of the values in each bar ? Thanks for any assistance.


Solution

  • From your data, a simple approach to compute the total value of each bar could be the following:

    var total = [0, 0, 0, 0, 0, 0];
    data.forEach(e => {
      e.values.forEach( (f, i) => {
        total[i] = total[i] + f[1];
      });
    });
    

    where you are going through each object (1, 2A, 2B, Non), and then, through each date (Jan '19 S, Jan '19 U, ..., Mar '19 U). The result is accumulated in the array total:

    [ 660000000, 1015000000, 598000000, 484000000, 528000000, 396000000 ]
    

    Regarding displaying the total of each bar, you can find a potential solution in this snippet:

    https://jsfiddle.net/s5npfdo0/

    with the following output:

    enter image description here

    Some points to take into account: