| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> |
| 5 | <title>numeric axis</title> |
| 6 | <!--[if IE]> |
| 7 | <script type="text/javascript" src="../excanvas.js"></script> |
| 8 | <![endif]--> |
| 9 | <script type="text/javascript" src="../strftime/strftime-min.js"></script> |
| 10 | <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script> |
| 11 | <script type="text/javascript" src="../dygraph-canvas.js"></script> |
| 12 | <script type="text/javascript" src="../dygraph.js"></script> |
| 13 | <script type="text/javascript" src="http://www.google.com/jsapi"></script> |
| 14 | </head> |
| 15 | <body> |
| 16 | <p>CSV data source:</p> |
| 17 | <div id="div_g" style="width:600px; height:300px;"></div> |
| 18 | |
| 19 | <p>GViz data source:</p> |
| 20 | <div id="gviz" style="width:600px; height:300px;"></div> |
| 21 | |
| 22 | <script type="text/javascript"> |
| 23 | g = new Dygraph( |
| 24 | document.getElementById("div_g"), |
| 25 | function() { |
| 26 | var ret = "X,Y1,Y2\n"; |
| 27 | for (var i = 0; i < 100; i++) { |
| 28 | ret += i + "," + i + "," + (i * (100-i) * 100/(50*50)) + "\n"; |
| 29 | } |
| 30 | return ret; |
| 31 | }, |
| 32 | { } |
| 33 | ); |
| 34 | |
| 35 | google.load('visualization', '1', {packages: ['linechart']}); |
| 36 | function addGViz() { |
| 37 | data = new google.visualization.DataTable(); |
| 38 | data.addColumn('number', 'X'); |
| 39 | data.addColumn('number', 'Y1'); |
| 40 | data.addColumn('number', 'Y2'); |
| 41 | data.addRows(100); |
| 42 | for (var i = 0; i < 100; i++) { |
| 43 | data.setCell(i, 0, i); |
| 44 | data.setCell(i, 1, i); |
| 45 | data.setCell(i, 2, i * (100-i) * 100/(50*50)); |
| 46 | } |
| 47 | |
| 48 | new Dygraph.GVizChart( |
| 49 | document.getElementById('gviz')).draw(data, |
| 50 | { |
| 51 | }); |
| 52 | } |
| 53 | |
| 54 | google.setOnLoadCallback(addGViz); |
| 55 | </script> |
| 56 | </body> |
| 57 | </html> |