Considerable difference between Firefox and IE displaying plot line chart

Question

Using the same URL, I'm getting a considerable difference displaying a plot line graphic between Firefox and IE.

Left side is Firefox (v 28), right side is IE (v 11).

How is that?

Here is the source:

<div class="row">
    <div id="gaa_cumulative" style="float: left; border: 1px solid #000;"></div>
    <div id="spct_cumulative" style="float: left; border: 1px solid #000;"></div>
</div>  

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script> 
<style>
    svg .tooltip { opacity: 1; } 
</style>


<script type="text/javascript">
    var svg = dimple.newSvg("#gaa_cumulative", 500, 450);
    var gaa_cum_data = [{'Season':'2004-2005','Date':'2005-10-02','GAA':'1.00'},{'Season':'2004-2005','Date':'2005-10-08','GAA':'2.03'},{'Season':'2004-2005','Date':'2005-10-26','GAA':'2.36'},{'Season':'2004-2005','Date':'2005-10-30','GAA':'2.52'},{'Season':'2004-2005','Date':'2005-11-21','GAA':'2.19'},{'Season':'2004-2005','Date':'2005-11-21','GAA':'1.80'},{'Season':'2004-2005','Date':'2005-12-10','GAA':'1.52'},{'Season':'2004-2005','Date':'2005-12-10','GAA':'1.85'},{'Season':'2004-2005','Date':'2005-12-15','GAA':'2.10'},{'Season':'2004-2005','Date':'2005-12-27','GAA':'1.99'},{'Season':'2004-2005','Date':'2006-01-16','GAA':'2.27'},{'Season':'2004-2005','Date':'2007-12-24','GAA':'2.25'},{'Season':'2004-2005','Date':'2008-11-30','GAA':'7.01'},{'Season':'2004-2005','Date':'2008-11-30','GAA':'15.58'},{'Season':'2004-2005','Date':'2008-12-02','GAA':'14.42'},{'Season':'2004-2005','Date':'2008-12-02','GAA':'13.36'},]

    var myChart = new dimple.chart(svg, gaa_cum_data);
    myChart.setBounds(60, 30, 400, 300)
    myChart.addCategoryAxis("x", "Date");
    myChart.addCategoryAxis("y", "GAA");
    myChart.addSeries("Season", dimple.plot.line);
    myChart.addLegend(0, 10, 510, 20, "right");
    myChart.defaultColors = [new dimple.color("#98B094")];
    myChart.draw();
  </script>
<script type="text/javascript">
    var svg = dimple.newSvg("#spct_cumulative", 500, 450);
    var spct_cum_data = [{'Season':'2004-2005','Date':'2005-10-02','SPCT':'0.967'},{'Season':'2004-2005','Date':'2005-10-08','SPCT':'0.927'},{'Season':'2004-2005','Date':'2005-10-26','SPCT':'0.909'},{'Season':'2004-2005','Date':'2005-10-30','SPCT':'0.912'},{'Season':'2004-2005','Date':'2005-11-21','SPCT':'0.921'},{'Season':'2004-2005','Date':'2005-11-21','SPCT':'0.934'},{'Season':'2004-2005','Date':'2005-12-10','SPCT':'0.934'},{'Season':'2004-2005','Date':'2005-12-10','SPCT':'0.921'},{'Season':'2004-2005','Date':'2005-12-15','SPCT':'0.911'},{'Season':'2004-2005','Date':'2005-12-27','SPCT':'0.916'},{'Season':'2004-2005','Date':'2006-01-16','SPCT':'0.908'},{'Season':'2004-2005','Date':'2007-12-24','SPCT':'0.914'},{'Season':'2004-2005','Date':'2008-11-30','SPCT':'0.751'},{'Season':'2004-2005','Date':'2008-11-30','SPCT':'0.464'},{'Season':'2004-2005','Date':'2008-12-02','SPCT':'0.534'},{'Season':'2004-2005','Date':'2008-12-02','SPCT':'0.560'},]

    var myChart = new dimple.chart(svg, spct_cum_data);
    myChart.setBounds(60, 30, 400, 300)
    myChart.addCategoryAxis("x", "Date");
    myChart.addCategoryAxis("y", "SPCT");
    myChart.addSeries("Season", dimple.plot.line);
    myChart.addLegend(0, 10, 510, 20, "right");
    myChart.defaultColors = [new dimple.color("#98B094")];
    myChart.draw();
  </script> 

On a side note, Batman likes Firefox :)

Answer 1

I've taken a look and this does still happen in dimple v2.0. The problem is that if there are categories on the x axis it will sort by their x position only, meaning that where 2 y values share an x value they evaluate to equal in the sort predicate and therefore leave the browser to decide which comes first.

I'd like to blame IE, but this was my fault and I'll put a fix in the next release. In the meantime you can patch your copy by adding this to your code:

dimple._getSeriesSortPredicate = function (chart, series, orderedArray) {
    return function (a, b) {
        var sortValue = 0;
        if (series.x._hasCategories()) {
            sortValue = (dimple._helpers.cx(a, chart, series) - dimple._helpers.cx(b, chart, series));
        } 
        if (sortValue === 0 && series.y._hasCategories()) {
            sortValue = (dimple._helpers.cy(a, chart, series) - dimple._helpers.cy(b, chart, series));
        } 
        if (sortValue === 0 && orderedArray) {
            sortValue = dimple._arrayIndexCompare(orderedArray, a.aggField, b.aggField);
        }
        return sortValue;
    };
};  

You don't need to modify the dimple file, just drop that in above your chart code and it will replace the function used by dimple. Here it is in a fiddle:

http://jsfiddle.net/f8HCR/4/