gallery/plotter.js

   1 // Use this as a template for new Gallery entries.
   2 Gallery.register(
   3   'plotter',
   4   {
   5     name: 'Plotter',
   6     title: 'title',
   7     setup: function(parent) {
   8       parent.innerHTML =
   9         "<p><b>Equation: </b><br/>\n" +
  10         "<textarea cols='80' rows='10' id='eq'>function(x) {\n" +
  11         "  return [0.1 * x, 0.1 * x + Math.sin(x), 0.1*x + Math.cos(x)];\n" +
  12         "}</textarea><br/>\n" +
  13         "<b>Preset functions:</b> <select id='presets' onchange='preset()'>\n" +
  14         "<option id='custom'>(custom)</option>\n" +
  15         "<option id='id'>Identity</option>\n" +
  16         "<option id='sine'>Sine Wave</option>\n" +
  17         "<option id='taylor'>Taylor series</option>\n" +
  18         "<option selected id='sawtooth'>Sawtooth</option>\n" +
  19         "</select>\n" +
  20         "    </p>\n" +
  21         "\n" +
  22         "    <p><b>x range: </b> <input type='text' width='5' id='x1' value='-10' />\n" +
  23         "    to <input type='text' width='5' id='x2' value='10' /></p>\n" +
  24         "    <p><input type=button value='Plot' onClick='plot()' /></p>\n" +
  25         "\n" +
  26         "    <div id='graph_div' style='width:800px; height:400px;'></div>";
  27
  28     },
  29     run: function() {
  30       window.preset = function() {
  31         var sel = document.getElementById("presets").selectedIndex;
  32         var id = document.getElementById("presets").options[sel].id;
  33         var presets = {
  34           'id': [ -10, 10, 'function(x) {\n  return x;\n}' ],
  35           'sine': [ -10, 10, 'function(x) {\n  return Math.sin(x);\n}' ],
  36           'taylor': [ -3, 3, 'function(x) {\n  return [Math.cos(x), 1 - x*x/2 + x*x*x*x/24];\n}' ],
  37           '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}' ]
  38         };
  39
  40         if (id == "custom") { return; }
  41         document.getElementById("x1").value = presets[id][0];
  42         document.getElementById("x2").value = presets[id][1];
  43         document.getElementById("eq").value = presets[id][2];
  44         plot();
  45       }
  46
  47       window.plot = function() {
  48         var eq = document.getElementById("eq").value;
  49         eval("fn = " + eq);
  50
  51         var graph = document.getElementById("graph_div");
  52         var width = parseInt(graph.style.width);
  53         var x1 = parseFloat(document.getElementById("x1").value);
  54         var x2 = parseFloat(document.getElementById("x2").value);
  55         var xs = 1.0 * (x2 - x1) / width;
  56
  57         var data = [];
  58         for (var i = 0; i < width; i++) {
  59           var x = x1 + i * xs;
  60           var y = fn(x);
  61           var row = [x];
  62           if (y.length > 0) {
  63             for (var j = 0; j < y.length; j++) {
  64               row.push(y[j]);
  65             }
  66           } else {
  67             row.push(y);
  68           }
  69           data.push(row);
  70         }
  71
  72         g = new Dygraph(graph, data);
  73       }
  74     }
  75   });