CODEWITHSUNDEEP
dc.jscrossfilter
Mahlatse
Mahlatse

Reputation: 121

crossfilter dc.barChart renders empty chart without bars

I am plotting a crossfilter bar chart with dimensions having dates. From my ground knowledge, the x axis is the dim, and I have used the date as my dim. But the chart is empty.

I have checked the varGroup.size() which returns 6 as expected since the data spans over 6 days and I have parsed date to be in days.

var varCountDim = ndx.dimension(function (d) { return d.created_at;} );
var varCountGroup = varCountDim.group( function (d) {if (d.length) return d; })
var minDate = varCountDim.bottom(1)[0].created_at;
var maxDate = varCountDim.top(1)[0].created_at;
var dateChart = dc.barChart("#date-chart");


dateChart
.width(780)
.height(400)
.margins({top: 10, right: 50, bottom: 20, left: 40})
.dimension(varCountDim)
.group(varCountGroup)
.transitionDuration(500)
.x(d3.time.scale().domain([minDate, maxDate]))
.elasticY(true)
.xUnits(function(){return 20;})
.yAxis().ticks(4);
 dateChart.render();

The contents of varCountGroup are :

enter image description here

Expected results is a bar chart with date on the x axis and varcount on the y axis. The only thing appears are the axes lines and no bars

Upvotes: 2

Views: 68

Answers (1)

Gordon
Gordon

Reputation: 20120

It looks like the issue is that you are using a time scale but have not converted your date strings to date objects.

Although you could do this in the dimension key function, it's more efficient to do this before initializing crossfilter.

This would look something like

var parse = d3.timeParse("%Y-%m-%d");
data.forEach(function(d) {
    d.created_at = parse(d.created_at);
});
var ndx = crossfilter(data);

Upvotes: 1

Related Questions