Dygraph in Leaflet popup

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>graph</p>
<div id="graphdiv" style="width:200px; height:100px;"></div>
<p>map</p>
<div id="mapid"></div>

CSS

#mapid { width: 400px; height: 300px; }

JavaScript

//graph code
gSimple = new Dygraph(
    // containing div
    document.getElementById("graphdiv"),
    // CSV or path to a CSV file.
    //"Date,Depth\n" +
    "2014-06-12,-10.57\n" +  "2014-06-13,-10.74\n" +  "2014-06-14,-11.57\n" +  "2014-06-15,-11.74\n" +    "2014-06-24,-16.86\n",
    {
    	//valueRange: [-180,-179],
      showRangeSelector : false,
      period      : "p6d", // past 1000 days
      date_window : 2,       
    	labels: ['Date', 'Value']
    }
  );

//map code
var mymap = L.map('mapid').setView([51.505, -0.09], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 10,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);
	
	var marker = L.marker([51.5, -0.09]).addTo(mymap);
  var popupStatic = '<p style="height:200px; width:200px">static content</p>';
	var popupDynamic = '<div id="graphdiv" style="width:200px; height:100px;"></div>';

  marker.bindPopup(popupDynamic);