How to change x-axis label in Stacked Area Chart NVD3.js?

Question

I am using Stacked Area Chart from here. I would like to change the x-axis label based on the data. So here is the existing chart:

And here is the existing code:

d3.json('data5.json', function(data){       
nv.addGraph(function() {
     chart = nv.models.stackedAreaChart()
        .useInteractiveGuideline(true)
        .x(function(d) { return d[0] })
        .y(function(d) { return d[1] })
        .controlLabels({stacked: "Stacked"})
        .duration(300);

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

    chart.legend.vers('furious');

    d3.select('#chart1')
        .datum(data)
        .transition().duration(1000)
        .call(chart)
        .each('start', function() {
            setTimeout(function() {
                d3.selectAll('#chart1 *').each(function() {
                    if(this.__transition__)
                        this.__transition__.duration = 1;
                })
            }, 0)
        });

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

They are using data in .json:

{ 
  "key" : "North America" , 
  "values" : [ [ 1025409600000 , 23.041422681023] , [ 1028088000000 , 19.854291255832],
   [ 1030766400000 , 21.02286281168], 
   [ 1033358400000 , 22.093608385173],
   [ 1036040400000 , 25.108079299458];
}

I want to change the label with date range in my data. So I replace the existing data with my own data. Here is my data:

My question is how to change the x-axis label based on the data? And how does my data look like? Thank you any comment!

I think it is different, since it is using different meta data — razin kac, Dec 20 '15 at 05:40
I have tried http://stackoverflow.com/questions/20400292/stacked-bar-chart-labels-d3?rq=1 and http://stackoverflow.com/questions/21190421/stacked-area-chart-in-nvd3js-x-axis-overflow?rq=1 but it cannot work. Sorry, I am going no where — razin kac, Dec 20 '15 at 05:46
Could you edit the question to show exactly what you've tried please? — Lars Kotthoff, Dec 20 '15 at 05:47
the question is not clear the x axis tiicks are in the format `d3.time.format('%x')` you want a different format? or is it something else. — Cyril Cherian, Dec 20 '15 at 07:16
sorry kotthoff and cyril for late response, please take a look with my recent edit — razin kac, Dec 20 '15 at 07:40
I think the format is not so important as long I can change the date — razin kac, Dec 20 '15 at 12:11

How to change x-axis label in Stacked Area Chart NVD3.js?

0 Answers0