CODEWITHSUNDEEP
javascriptd3.jsdc.jscrossfilter
Chapo
Chapo

Reputation: 2543

order a capped chart with fake group does not work in dc.js

I am trying to use the cap function for the rowChart in dc.js. I can't get the group to use the correct ordering when rendering the graph though. I have used the "fake group" methode found here.

Here is my HTML code :

<button id="btGO" type="button">GO</button>
<div id="chart-row-pnlperb4"></div>

And the javascript code :

var thecross;
var numSort = function(a,b) {return (a-b);};
var dim;
var group;

function go() {
    thecross = crossfilter(
        [
            {key:"a",value1:3,value2:-10},
            {key:"b",value1:3,value2:11},
            {key:"c",value1:3,value2:-12},
            {key:"d",value1:3,value2:5},
            {key:"e",value1:3,value2:3},
            {key:"f",value1:3,value2:15},
            {key:"g",value1:3,value2:-8},
            {key:"h",value1:3,value2:6},
            {key:"i",value1:3,value2:-4},
            {key:"j",value1:3,value2:12},
            {key:"k",value1:3,value2:7},
            {key:"l",value1:3,value2:-6.5}
        ]
    );

    dim = thecross.dimension(function(d) {return(d.key.toUpperCase());});
    mygroup =  dim.group().reduceSum(function(d) {return(d.value2);});

    var sort_group = function(source_group) {
        return {
            all: function () {
                return source_group.all();
            },
            top: function(n) {
                return source_group.top(Infinity).sort(function(x,y){return -numSort(Math.abs(x.value),Math.abs(y.value));}).slice(0,n);
            }
        };
    };
    var sorted_group = sort_group(mygroup);

    var pnlPerB4rowChart = dc.rowChart("#chart-row-pnlperb4");
    pnlPerB4rowChart
        .height(300)
        .width(700)
        .dimension(dim)
        .group(sorted_group)
        .valueAccessor(function(d) {
            return Math.abs(d.value);
        })
        //.ordering(numSort)
        .renderLabel(true)
        .renderTitle(false)
        .labelOffsetY(10)
        .elasticX(true)
        .rowsCap(10)
        .othersGrouper(false)
        .margins({left: 70 ,top: 10, bottom: 30, right: 50});

        dc.renderAll();
};

$(function(){
    $("#btGO").click(go)
});

I would like to get the top 10 bars sorted by descending absolute value of value2 field.

I have put the code in this jsFiddle

Upvotes: 1

Views: 133

Answers (1)

Gordon
Gordon

Reputation: 20120

Ordering in descending order by value is the default behavior. The only problem here is that you have negative values, so ordering by descending absolute value is not consistent with ordering by value:

I suggest that you simplify your data processing by taking the absolute value right away when computing the group:

    mygroup =  dim.group().reduceSum(function(d) {return Math.abs(d.value2);});

aggregated and ordered by absolute value https://jsfiddle.net/gordonwoodhull/Ln960vq9/18/

Then you won't need all those other Math.abs.

If for some reason you can't do that, you could also specify the sort ordering value to be absolute value:

        .ordering(a=>-Math.abs(a.value))

https://jsfiddle.net/gordonwoodhull/Ln960vq9/20/

Upvotes: 2

Related Questions