Create Graph In Nvd3.js With Proper Values

I am using nvd3.js first time in my php code. I want to show a graph count against date for particular user. I want to show the date horizontally and count vertically. But I did no

Solution 1:

Looking for something like this ? And here is a working version of the cde

nv.addGraph(function () {
    var chart = nv.models.lineChart().margin({
        top: 30,
        right: 20,
        bottom: 50,
        left: 45
    }).showLegend(true).tooltipContent(function (key, y, e, graph) {
        return '<h3>' + key + '</h3>' + '<p>' + e + '% at ' + y + '</p>'
    });

    chart.xAxis.tickFormat(function (d) {
        return d3.time.format('%x')(new Date(d))
    });

    d3.select('#lineChart svg')
        .datum(data)
        .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});

data = [{
    "values": [{
        "x": 1025409600000 ,
            "y": 2
    }, {
        "x": 1028088000000 ,
            "y": 4
    }, {
        "x": 1030766400000 ,
            "y": 1
    }, {
        "x": 1033358400000 ,
            "y": 3
    }, {
        "x": 1036040400000  ,
            "y": 0
    }, {
        "x": 1038632400000  ,
            "y": 3
    }],
        "key": "Sine Wave",
}]

Hope it helps.

Solution 2:

You have to define the scale of the axis : it's not computed from you data, but you can use helper function for d3, like d3.max ...

var xScale = d3.scale.linear()
                 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                 .range([0, w]);

c.f. http://alignedleft.com/tutorials/d3/scales

Then, you can add the scale definition to the axis:

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

c.f. http://alignedleft.com/tutorials/d3/axes