projects / dygraphs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (from parent 1: 9c585af)
Add plugins option to Dygraphs. Add demo-test. Add test.
authorRobert Konigsberg <konigsberg@google.com>
Fri, 4 Jan 2013 02:48:06 +0000 (21:48 -0500)
committerRobert Konigsberg <konigsberg@google.com>
Fri, 4 Jan 2013 02:54:19 +0000 (21:54 -0500)
auto_tests/tests/plugins.js [new file with mode: 0644] patch | blob
dygraph-options-reference.js patch | blob | blame | history
dygraph.js patch | blob | blame | history
tests/plugins.html [new file with mode: 0644] patch | blob

diff --git a/auto_tests/tests/plugins.js b/auto_tests/tests/plugins.js
new file mode 100644 (file)
index 0000000..8dde4d8
--- /dev/null
+++ b/auto_tests/tests/plugins.js
@@ -0,0 +1,46 @@
+/**
+ * @fileoverview Tests for the plugins option.
+ *
+ * @author konigsberg@google.com (Robert Konigsberg)
+ */
+var pluginsTestCase = TestCase("plugins");
+
+pluginsTestCase.prototype.setUp = function() {
+  document.body.innerHTML = "<div id='graph'></div>";
+};
+
+pluginsTestCase.prototype.tearDown = function() {
+};
+
+pluginsTestCase.prototype.testWillDrawChart = function() {
+  var draw = 0;
+
+  var plugin = (function() {
+    var p = function() {
+    };  
+
+    p.prototype.activate = function(g) {
+      return {
+        willDrawChart: this.willDrawChart
+      };
+    };
+
+    p.prototype.willDrawChart = function(e) {
+      draw++;
+    };
+
+    return p;
+  })();
+
+  var data = "X,Y1,Y2\n" +
+      "0,1,1\n" +
+      "1,1,1\n" +
+      "2,1,1\n" +
+      "3,1,1\n"
+  ;
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, { plugins : [ plugin ] });
+
+  assertEquals(1, draw);
+};
diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js
index 9110879..423c9bc 100644 (file)
--- a/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@ -765,6 +765,12 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "labels": ["Series"],
     "type": "Object",
     "description": "Defines per-series options. Its keys match the y-axis label names, and the values are dictionaries themselves that contain options specific to that series. When this option is missing, it falls back on the old-style of per-series options comingled with global options."
+  },
+  "plugins": {
+    "default": "[]",
+    "labels": ["Configuration"],
+    "type": "array<plugin>",
+    "description": "Defines per-graph plug-ins. Useful for per-graph customization"
   }
 }
 ;  // </JSON>
@@ -797,6 +803,7 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
    'Value display/formatting',
    'Zooming',
    'Debugging',
+   'Configuration',
    'Deprecated'
   ];
   var i;
diff --git a/dygraph.js b/dygraph.js
index 1ac7d43..29c343b 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -282,6 +282,8 @@ Dygraph.DEFAULT_ATTRS = {
     Dygraph.Plotters.linePlotter
   ],
 
+  plugins : [ ],
+
   // per-axis options
   axes: {
     x: {
@@ -452,8 +454,9 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
 
   // Activate plugins.
   this.plugins_ = [];
-  for (var i = 0; i < Dygraph.PLUGINS.length; i++) {
-    var Plugin = Dygraph.PLUGINS[i];
+  var plugins = Dygraph.PLUGINS.concat(this.getOption('plugins'));
+  for (var i = 0; i < plugins.length; i++) {
+    var Plugin = plugins[i];
     var pluginInstance = new Plugin();
     var pluginDict = {
       plugin: pluginInstance,
diff --git a/tests/plugins.html b/tests/plugins.html
new file mode 100644 (file)
index 0000000..2d084d0
--- /dev/null
+++ b/tests/plugins.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <title>plugins demo</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="../excanvas.js"></script>
+    <![endif]-->
+    <script type="text/javascript" src="../dygraph-dev.js"></script>
+
+    <!-- Include the Javascript for the plug-in -->
+    <script type="text/javascript" src="../plugins/unzoom.js"></script>
+  </head>
+  <body>
+    <h2>Plugins Demo</h2>
+    <table><tr><td>
+    <div id="demodiv"></div>
+    </td><td valign=top>
+    <div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
+    </td>
+    </tr></table>
+    <script type="text/javascript">
+      g = new Dygraph(
+              document.getElementById("demodiv"),
+              function() {
+                var zp = function(x) { if (x < 10) return "0"+x; else return x; };
+                var r = "date,parabola,line,another line,sine wave\n";
+                for (var i=1; i<=31; i++) {
+                r += "200610" + zp(i);
+                r += "," + 10*(i*(31-i));
+                r += "," + 10*(8*i);
+                r += "," + 10*(250 - 8*i);
+                r += "," + 10*(125 + 125 * Math.sin(0.3*i));
+                r += "\n";
+                }
+                return r;
+              },
+              {
+                labelsDiv: document.getElementById('status'),
+                labelsSeparateLines: true,
+                labelsKMB: true,
+                legend: 'always',
+                colors: ["rgb(51,204,204)",
+                         "rgb(255,100,100)",
+                         "#00DD55",
+                         "rgba(50,50,200,0.4)"],
+                width: 640,
+                height: 480,
+                title: 'Interesting Shapes',
+                xlabel: 'Date',
+                ylabel: 'Count',
+                axisLineColor: 'white',
+
+                // Set the plug-ins in the options.
+                plugins : [
+                  Dygraph.Plugins.Unzoom
+                ]
+              }
+          );
+    </script>
+</body>
+</html>
danvk/dygraphs fork supporting touch events