Inject dygraph content into jquery UI accordion does not show

Question

I am creating grids of graphs using the dygraphs library and injecting them in an accordion element using the below code. The issue comes from the accordion : if you comment the accordion part out in the jsFiddle (adjusting the name of the div to inject code into), the graphs do show up.

The jsFiddle here .

the html :

<div id="theAccordion">
</div>

the javascript :

function createGraph(destination) {
  var g = new Dygraph(
    document.getElementById(destination),
    [[0,1],[1,2],[2,3],[3,4]],
    {
    labels: ["x","y"],
  strokeWidth: 0.0,
  drawPoints:true
 });
}

$(function() { 

var accordionHtml = "";
accordionHtml += "<h3 id='accordion-h3'>Global</h4>";
accordionHtml += "<div id='accordion-1'></div>";

$("#theAccordion").html(accordionHtml);
$("#theAccordion").accordion({
collapsible: true,
    autoHeight: true,
    active: false,
    heightStyle: "content"
})

var tableHtml = "";
tableHtml+= "<table><tr><td><div id='graph0'></div></td><td><div id='graph1'></div></td></tr></table>"
$("#accordion-1").html(tableHtml);
for (var i=0;i<2;i++) {
  createGraph("graph"+i);
}
});

All help welcome !

Answer 1

Dygraph works by drawing on an HTML5 canvas. If you inspect the inner divs of the collapsed element, that canvas has a width and height of 0 when the page first loads. That probably happens because the accordion is collapsed initially. The element resizes itself to fill its parent container, but since the container is empty it doesn't know how big to make itself. This is further supported by the fact that if the window is resized at all when the accordion is opened, the graphs load.

That being said, Dygraph doesn't seem to have a method to trigger a DOM refresh. One of its functions ( updateOptions ) might be able to do that but that would be a bit of a hack.

Aside from that function, there are two possible simple fixes I've identified:

1. If it's possible to have the accordion opened when the page loads, that seems to fix the issue. You can do that by setting active = 0 in the call to accordion .

2. If it's possible to set the width and height manually (in pixels), that works as well:

(extra space since the code renderer doesn't like being right after a numbered list)

{
  labels: ["x","y"],
  strokeWidth: 0.0,
  drawPoints:true,
  height: 320,
  width: 480
}