NS_ERROR_FAILURE in Firefox when drawing dimple.js chart after jquery

Question

I'm triing to draw a dimple.js svg bar chart, which is nested in jquery-ui tabs and accordeon, which I use for my website layout and I get pretty desperate. Everything works fine in Chrome and IE, but FF keeps throwing NS_ERROR_FAILURE exception. Here is the code snippet:

function drawDimpleChart(){
  d3.json("synkon-dat.php", function (data) {
    var svg = dimple.newSvg("#graph-txttypy-d3", 590, 400);     
    var myChart = new dimple.chart(svg, data); 
    myChart.setBounds(100, 70, 480, 150);
    myChart.addPctAxis("x", "ratio");  
    myChart.addCategoryAxis("y", "kategorie");  
    myChart.addSeries("varianta", dimple.plot.bar);       
    myChart.addLegend(200, 10, 380, 20, "right"); 
    myChart.draw();
  }); 
}

$(document).ready(function() { 
  $("#tabs").tabs();
  $(".accordion").accordion({ active: 'none', clearStyle: true });
  drawDimpleChart();
});

I've realized that the issue is related to the order in which jquery and the drawing function are executed. When I call jquery in the callback after the .draw method, everything works, but I realy need the tabs to show before all the data comes back (this can take some time).

Please help, what do I miss?

Gati

Answer 1

Here's a jsFiddle to replicate the problem based on the simple example from the dimple home page (in this example chart is on tab 2):

function drawDimpleChart(){
    var svg = dimple.newSvg("#tabs-2", 800, 600);
    var data = [
        { "Word":"Hello", "Awesomeness":2000 },
        { "Word":"World", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
}

$(document).ready(function() { 
    $("#tabs").tabs();
    drawDimpleChart();
});

http://jsfiddle.net/VGwGc/5/

The problem is related to the issue here:

https://github.com/PMSI-AlignAlytics/dimple/issues/34

Dimple does a lot of measuring on the SVG and this isn't possible when the div (and therefore the svg) is hidden. In browsers other than firefox, label alignment goes wrong, but firefox throws the NS_ERROR_FAILURE error.

The solution is to draw to a visible div and immediately move it into the hidden div when drawing completes. You can see it working in this fiddle:

function drawDimpleChart(){
    var svg = dimple.newSvg("#chartTab", 600, 400);
    var data = [
        { "Word":"Hello", "Awesomeness":2000 },
        { "Word":"World", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
    $("#chartTab").appendTo("#tabs-2");
}

$(document).ready(function() { 
    $("#tabs").tabs();
    drawDimpleChart();
});

http://jsfiddle.net/VGwGc/4/

I hope this helps.

John

Felixfeliza

Hi John, many thanks for the solution, it works now! Solving this made your library very valuable for our academic project. Best regards, Martin – Gati

I had the same problem and solved by this solution of hiding elements after loading the SVG – Amiraamis

This is a great answer, explaining what's going on. The key is that firefox doesn't like hidden SVG elements when measuring. So it applied to a completely different problem I was having: I was messing with the d3-annotations library from Susie Lu, and had a hover-show effect. Firefox was confused with display: none but visibility: hidden worked just fine. – Ditchwater

Answer 2

I had the same problem with a hidden tab that threw errors in FF. To solve the chart rendering problems in Firefox I (1) delayed the call to the draw function (e.g., setTimeout(chart.draw(), 2000);) and (2) switched to pixel dimensions (e.g., chart.setBounds (10,10,90,90))) to solve another issue in Firefox which prevented the legend from showing properly.

Jato