Dygraph not visible on jquery mobile

Wondering if anyone has been able to use the Dygraph in conjunction with a jquery mobile. Say I define the following page:

<html>
  <head>
    <title>Testing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="/js/dygraph-combined.js"></script>
  </head>
  <body>
    <div class="page" data-role="page">
      <div class="header" data-role="header">
        <h1>Header</h1>
      </div>
      <div class="ui-content" data-role="main">
        <div id="graph" style="border:1px solid"></div>
      </div>
      <div class="footer" data-role="footer">
        <h1>Footer</h1>
      </div>
    </div>
  </body>
</html>
<script type='text/javascript'>
  //<![CDATA[
    new Dygraph(document.getElementById("graph"), //"http://localhost:8081/twenty20/scores");
        "Date,Temperature\n" +
            "2008-05-07,75\n" +
            "2008-05-08,70\n" +
            "2008-05-09,80\n");

  //]]>
</script>

The graph does not get displayed. All I see is a blank div. But if I replace the body with just

 <body>
    <div id="graph"></div>
  </body>

This works fine.

Could it be to do with the timing of when I create my Dygraph object?

Solution

For jQuery Mobile you should use their documented page structure and the events they provide for when the page is ready:

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>Main Page</h1>
    </div> 
    <div role="main" class="ui-content" >
        <div id="graph"></div>
    </div>
</div>

Use CSS to set the graph size:

#graph { height: 300px; }

In JavaScript, it seems that pagecreate, pagebeforeshow do not work for the dygraphs, so you can use pageshow or another event that comes after the page is rendered:

var g1;
$(document).on("pageshow", "#page1", function(){
    if (!g1){
        g1 = new Dygraph(document.getElementById("graph"),         
            "Date,Temperature\n" +
            "2008-05-07,75\n" +
            "2008-05-08,70\n" +
            "2008-05-09,80\n");       
    }
});

Here is a DEMO