CODEWITHSUNDEEP
javascriptdc.jscrossfilter
Simon Watti
Simon Watti

Reputation: 41

Issues sorting Row Chart in Y axis. Dc-js RowChart

This is my first question here, I'm going mad with a problem. I'm using DC.js ( lib on top of D3 ) and I'm trying to add my own data to one of them. It sorts the data just fine when it's like 10 rows. But after that is just all over the place.

I want to group the data by price (Kurs) and add the volume together. Then sort it from low to high price. This code runs just fine on "dc.barChart" but on rowChart I don't scale right.

I have been using the example code, but with my own CSV. https://dc-js.github.io/dc.js/examples/row.html

var chart = dc.rowChart("#test");
d3.csv("tickdata.csv").then(function(experiments) {

  experiments.forEach(function(x) {
    x.Volym = +x.Volym;
    x.Kurs = +(roundNumber(x.Kurs,0));
    });

  var ndx                 = crossfilter(experiments),
      runDimension        = ndx.dimension(function(d) {return +d.Kurs;}),
      speedSumGroup       = runDimension.group().reduceSum(function(d) {return +d.Volym;});

 chart
    .width(1024)
    .height(600)
    .margins({top: 20, right: 20, bottom: 20, left: 20})
    .ordering(function(y){return -y.value.Kurs})
    .elasticX(true)
    .dimension(runDimension)
    .group(speedSumGroup)
    .renderLabel(true); 


  chart.on('pretransition', function() {
    chart.select('y.axis').attr('transform', 'translate(0,10000)');
    chart.selectAll('line.grid-line').attr('y2', chart.effectiveHeight());
  });

  chart
    .render();
});

And the csv looks like this:

Tid,Volym,Volym_fiat,Kurs
2018-06-27 09:46:00,5320,6372,1515.408825
2018-06-27 09:47:00,3206,4421,1515.742652
2018-06-27 09:48:00,2699,4149,1515.013167
2018-06-27 09:49:00,3563,4198,1515.175342

And I want to sort the Y axis by "Kurs" - value. I can make this work in Bar chart but it does not work in RowChart. Please help!

Upvotes: 3

Views: 277

Answers (1)

Gordon
Gordon

Reputation: 20150

It would be easier to test this with a fiddle, but it looks like in your ordering function, you assume that the reduced value will have a Kurs field (y.value.Kurs).

However, when you use group.reduceSum(), just a simple numeric value will be produced.

So this should work

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

This is the default behavior in dc.js 2.1+ so you might not need the line at all.

Incidentally, if you ever have problems with guessing the right shape of the reduced data, the way to troubleshoot any accessor is to put a breakpoint or console.log inside. You should see what is going wrong pretty quick with a case like this.

Upvotes: 1

Related Questions