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

Question

I am converting a flash graph to a js NVD3 ( D3 ) based line graph, but am having difficulty with the order of the x-axis.

I would like the x-axis data to display as ( current month counting back 12mths):

Feb, Mar, Apr, May, Jun, Jul, Aug, Sept, Oct, Nov, Dec, Jan

but the chart library is placing Jan to the front and then draws a line from Dec on the right side to jan on the left.

I have the 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 the <svg> element you want to render the chart in.   
      .datum(myData)         //Populate the <svg> element with chart data...
      .call(chart);          //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(function() { chart.update() });
  return chart;
});
</script>

And it renders a graph that looks like this:

This is an example of the old flash graph:

So my question is: How do I move "Jan" to the right side as per the order in the array?

Thanks for your time and aid. PS. ( if anyone is wondering all the array pushes is dynamic from server side code )

:)

Have you tried formatting your date as a date, I think this would help overcome this issue. — user1614080
not as yet as the existing query from the flash graph outputs the month as an integer only, I'll look at the month as a date and try it — Chris Goder

Chris Goder Chris Goder · Accepted Answer · 2016-01-06T21:30:56

I managed to get the required output by dynamically with server code outputting the order of the months in the months js array as:

var months = ["","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan"];

I did this by looping over the graph data and outputting the first 3 characters of the month as a string name. Position 0 in the array is "" as there is no month 0 in the calendar.

and then in the push lines instead of x = {monthOfYear} i changed it to x = {loop index} so then the data was ordered from 1 - 12. This then when referenced the months array "Jan" was in the 12th position and resulted in "Jan" being placed in the far right side.

Thanks to those that looked into the question.

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

1 Answers