CODEWITHSUNDEEP
javascriptdc.js
Minh
Minh

Reputation: 2300

dc.js: Show sum totals at end of rowChart

This is similar to a problem that I asked before. However instead of a bar chart, I'm trying to display the totals for a row chart.

I've tried to adjust the code accordingly, but my familiarity with JS is pretty low. Below is my attempt, any help would be greatly appreciated.

      genderChart.on('renderlet', function (chart) {

    var rowData = [];
    var rows = chart.selectAll('.row').each(function (d) {
      rowsData.push(d);
    });

    //Remove old values (if found)
    d3.select(rows[0][0].parentNode).select('#inline-labels').remove();
    //Create group for labels
    var gLabels = d3.select(bars[0][0].parentNode).append('g').attr('id', 'inline-labels');

    for (var i = rows[0].length - 1; i >= 0; i--) {

      var b = rows[0][i];

      gLabels.append("text")
          .text(d3.format(",f")(rowsData[i].data.value))
          .attr('x', +b.getAttribute('x') + (b.getAttribute('width') + 20)
          .attr('y', +b.getAttribute('y'))
          .attr('text-anchor', 'middle')
          .attr('fill', 'black');
    }
  });

Right now there's no error in the console, so it's being render correctly...somwhere. So far the text does not show up anywhere near my row chart. Thanks!

Upvotes: 1

Views: 688

Answers (1)

Arthur
Arthur

Reputation: 351

As an alternative to your approach, you could try using renderTitleLabel.

Something like this:

genderChart
  .title(function(d) {
    return d.value; // or your custom value accessor
  })
  .renderTitleLabel(true)
  .titleLabelOffsetX(10); // optional offset from the right side of the chart

(This is available in the 2.0 betas, I am not sure about previous versions.)

Upvotes: 2

Related Questions