nvd3 chart issue with time on x axis

Question

I need to graph a sales data in a chart, and have chosen nvd3.js to do that. Here is the snippet of code for my chart: var chart;

nv.addGraph(function () {
    chart = nv.models.lineChart()
        .options({
        margin: {
            left: 100,
            bottom: 100
        },
        x: function (d, i) {
            return i
        },
        showXAxis: true,
        showYAxis: true,
        transitionDuration: 250
    });

    chart.xAxis.axisLabel("Date")
        .tickFormat(function (d) {
        return d3.time.format('%B %d, %Y')(new Date(d));
    });

    chart.yAxis.axisLabel("Dollars $")
        .tickFormat(d3.format(',.2f'));

    d3.select('#chart1 svg')
        .datum(salesdata())
        .call(chart);



    //TODO: Figure out a good way to do this automatically
    nv.utils.windowResize(chart.update);
    //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });

    chart.dispatch.on('stateChange', function (e) {
        nv.log('New State:', JSON.stringify(e));
    });

    return chart;
});


function salesdata() {
    var pin = [],
        product = [],
        service = [],
        fee = [],
        repair = [],
        total = [],
        sales = {
            "February 20, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 160.00,
                "pins": 0,
                "total": 160.00
            },
            "January 22, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 12.00,
                "total": 12.00
            },
            "January 07, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 2496.95,
                "total": 2496.95
            },
            "January 08, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 3124.95,
                "total": 3124.95
            },
            "January 11, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 961.10,
                "total": 961.10
            },
            "January 09, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 2094.50,
                "total": 2094.50
            },
            "February 18, 2014": {
                "repairs": 410.00,
                "services": 360.00,
                "products": 0,
                "fees": 270.00,
                "pins": 69.95,
                "total": 1109.95
            },
            "January 13, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 1229.05,
                "total": 1229.05
            },
            "January 10, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 3544.45,
                "total": 3544.45
            },
            "January 06, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 3825.55,
                "total": 3825.55
            }
        };

    for (i in sales) {
        pin.push({
            x: i,
            y: sales[i].pins
        });
        product.push({
            x: i,
            y: sales[i].products
        });
        service.push({
            x: i,
            y: sales[i].services
        });
        fee.push({
            x: i,
            y: sales[i].fees
        });
        total.push({
            x: i,
            y: sales[i].total
        });
        repair.push({
            x: i,
            y: sales[i].repairs
        });
    };

    return [{
        values: total,
        key: "Total",
        color: "#abcdef"
    }, {
        values: pin,
        key: "PINs",
        color: "#ff7f0e"
    }, {
        values: product,
        key: "Products",
        color: "#ccdd33"
    }, {
        values: fee,
        key: "Fees",
        color: "#2222ff"
    }, {
        values: service,
        key: "Services",
        color: "#667711"
    }, {
        values: repair,
        key: "Repairs",
        color: "#eeccff"
    }];
}

I chose to make a chart in a simple svg element, like this:

<div id="chart1" >
    <svg style="height: 500px;"></svg>
</div>

Unfortunately, something seems wrong with the dates in the x-axis, and the chart looks like this

I have tried numerous solutions I found via googling (like this), experimented with Date function and some formatters, but can't seem to isolate what is causing the dates to start from the wrong date.

Does anyone have idea what is the cause of this?

Thanks

Answer 1

You need to parse the date strings into Date objects:

var parser = d3.time.format("%B %d, %Y").parse;

...
    pin.push({
        x: parser(i),
        y: sales[i].pins
    });
...