lineChart xAxis wrong date

Question

why my lineChart show the month in the xAxis instead of sunday?

Thanks for help =)

Here is my code:

var hitslineChart = dc.lineChart("#chart-line-hitsperday");

var data = [
        {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
        {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
        {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
        {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
        {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
        {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
        ];

var ndx = crossfilter(data);
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
    d.date = Date.parse(d.date);
    d.total= d.http_404+d.http_200+d.http_302;
});

var dateDim = ndx.dimension(function(d) {return d.date;});
var hits = dateDim.group().reduceSum(function(d) {return d.total;});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;

hitslineChart
    .width(500).height(200)
    .dimension(dateDim)
    .group(hits)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .xAxis().ticks(5)
    .yAxisLabel("Hits per day");

dc.renderAll();![the result][1]

the result on the xAxis is : Thu27-Fri28-Sat29-Dec30-Mon31-2013-Wed02-Thu03-Fri04-Sat05-Jan06...

Answer 1

1) You will want to parse your incoming data using the date formatter:

d.date = Date.parse(d.date); \\ Old
d.date = parseDate.parse(d.date); \\ New

This will explicitly match the format of your input data.

2) If you want the data to be grouped by days, you will need to specify that in your dimension. The d3.time.day helper method will set the time to 00:00:00 on the data supplied. This makes the data group together like you want:

var dateDim = ndx.dimension(function(d) {return d.date;}); \\old
var dateDim = ndx.dimension(function(d) {return d3.time.day(d.date);}); \\ new

It's not clear whether you want a point per day (Jan 1, Jan 2, Jan 3, etc) or a point per day of the week (Sun, Mon, Tues). The d3.time.day method groups the date by the calendar day.

3) You can specify the tick format using the following method:

.xAxis().tickFormat(function(v) {return displayDate(v)});

Details about time formatting is available at https://github.com/mbostock/d3/wiki/Time-Formatting.

Here is a jsfiddle that adapts your code to display day of week on the x-axis: http://jsfiddle.net/djmartin_umich/6V4Ey/

I hope this helps! -DJ