0

I'm trying to display a bar chart showing with a count of dates but the bars will not draw and I'm getting a NaN error in the console.

Please can someone tell me where I am going wrong?

var data1=[{budget:1,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"01 February 2017"},
{budget:7,billed:6,fees:1,feeVariance:3,Documents:"URL",date:"01 February 2018"},
{budget:10,billed:1,fees:4,feeVariance:3,Documents:"URL",date:"01 May 2017"},
{budget:14,billed:2,fees:4,feeVariance:2,Documents:"URL",date:"15 May 2017"},
{budget:2,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"02 June 2016"}];

var facts = crossfilter(data1);
var dateDimension = facts.dimension(function(d) { return new Date(d.date); });
var dateGroup = dateDimension.group().reduceCount(function(d){return new Date(d.date);});

var minDate = dateDimension.bottom(1)[0].date;
var maxDate = dateDimension.top(1)[0].date;

dc.barChart("#chart1")
  .width(800)
  .dimension(dateDimension)
  .group(dateGroup)
  .brushOn(false)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months);

dc.renderAll();
Carolyne
  • 13
  • 2

1 Answers1

0

you need to firstly determine the date format so dc.js can understand it as a date rather than simply a string.

So firstly, create a variable to set the date format:

var dateFormat = d3.time.format('%d %B %Y');

then a function to make our date and month fields:

data1.forEach(function(d) {
    d.date = dateFormat.parse(d.date);
    d.month = d3.time.month(d.date);
});

Then change the dimension and group to use d.month

var dateDimension = facts.dimension(function(d) { return d.month; });
var dateGroup = dateDimension.group().reduceCount(function(d){return 
d.month;});

This will group by month and provide a count/total by month also.

Here's the full code:

var dateFormat = d3.time.format('%d %B %Y');

var data1=[{budget:1,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"01 
February 2017"},
{budget:7,billed:6,fees:1,feeVariance:3,Documents:"URL",date:"01 February 2018"},
{budget:10,billed:1,fees:4,feeVariance:3,Documents:"URL",date:"01 May 2017"},
{budget:14,billed:2,fees:4,feeVariance:2,Documents:"URL",date:"15 May 2017"},
{budget:2,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"02 June 2016"}];

var facts = crossfilter(data1);

data1.forEach(function(d) {
d.date = dateFormat.parse(d.date);
d.month = d3.time.month(d.date);
});

var dateDimension = facts.dimension(function(d) { return d.month; });
var dateGroup = dateDimension.group().reduceCount(function(d){return d.month;});

var minDate = dateDimension.bottom(1)[0].date;
var maxDate = dateDimension.top(1)[0].date;

dc.barChart("#chart1")
.width(800)
.dimension(dateDimension)
.group(dateGroup)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.months);

dc.renderAll();

I've added some extra properties to the chart to ensure all the bars are shown correctly:

.gap(2)
.outerPadding(5)
.centerBar(true)
.elasticX(true)
.xAxisPadding(20)

jsfiddle example: jsfiddle

Kevin
  • 136
  • 9