gallery/plotter.js

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