NVD3 X axis incorrect ordering (dates)

Question

I'm trying to visualize 2 series but when I visualize them together, the dates don't go in sequential order anymore.

Here is the fiddle: http://jsfiddle.net/hohenheim/6R7mu/21/ Notice the weird x-axis.

Is there a way to fix the x axis on nvd3?

The data looks like this:

data1 = [{
      "date": 1396828800,
      "impressions": 49145385
  }, {
      "date": 1396915200,
      "impressions": 46704447
  } ....

Answer 1

The NVD3 "multiBarChart" uses an ordinal (category) scale, so it will only display the x-values you give it, in the order in which they are added to the scale. Because your two series only partially overlap on the x axis that's causing problems.

Unlike other NVD3 chart types, the multiBarChart doesn't give you the option of setting your own scale -- it needs to use an ordinal scale in order to generate even widths for the bars. However, you can set the x domain (the list of categories to use for each bar), by calling chart.xDomain(arrayOfXValues).

The array will need to be an ordered array of Date values that spans your data. In order to generate it, you'll need the d3 time intervals range functions. You might also need the d3.extent function to find your max and min values.