Fix example to only use public API. This required changing updateOptions to better...
authorRobert Konigsberg <konigsberg@google.com>
Fri, 8 Oct 2010 16:22:48 +0000 (12:22 -0400)
committerRobert Konigsberg <konigsberg@google.com>
Fri, 8 Oct 2010 16:22:48 +0000 (12:22 -0400)
Tweak of docs

docs/index.html
dygraph.js
tests/zoom.html

index 4369588..928b121 100644 (file)
@@ -73,7 +73,7 @@
 
       <h3 id="demo">A demo is worth a thousand words:</h3>
 
-      <p style="font-size:0.8em">(Mouse over to highlight individual values. Click and drag to zoom in both axes. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.)</p>
+      <p style="font-size:0.8em">(Mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.)</p>
 
       <div id="title" style="width:800px; margin: 1em;text-align:center; font-weight: bold; font-size: 125%;">Temperatures in New York vs. San Francisco</div>
 
index 216753a..b8ce5e2 100644 (file)
@@ -2486,14 +2486,15 @@ Dygraph.prototype.start_ = function() {
  */
 Dygraph.prototype.updateOptions = function(attrs) {
   // TODO(danvk): this is a mess. Rethink this function.
-  if (attrs.rollPeriod) {
+  if ('rollPeriod' in attrs) {
     this.rollPeriod_ = attrs.rollPeriod;
   }
-  if (attrs.dateWindow) {
+  if ('dateWindow' in attrs) {
     this.dateWindow_ = attrs.dateWindow;
   }
-  if (attrs.valueRange) {
+  if ('valueRange' in attrs) {
     this.valueRange_ = attrs.valueRange;
+    this.valueWindow_ = attrs.valueRange;
   }
 
   // TODO(danvk): validate per-series options.
index ee6fbec..353be3b 100644 (file)
@@ -13,9 +13,9 @@
   <body>
     <h3>Click the buttons to change the zoom level or just use the normal
     click-and drag. While zoom typically works by click-and-drag, the
-    butons are useful for testing.</h3>
+    buttons are useful for testing.</h3>
     <h4>Window coordinates (in dates and values):</h4>
-    <div id = "dimensions"></div>
+    <div id="xdimensions"></div> <div id="ydimensions"></div>
     <div id="div_g" style="width:600px; height:300px;"></div>
 
     <p><b>Zoom operations:</b></p>
       showDimensions(minDate, maxDate, minValue, maxValue);
 
       function showDimensions(minDate, maxDate, minValue, maxValue) {
-        var elem = document.getElementById("dimensions");
-        elem.innerHTML =
-          "dateWindow : [" + minDate + " , "+ maxDate + "],<br>" +
-          "valueRange : [" + minValue + " , "+ maxValue + "],";
+       showXDimensions(minDate, maxDate);
+       showYDimensions(minValue, maxValue);
+      }
+
+      function showXDimensions(first, second) {
+        var elem = document.getElementById("xdimensions");
+        elem.innerHTML = "dateWindow : [" + first + ", "+ second + "]";
+      }
+
+      function showYDimensions(first, second) {
+        var elem = document.getElementById("ydimensions");
+        elem.innerHTML = "valueRange : [" + first + ", "+ second + "]";
       }
 
       function zoomGraphX(minDate, maxDate) {
-        g.doZoomXDates_(minDate, maxDate);
+        g.updateOptions({
+          dateWindow: [minDate, maxDate]
+        });
+           showXDimensions(minDate, maxDate);
       }
 
       function zoomGraphY(minValue, maxValue) {
-        g.doZoomYValues_(minValue, maxValue);
+        g.updateOptions({
+          valueRange: [minValue, maxValue]
+        });
+           showYDimensions(minValue, maxValue);
       }
 
       function unzoomGraph() {
-        g.doUnzoom_();
+        g.updateOptions({
+          dateWindow: undefined,
+          valueRange: undefined
+        });
       }
     </script>