0

I'm new in using nvd3.js and I'm having trouble with x-axis displayed timestamp. Somehow nvd3.js skip some date from received timestamp data. Just like in the picture, nvd3 skip date 11/16/2015.

var chart;
nv.addGraph(function() {
    chart = nv.models.stackedAreaChart()
          .margin({
            left: 70,
            bottom: 70
          })
          .x(function(d) { return d[0] })   
          .y(function(d) { return d[1] })   
          .useInteractiveGuideline(false)   
          .rightAlignYAxis(true)
          .showControls(true)       
          .clipEdge(true)
          .options({
                transitionDuration: 500,    
                useInteractiveGuideline: false
            });
    chart.xAxis
        .tickFormat(function (d) {
            return d3.time.format('%x')(new Date(d))
        });
    chart.yAxis.tickFormat(d3.format(',.0f'));
    chart.color(['rgb(63, 127, 191)', 'rgba(63, 63, 191, 0.9)', 'rgba(63, 63, 191, 0.7)', 'rgba(127, 63, 191, 0.7)', 'rgba(63, 191, 191, 0.9)', 'rgba(71, 177, 183, 0.68)']);

    chart.legend.vers('furious');

    d3.select('#chart1')
        .datum(histcatexplong)
        .transition().duration(1000)
        .call(chart)


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

NVD3 skip a date

I have tried this: d3.js nvd3 date on x axis: only some dates are show but not working in my case.

These are the data I pass: 

var histcatexplong = [
    {
        "key" : "Visit" ,
        "values" : [[1447804800000, 551], [1447718400000, 566], [1447632000000, 525], [1447545600000, 454], [1447459200000, 444], [1447372800000, 501], [1447286400000, 473], [1447200000000, 562]]
    } ,
    {
        "key" : "Search" ,
        "values" : [[1447804800000, 425], [1447718400000, 432], [1447632000000, 410], [1447545600000, 346], [1447459200000, 345], [1447372800000, 392], [1447286400000, 396], [1447200000000, 423]]
    } ,
    {
        "key" : "Redirected" ,
        "values" : [[1447804800000, 104], [1447718400000, 103], [1447632000000, 975], [1447545600000, 832], [1447459200000, 840], [1447372800000, 940], [1447286400000, 944], [1447200000000, 103]]
    } ,
    {
        "key" : "Booking" ,
        "values" : [[1447804800000, 41], [1447718400000, 41], [1447632000000, 37], [1447545600000, 29], [1447459200000, 32], [1447372800000, 44], [1447286400000, 37], [1447200000000, 42]]
    } ,
    {
        "key" : "Payment selected" ,
        "values" : [[1447804800000, 31], [1447718400000, 32], [1447632000000, 30], [1447545600000, 23], [1447459200000, 26], [1447372800000, 29], [1447286400000, 30], [1447200000000, 32]]
    } ,
    {
        "key" : "Issued" ,
        "values" : [[1447804800000, 25], [1447718400000, 31], [1447632000000, 30], [1447545600000, 18], [1447459200000, 21], [1447372800000, 29], [1447286400000, 30], [1447200000000, 26]]
    }
];
Community
  • 1
  • 1
  • Can you update the question with the data you pass into the chart. Are you sure you are passing all the dates into the chart? – shabeer90 Nov 20 '15 at 10:07
  • @shabeer90 I'm sure all dates already passed into the chart. I've updated my question to include the data too. –  Nov 23 '15 at 04:55

1 Answers1

0

You can always add your x values with function tickValues() in xAxis? With this, you can pass array of values that should be displayed as x axis labels. Something like this: 

var x_labels = [1136005200000, ... , 1138683600000];

chart.xAxis
    .tickValues(x_labels)

Just don't forget to format it!

check the doc: http://nvd3-community.github.io/nvd3/examples/documentation.html#axis

user3623332
  • 81
  • 3