tests/plotter.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>dygraphs Equation Plotter</title>
   6     <!--[if IE]>
   7     <script type="text/javascript" src="../excanvas.js"></script>
   8     <![endif]-->
   9     <!--
  10     For production (minified) code, use:
  11     <script type="text/javascript" src="dygraph-combined.js"></script>
  12     -->
  13     <script type="text/javascript" src="../dygraph-dev.js"></script>
  14
  15     <script type="text/javascript">
  16       function plot() {
  17         var eq = document.getElementById("eq").value;
  18         eval("fn = " + eq);
  19
  20         var graph = document.getElementById("graph_div");
  21         var width = parseInt(graph.style.width);
  22         var x1 = parseFloat(document.getElementById("x1").value);
  23         var x2 = parseFloat(document.getElementById("x2").value);
  24         var xs = 1.0 * (x2 - x1) / width;
  25
  26         var data = [];
  27         for (var i = 0; i < width; i++) {
  28           var x = x1 + i * xs;
  29           var y = fn(x);
  30           var row = [x];
  31           if (y.length > 0) {
  32             for (var j = 0; j < y.length; j++) {
  33               row.push(y[j]);
  34             }
  35           } else {
  36             row.push(y);
  37           }
  38           data.push(row);
  39         }
  40
  41         var labels = ['X'];
  42         if (data[0].length == 2) {
  43           labels.push('Y');
  44         } else {
  45           for (var i = 1; i < data[0].length; i++) {
  46             labels.push('Y' + (1 + i));
  47           }
  48         }
  49
  50         g = new Dygraph(graph, data, {
  51           labels: labels
  52         });
  53       }
  54
  55       function preset() {
  56         var sel = document.getElementById("presets").selectedIndex;
  57         var id = document.getElementById("presets").options[sel].id;
  58         var presets = {
  59           'id': [ -10, 10, 'function(x) {\n  return x;\n}' ],
  60           'sine': [ -10, 10, 'function(x) {\n  return Math.sin(x);\n}' ],
  61           'taylor': [ -3, 3, 'function(x) {\n  return [Math.cos(x), 1 - x*x/2 + x*x*x*x/24];\n}' ],
  62           'sawtooth': [-10, 10, 'function(x) {\n  var y = 0;\n  for (var i = 1; i < 20; i+=2) {\n    y += Math.sin(i * x)/i;\n  }\n  var final = 1 - 2*(Math.abs(Math.floor(x / Math.PI)) % 2);\n  return [4/Math.PI * y, final];\n}' ]
  63         };
  64
  65         if (id == "custom") { return; }
  66         document.getElementById("x1").value = presets[id][0];
  67         document.getElementById("x2").value = presets[id][1];
  68         document.getElementById("eq").value = presets[id][2];
  69         plot();
  70       }
  71     </script>
  72   </head>
  73   <body onload="preset()">
  74     <p><b>Equation: </b><br/>
  75     <textarea cols="40" rows="10" id="eq">function(x) {
  76   return [0.1 * x, 0.1 * x + Math.sin(x), 0.1*x + Math.cos(x)];
  77 }</textarea><br/>
  78 <b>Preset functions:</b> <select id=presets onchange="preset()">
  79 <option id=custom>(custom)</option>
  80 <option id=id>Identity</option>
  81 <option id=sine>Sine Wave</option>
  82 <option id=taylor>Taylor series</option>
  83 <option selected id=sawtooth>Sawtooth</option>
  84 </select>
  85     </p>
  86
  87     <p><b>x range: </b> <input type=text width="5" id="x1" value="-10" />
  88     to <input type=text width="5" id="x2" value="10" /></p>
  89     <p><input type=button value="Plot" onClick="plot()" /></p>
  90
  91     <div id="graph_div" style="width:1024px; height:400px;"></div>
  92   </body>
  93 </html>