javascript - Trouble with NVD3 Graph showing x-axis in order of the data in array -

i converting flash graph js nvd3 ( d3 ) based line graph, having difficulty order of x-axis.

i x-axis data display ( current month counting 12mths):

feb, mar, apr, may, jun, jul, aug, sept, oct, nov, dec, jan

but chart library placing jan front , draws line dec on right side jan on left.

i have following code:

<script>    nv.addgraph(function() {  	  	var months = ["jan","jan","feb","mar","apr","may","jun","jul","aug","sept","oct","nov","dec"];  	  	var thisyear = [], lastyear = []  	  	thisyear.push( {x: 2, y: 101034} );    thisyear.push( {x: 3, y: 229948} );    thisyear.push( {x: 4, y: 278940} );    thisyear.push( {x: 5, y: 370409} );    thisyear.push( {x: 6, y: 254532} );    thisyear.push( {x: 7, y: 201229} );    thisyear.push( {x: 8, y: 221323} );    thisyear.push( {x: 9, y: 210640} );    thisyear.push( {x: 10, y: 174958} );    thisyear.push( {x: 11, y: 172434} );    thisyear.push( {x: 12, y: 13527} );    lastyear.push( {x: 1, y: 0} );        lastyear.push( {x: 2, y: 380996} );    lastyear.push( {x: 3, y: 214687} );    lastyear.push( {x: 4, y: 123827} );    lastyear.push( {x: 5, y: 171242} );    lastyear.push( {x: 6, y: 155463} );    lastyear.push( {x: 7, y: 163326} );    lastyear.push( {x: 8, y: 209324} );    lastyear.push( {x: 9, y: 165603} );    lastyear.push( {x: 10, y: 147929} );    lastyear.push( {x: 11, y: 154803} );    lastyear.push( {x: 12, y: 85055} );    lastyear.push( {x: 1, y: 9005} );  	  	var mydata = [      {        values: thisyear,        key: 'this year',        color: '#ff7f0e'      },      {        values: lastyear,        key: 'last year',        color: '#2ca02c'      }    ];  	    var chart = nv.models.linechart()                  .margin({left: 100})                  .useinteractiveguideline(true)                   .showlegend(true)                  .showyaxis(true)                  .showxaxis(true);        chart.xaxis    	.axislabel('month of year')      .tickvalues([1,2,3,4,5,6,7,8,9,10,11,12])      .tickformat(function(d){        return months[d]      });      chart.yaxis     //chart y-axis settings        .axislabel('$ ex gst turnover');            d3.select('#chart svg')    //select <svg> element want render chart in.           .datum(mydata)         //populate <svg> element chart data...        .call(chart);          //finally, render chart!      //update chart when window resizes.    nv.utils.windowresize(function() { chart.update() });    return chart;  });  </script>

and renders graph looks this:

this example of old flash graph:

so question is: how move "jan" right side per order in array?

thanks time , aid. ps. ( if wondering array pushes dynamic server side code )

:)

i managed required output dynamically server code outputting order of months in months js array as:

var months = ["","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec","jan"];

i did looping on graph data , outputting first 3 characters of month string name. position 0 in array "" there no month 0 in calendar.

and in push lines instead of x = {monthofyear} changed x = {loop index} data ordered 1 - 12. when referenced months array "jan" in 12th position , resulted in "jan" being placed in far right side.

thanks looked question.