1<html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 7 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 8 9 <style type="text/css"> 10 iframe { 11 width: 900px; 12 height: 600px; 13 padding: 0; 14 border: 2px solid #ddd; 15 overflow: hidden; 16 position: relative; 17 } 18 #controls { 19 background: #ccc; 20 opacity: 0.5; 21 padding: 5px 8px; 22 font-size: 14px; 23 font-weight: bold; 24 font-family: Verdana; 25 margin-bottom: 10px; 26 } 27 </style> 28 29 <script type="text/javascript"> 30 function setType( type ) { 31 $( '#iframe' ).attr( 'src', type ); 32 } 33 34 function reload() { 35 setType( $( '#type' ).val() + "?" + Number( new Date() ) ); 36 } 37 </script> 38 </head> 39 <body> 40 <div id="controls"> 41 <select id="type" onchange="setType(this.options[this.selectedIndex].value);"> 42 <option value="pie1.html" selected="selected">Pie #1 (Simple w/ legend)</option> 43 <option value="pie2.html"/>Pie #2 (3D w/ legend)</option> 44 <option value="pie3.html"/>Pie #3 (w/ ext. legend left)</option> 45 <option value="pie4.html"/>Pie #4 Multiple instances</option> 46 <option value="serial1.html">Serial #1 (Area)</option> 47 <option value="serial2.html">Serial #2 (Bar & Line)</option> 48 <option value="serial3.html">Serial #3 (Line w/ zoom)</option> 49 <option value="xy.html">XY</option> 50 <option value="radar.html">Radar</option> 51 <option value="gauge.html">Gauge</option> 52 <option value="funnel.html">Funnel</option> 53 <option value="stock.html">Stock</option> 54 <option value="map.html">Map</option> 55 <option value="gantt.html">Gantt</option> 56 </select> 57 <input type="button" value="reload" onclick="reload();" /> 58 </div> 59 60 <iframe id="iframe" src="pie1.html" frameborder="0"></iframe> 61 </body> 62</html>