score:1

Accepted answer

You've got a few issues in here.

First, you've got NaNs in the data you're aggregating, so you'll need to change your YDimension to something like

var YDimension = XDimension.group().reduceSum(function (d) {return isNaN(d.total) ? 0 : d.total;});

to get Crossfilter to sum it properly.

The actual answer, though, is about your x scale. You're currently just not including one, but it sounds like what you're talking about is an Ordinal Scale. Ordinal scales are the scales you typically think of for bar charts; they're a type of scale that has a discrete domain. In this case, you could try adding an ordinal scale like so:

.x(d3.scale.ordinal().domain(["visa", "cash", "tab"]))

so it uses an ordinal scale instead. Since you're using dc.js, you'll also need to specify

.xUnits(dc.units.ordinal)

so that it knows to use ordinal marks.

Overall, I used

dc.barChart("#dc-bar-chart")
    .width(480).height(150)
    .x(d3.scale.ordinal().domain(["visa", "cash", "tab"]))
    .xUnits(dc.units.ordinal)
    .dimension(XDimension)
    .group(YDimension)
    .centerBar(false);

and it worked fine on my end. Depending on your dc.js version, you may be able to omit the domain and let dc.js figure it out automatically. In that case, you could just use

.x(d3.scale.ordinal())

Related Query

More Query from same tag