ZFlyGuy ZFlyGuy - 1 month ago 15
Javascript Question

How can I apply a custom (defined) order to the rows of a row chart in DC.js?

I have a rowchart that currently looks like this:

deltaChart
.width(300)
.height(250)
.dimension(deltaDim)
.group(pointsByDelta)
.xAxis().ticks(4);


In which the
deltaDim
dimension is comprised of 11 or so unique string values,
pointsByDelta
represents related counts, and
deltaChart
is of type rowChart.

Since the
deltaDim
values are string and not numeric, the sorting is out of order. I've tried applying what I've found in the wiki as well as on other's posts here to manually reorder, with no luck at all. Regardless of the format I receive a console error: .ordering is not a function()

I've tried just simple ordering like this:

.ordering(function(d){return -d.value})


That results in error. Ideally I'd like to be able to do something like:

.ordering(function(d) {
if(d.value == "5 ft") return 0;
else if(d.value == "4 ft") return 1;
else if(d.value == "3 ft") return 2;
else if(d.value == "2 ft") return 3;
else if(d.value == "1 ft") return 4;
else if(d.value == "0 ft") return 5;
else if(d.value == "-1 ft") return 6;
else if(d.value == "-2 ft") return 7;
else if(d.value == "-3 ft") return 8;
else if(d.value == "-4 ft") return 9;
else if(d.value == "-5 ft") return 10;
else return 11;
})


It looks like most of the posts on this topic are responded to with a way to sort in ascending or descending order. I've not even been able to get that to behave, and in my case, I need to be able to dictate the order if possible.

Any help appreciated. Thank you!

Answer

Combined with Gordon's input from above regarding .xAxis(), the solution that works is as follows.

deltaChart
    .width(300)
    .height(250)
    .dimension(bfeDeltaDim)
    .group(pointsByBFEDelta)
    .ordering(function(d) {
        if(d.key == "5 ft") return 0;
        else if(d.key == "4 ft") return 1;
        else if(d.key == "3 ft") return 2;
        else if(d.key == "2 ft") return 3;
        else if(d.key == "1 ft") return 4;
        else if(d.key == "0 ft") return 5;
        else if(d.key == "-1 ft") return 6;
        else if(d.key == "-2 ft") return 7;
        else if(d.key == "-3 ft") return 8;
        else if(d.key == "-4 ft") return 9;
        else if(d.key == "-5 ft") return 10;
        else return 11;
    })
    .xAxis().ticks(4);