0
votes

I am trying to render a dc.js barChart where my y-axis is percentage 0-100% and my x-axis are numbers, however I want to order the x-axis by date.

My data looks like this:

date,trend,percent
01/01/2014 13:00,238,53.6
01/01/2014 13:15,239,64.2
01/01/2014 13:30,219,43.1
01/01/2014 13:45,219.2,43.1
01/01/2014 14:00,237.4,50.6
...

I am adding the data to crossfilter

data.forEach(function (d) { d.date = parseDate(d.date); });

var ndx = crossfilter(data);

var trendDimension = ndx.dimension(function (d) { return d.trend; });
var trendGroup = trendDimension.group().reduce(
  function (p, v) {
    p.time = v.date.getTime();
    p.trend = +v.trend;
    p.percent = +v.percent;
    return p;
  },
  ...
).order(function (p) { return p.time; }); // ??? order by time rather than trend

When I graph the dimension and group, my x-axis is sorted by trend as my x domain looks like:

var minTrend = trendDimension.bottom(1)[0].trend;
var maxTrend = trendDimension.top(1)[0].trend;

...
chart.x(d3.scale.linear().domain([minTrend, maxTrend]);
...
chart.render();

Everything plots, however the bars a sorted in order of trend and I would like them sorted in order of date/time.

Is this possible?

EDIT

I also tried:

chart.ordering(function (d) { return d.value.time; });

but that does not seem to have an effect on the ordering...

1

1 Answers

0
votes

Do you want to graph percent versus trend or percent versus time?

Right now your dimension is on trend, so it will not be possible to order it by date. Crossfilter will create a bin for each trend value (which may have many dates), and the way you have written your reduce function, it will simply replace the date entry for the bin, with the last date it sees.

If you want to order by date and then use trend to affect some other aesthetic (color for example), you should use a date dimension, group by some quantization of the date, not do anything with the date in your reduce, and use date scale/xUnits.