X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=gallery%2Fplotter.js;h=08bdf0f873653ba17493e3e71e6b89cf96b3700c;hb=50522d1b2b07c6034be6304b8efc5dd3d154e2db;hp=dfbe4b2e12d885ed3e6c57b230487b3f65ec4488;hpb=60bda09c058d85b1fad278ac4ce6df353e0a9275;p=dygraphs.git

diff --git a/gallery/plotter.js b/gallery/plotter.js
index dfbe4b2..08bdf0f 100644
--- a/gallery/plotter.js
+++ b/gallery/plotter.js
@@ -1,57 +1,60 @@
-// Use this as a template for new Gallery entries.
+/*global Gallery,Dygraph,data */
+/*jshint evil:true */
+/*global fn */
 Gallery.register(
   'plotter',
   {
     name: 'Function Plotter',
     title: 'Define your data with functions',
     setup: function(parent) {
-      parent.innerHTML =
-        "<p><b>Equation: </b><br/>\n" +
-        "<textarea cols='80' rows='10' id='eq'>function(x) {\n" +
-        "  return [0.1 * x, 0.1 * x + Math.sin(x), 0.1*x + Math.cos(x)];\n" +
-        "}</textarea><br/>\n" +
-        "<b>Preset functions:</b> <select id='presets'>\n" +
-        "<option id='custom'>(custom)</option>\n" +
-        "<option id='id'>Identity</option>\n" +
-        "<option id='sine'>Sine Wave</option>\n" +
-        "<option id='taylor'>Taylor series</option>\n" +
-        "<option selected id='sawtooth'>Sawtooth</option>\n" +
-        "</select>\n" +
-        "</p>\n" +
-        "\n" +
-        "    <p><b>x range: </b> <input type='text' width='5' id='x1' value='-10' />\n" +
-        "    to <input type='text' width='5' id='x2' value='10' /></p>\n" +
-        "    <p><button id='plot'>Plot</button></p>\n" +
-        "\n" +
-        "    <div id='graph_div' style='width:800px; height:400px;'></div>";
+      parent.innerHTML = [
+        "<p><b>Equation: </b><br/>",
+        "<textarea cols='80' rows='10' id='eq'>function(x) {",
+        "  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'>",
+        "<option selected id='custom'>(custom)</option>",
+        "<option id='id'>Identity</option>",
+        "<option id='sine'>Sine Wave</option>",
+        "<option id='taylor'>Taylor series</option>",
+        "<option 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><button id='plot'>Plot</button></p>",
+        "",
+        "<div id='graph_div' style='width:600px; height:300px;'></div>"].join("\n");
 
     },
     run: function() {
+      var plot;  // defined below
       var select = document.getElementById("presets");
+      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}' ]
+      };
       select.onchange = function() {
         var sel = select.selectedIndex;
         var id = select.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();
-      }
+      };
 
       var plotButton = document.getElementById("plot");
-      var plot = function() {
+      plot = function() {
         var eq = document.getElementById("eq").value;
         eval("fn = " + eq);
 
         var graph = document.getElementById("graph_div");
-        var width = parseInt(graph.style.width);
+        var width = parseInt(graph.style.width, 10);
         var x1 = parseFloat(document.getElementById("x1").value);
         var x2 = parseFloat(document.getElementById("x2").value);
         var xs = 1.0 * (x2 - x1) / width;
@@ -71,9 +74,9 @@ Gallery.register(
           data.push(row);
         }
 
-        g = new Dygraph(graph, data);
-      }
-      plot.onclick = plot;
+        new Dygraph(graph, data);
+      };
+      plotButton.onclick = plot;
       plot();
     }
   });