dygraph doesnt print the data in hidden div elements

Question

I've been trying to use dygraph (http://dygraphs.com/) for visualization purpose in my website and it works fine with all the features. The website that I am trying to build is a dynamic one and at first I tried printing it on to a visible div element and it was fine.. Then I tried to introduce a div element which can be expanded and collapsed on click. so if I tried to print the graph with the div collapsed, it will not work, only when it is expanded, the graph gets printed.. I am adding a jsfiddle link to show my issue..

http://jsfiddle.net/dTUQC/2/

What could be the reason for this issue???

  $("#chartdiv").css({"height":"160px"});
g = new Dygraph(document.getElementById("chartdiv"), input, {
    width : 500,
    includeZero : true,
    animatedZooms : true,
    drawXGrid : false,
    plotter : barChartPlotter
});
}

Answer 1

The reason behind that is, since your are using the slideToggle() function ,the display property is saved and restored as needed. the style of div chartdiv is display : none when closed... the bargraph couldn't get rendereded in that dom element. and whn it is open the style changes to display:block so this time the graph finds the div chartdiv.

here is the fiddle..

http://jsfiddle.net/dTUQC/3/

check the console.. where i have displayed the style...if i change the div chartdiv to display:block .. the graph is rendered even whn the div is in closed state..

UPDATED

OR use .show()..

http://jsfiddle.net/dTUQC/9/ with one button