How do I correct the ordering of D3 Dimple Category Axis?

Question

I have an original data set that looks as follows...

  var dataSet3 = [
    { "Month": "January", "Date": "20150101", "Unit Sales": "3000", "Revenue": "2000" },
    //{ "Month": "January", "Date": "20150103", "Unit Sales": "3000", "Revenue": "2000" },
    { "Month": "April", "Date": "20150403", "Unit Sales": "500", "Revenue": "6000" },
    //{ "Month": "April", "Date": "20150403", "Unit Sales": "500", "Revenue": "6000" },
    { "Month": "May", "Date": "20150530", "Unit Sales": "3000", "Revenue": "2000" },
    { "Month": "June", "Date": "20150620", "Unit Sales": "1500", "Revenue": "39000" },
    { "Month": "July", "Date": "20150706", "Unit Sales": "2500", "Revenue": "6000" },
    { "Month": "February", "Date": "20150205", "Unit Sales": "2500", "Revenue": "5000" },
    { "Month": "March", "Date": "20150307", "Unit Sales": "1500", "Revenue": "6000" },
    { "Month": "August", "Date": "20150816", "Unit Sales": "2500", "Revenue": "20000" },
    { "Month": "September", "Date": "20150907", "Unit Sales": "1500", "Revenue": "6000" },
    { "Month": "October", "Date": "20151009", "Unit Sales": "500", "Revenue": "9000" },
    { "Month": "November", "Date": "20151120", "Unit Sales": "50", "Revenue": "15000" },
    { "Month": "December", "Date": "20151222", "Unit Sales": "2000", "Revenue": "7000" }
  ];

My HTML looks as follows...

<div class="div_RootBody" id="root_div">
  <h3>Example 4</h3>
  <div id="chart4"></div>
</div>

My Dimple charting code is:

  function draw2(selectString, data){

    //var svg2 = dimple.newSvg("#chart2", 690, 420); // width x height
    var svg2 = dimple.newSvg(selectString, 690, 420); // width x height
    var myChart = new dimple.chart(svg2);
    myChart.setBounds(60, 30, 505, 305);
    var x = myChart.addCategoryAxis("x", "Month");
    x.addOrderRule("Date");

    var y1 = myChart.addMeasureAxis("y", "Unit Sales");
    var y2 = myChart.addMeasureAxis("y", "Revenue");

    var line1 = myChart.addSeries("Sales", dimple.plot.line, [x,y1]);
    var line2 = myChart.addSeries("Gross Revenue", dimple.plot.line, [x,y2]);

    //line1.data = dataSet1;
    line1.data = data;
    line1.plot=dimple.plot.line;
    //line2.data = dataSet1;
    line2.data = data;
    line2.plot=dimple.plot.line;

    // Assign specific colors to lines
    myChart.assignColor("Sales", "blue");
    myChart.assignColor("Gross Revenue", "green");
    line1.lineMarkers = true;
    line2.lineMarkers = true;

    myChart.addLegend(180, 10, 260, 20, "right", line1);
    myChart.addLegend(180, 10, 360, 20, "right", line2);

    myChart.draw();

  };

And, I call the Dimple charting code using the line...

draw2("#chart4", dataSet3);

When I use the data in its original form, with the 2nd and 4th objects commented out, the X axis is ordered correctly... from January through to December and looks as follows...

However, if I uncomment the 2nd and 4th objects and run the same code, you'll notice that while the Y magnitude values are correct (they are summed), the months January and April are moved to the end of the X axis, as follows...

My Question: Why does this happen when I have multiple data entries for these months and what is the best way to correct it so that January and April are ordered the same way they are in the first chart (January, February, March, April, May, etc.)?

Answer 1

The reason is that you have specified this ordering rule:

x.addOrderRule("Date");

but the X-axis values "January" and "April" have two different dates associated with them.

Instead, since it is only months we are talking about, you could hard code the ordering to months:

x.addOrderRule(["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]);

This would also have the benefit of ensuring that all months appear on the axis even if there is no data for that month.

Caveat: I have not tested this, or even used Dimple before, but their documentation describes this.