some built-in functions for the plotter
authorDan Vanderkam <danvdk@gmail.com>
Fri, 27 Nov 2009 17:17:01 +0000 (12:17 -0500)
committerDan Vanderkam <danvdk@gmail.com>
Fri, 27 Nov 2009 17:17:01 +0000 (12:17 -0500)
docs/plotter.html

index 325c731..f36573b 100644 (file)
         for (var i = 0; i < width; i++) {
           var x = x1 + i * xs;
           var y = fn(x);
-          data.push([x, y]);
+          var row = [x];
+          if (y.length > 0) {
+            for (var j = 0; j < y.length; j++) {
+              row.push(y[j]);
+            }
+          } else {
+            row.push(y);
+          }
+          data.push(row);
         }
 
-        g = new Dygraph(graph, data, { labels: ["x", "y"] });
+        g = new Dygraph(graph, data);
+      }
+
+      function preset() {
+        var sel = document.getElementById("presets").selectedIndex;
+        var id = document.getElementById("presets").options[sel].id;
+        var presets = {
+          'id': [ -10, 10, 'function(x) {\n  return x;\n}' ],
+          'sine': [ -10, 10, 'function(x) {\n  return Math.sin(x);\n}' ],
+          'taylor': [ -3, 3, 'function(x) {\n  return [Math.cos(x), 1 - x*x/2 + x*x*x*x/24];\n}' ],
+          '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}' ]
+        };
+
+        if (id == "custom") { return; }
+        document.getElementById("x1").value = presets[id][0];
+        document.getElementById("x2").value = presets[id][1];
+        document.getElementById("eq").value = presets[id][2];
+        plot();
       }
     </script>
   </head>
-  <body>
+  <body onload="preset()">
     <p><b>Equation: </b><br/>
     <textarea cols="40" rows="10" id="eq">function(x) {
-  return Math.sin(x);
-}</textarea>
+  return [0.1 * x, 0.1 * x + Math.sin(x), 0.1*x + Math.cos(x)];
+}</textarea><br/>
+<b>Preset functions:</b> <select id=presets onchange="preset()">
+<option id=custom>(custom)</option>
+<option id=id>Identity</option>
+<option id=sine>Sine Wave</option>
+<option id=taylor>Taylor series</option>
+<option selected id=sawtooth>Sawtooth</option>
+</select>
     </p>
+
     <p><b>x range: </b> <input type=text width="5" id="x1" value="-10" />
     to <input type=text width="5" id="x2" value="10" /></p>
     <p><input type=button value="Plot" onClick="plot()" /></p>