CODEWITHSUNDEEP
javascriptd3.jsdc.jscrossfilter
Koba
Koba

Reputation: 1544

numberDisplay in dc.js that shows the total sum of values in the row chart

I have a simple row chart with just three bars in it. I would like to show the sum of the values of the bars as a number using the dc.numberDisplay() method. What I get is only the value of one of the bars. The point is to show the total based on selection. For examlpe, I select the A and B and the total would show 13. Here is the jsfiddle and my code is below:

HTML

<body>
    <div id='Chart'>
        <h4 id = "total">Number: </h4>
    </div>
</body>

JS

var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
},{
    Category: "C",
    ID: "5"
}];

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});

var YDimension = XDimension.group().reduceCount(function (d) {
    return +d.value;
});


dc.rowChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .label(function (d) {
    return d.key + "  " + d.value;})
    .ordering(function (d) {
    return -d.value});

dc.numberDisplay("#total")
    .valueAccessor(function(d){return +d.value})
    .group(YDimension);   

dc.renderAll();

EDIT: Thanks to Gordon now the correct sum is displayed, yet it does not change when selecting the bars. Now, working on that.

Upvotes: 2

Views: 2522

Answers (1)

Gordon
Gordon

Reputation: 20120

Use XDimension.groupAll() for your numberDisplay group, instead of YDimension. This is a special group that has only one bin, with all the filtered records.

https://github.com/square/crossfilter/wiki/API-Reference#dimension_groupAll

Upvotes: 4

Related Questions