nvd3 forceX to display months

Question

I need your help,

I can't display months in the x-axis line In the X Axis i would like to display months(['Jan','Fev','Mars','Avr','Mai','Juin','Juil','Aout','Sept','Oct','Nov','Dec']) but It display 0 to 12.

This is my code:

nv.addGraph(function() {
        var chart = nv.models.lineChart();

        chart.xAxis
                .axisLabel('Mois')
                .tickFormat(d3.format(',`enter code here`r'));

        chart.yAxis
                .axisLabel('Pourcentage')
                ;
        chart.forceY([0, 100]);
        d3.select('#chart svg')
                .datum(getPercent())
                .transition().duration(500)
                .call(chart);

        nv.utils.windowResize(function() {
            d3.select('#chart svg').call(chart)
        });

        return chart;
    });

function getPercent() {
        var habitation = [],
                voiture = [],
                seminaire = [],
                months = [Jan','Fev','Mars','Avr','Mai','Juin','Juil','Aout','Sept','Oct','Nov','Dec'];
        $.each(months,function(i,element){
            habitation.push({x: i, y: Math.ceil((54 / 12) * i)});
            voiture.push({x: i, y: Math.ceil((18 / 12) * i)});
            seminaire.push({x: i, y: Math.ceil((10 / 12) * i)});
        });

        return [
            {
                values: habitation,
                key: 'Echéance habitation payée',
                color: '#2E3FD3'
            },
            {
                values: voiture,
                key: 'Echéance voiture payée',
                color: '#3CD32E'
            },
            {
                values: seminaire,
                key: 'Séminaire remboursé',
                color: '#C40B18'
            }
        ];
    }

[This question](http://stackoverflow.com/questions/18072721/formating-the-date-in-nvd3-js) should help. — Lars Kotthoff, Feb 03 '14 at 17:03

score 2 · Accepted Answer · edited May 23 '17 at 11:59

2

Try this code :

chart.xAxis.tickFormat(function (d) {
    // %b - abbreviated month name.
    return d3.time.format('%b')(new Date(d))
});

If you need more information on farmatting date/time read here

To show all the months you can use : chart.xAxis.tickValues(['Jan','Fev','Mars','Avr','Mai','Juin','Juil','Aout','Sept','Oct','Nov','Dec'])

A little more reading info on axis here

UPDATE

By looking at your code I think the problem is with your data. You do not seem to be passing the date. If you print index in you tickFormat you will get a set of random number from 0-12, so it will not work with the d3 Date function.

I have made a few changes to your code here . For the date to work correctly make sure send a date, currently I have used a unix timestamp.

Hope it helps

edited May 23 '17 at 11:59

Community

1
1

answered Feb 04 '14 at 09:15

shabeer90

5,161
4
47
65

Thanks for your help, I solved the problem with this code: months = ['0','Jan','Fev','Mars','Avr','Mai','Juin','Juil','Aout','Sept','Oct','Nov','Dec']; //I would like that the x-Axix line start with 0. chart.xAxis .axisLabel('Mois') .tickFormat(function(index) { return months[index]; }); But my problem now that I can't show all months, It just display (Fev, Avr,Juin, Aout, Oct, Dc). Any Idea ? – user3248550 Feb 04 '14 at 10:26
@user3248550 - Its better to use the inbuilt feature to get the date month. Its showing only selected months baybe cuz it only contains data for that particular dates. I have updated my answer to show all the months value. – shabeer90 Feb 04 '14 at 11:36
this is my code on jsfiddle...It doesn't work Or I can't understand your suggestion well. Can you give me a complete script. This is my one. [Personal example](http://jsfiddle.net/Othmen/bbSn2/).Thanks – user3248550 Feb 04 '14 at 15:50

nvd3 forceX to display months

1 Answers1