CODEWITHSUNDEEP
javascriptd3.jscrossfilterdc.js
Sergi Mansilla
Sergi Mansilla

Reputation: 12793

Wrong labels in x-axis when using time-series bar chart

I am trying to render a time series bar chart width dc, crossfilter and d3. The JSON data goes from 1989 to 2010 and looks like this:

[{
    year: 1999,
    events: 40
},{
    year: 1996,
    events: 25
},
...
]

In order to render it I have the following code:

var volumeChart = dc.barChart("#yearly-chart");
var ndx = crossfilter(data);
var yearDim = ndx.dimension(function(d) {
  return d.year;
});

var countPerYear = yearDim.group().reduceSum(function(d) {return d.events;});

volumeChart
    .width(700)
    .height(200)
    .margins({top: 50, right: 50, bottom: 20, left: 40})
    .dimension(yearDim)
    .group(countPerYear2)
    .elasticY(true)
    .x(d3.time.scale().domain([1989, 2011]))

volumeChart.render()

This kind of works, but the year labels in the X axis are strangely messed up:

Graph with wrong X axis-labels

If I use Date objects to determine the x axis like:

x(d3.time.scale().domain([new Date(1989, 1, 1), new Date(2010, 12, 31)]))

I get no data in the graph, although that looks like it should be the proper way to do so. What am I doing wrong?

Upvotes: 0

Views: 425

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

Date objects is indeed the way to go, but you need to parse the dates in your JSON into such objects as well. So wherever you're loading the data, also parse the dates.

Upvotes: 1

Related Questions