X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Findependent-series.html;h=b9f07bfddcd413ab89782a2d7184a8ae482f8381;hb=cf61aeb77cda5e2638b1f00588dcd90394afd24c;hp=543f51f755aa40b422d820606b2810ac1811b70e;hpb=35a3c487b50e297b4a01522ab208ed394cfd88e3;p=dygraphs.git

diff --git a/tests/independent-series.html b/tests/independent-series.html
index 543f51f..b9f07bf 100644
--- a/tests/independent-series.html
+++ b/tests/independent-series.html
@@ -1,13 +1,14 @@
+<!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Independent Series</title>
-    <!--[if IE]>
-    <script type="text/javascript" src="../excanvas.js"></script>
-    <![endif]-->
-    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
-    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
-    <script type="text/javascript" src="../dygraph-canvas.js"></script>
-    <script type="text/javascript" src="../dygraph.js"></script>
+    <!--
+    For production (minified) code, use:
+    <script type="text/javascript" src="dygraph-combined.js"></script>
+    -->
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
+
     <style type="text/css">
       .thinborder {
         border-width: 1px;
@@ -79,7 +80,7 @@
     </tr></table>
 
     <script type="text/javascript">
-    new Dygraph(
+    var g1 = new Dygraph(
       document.getElementById("graph"),
       [
         [1, null, 3],
@@ -123,12 +124,12 @@
     </td>
     </tr></table>
 
-    <div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
+    <div id="graph3" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
     <p>The gap would normally be encoded as a null, or missing value. But when you use <code>connectSeparatedPoints</code>, that has a special meaning. Instead, you have to use <code>NaN</code>. This is a bit of a hack, but it gets the job done.</p> 
 
     <script type="text/javascript">
     g2 = new Dygraph(
-      document.getElementById("graph2"),
+      document.getElementById("graph3"),
 "x,A,B  \n" +
 "1,,3   \n" +
 "2,2,   \n" +
@@ -139,7 +140,6 @@
 "8,8,   \n" +
 "10,10, \n"
       , {
-        labels: ["x", "A", "B" ],
         connectSeparatedPoints: true,
         drawPoints: true
       }
@@ -172,5 +172,106 @@
     </td>
     </tr></table>
 
+    <h3>Behavior at the edges of the panel for independent series</h3>
+    <p> In case only a part of the whole data is visible (e.g. after zooming in) the lines are 
+    drawn to the respective next valid point outside the visible area. </p>
+              
+    <table><tr>
+    <td valign=top>
+    <table>
+      <table class=thinborder>
+        <tr><th>x</th><th>A</th></tr>
+        <tr><td>0</td><td>2</td></tr>
+        <tr><td>1</td><td>3</td></tr>
+        <tr><td>2</td><td>3</td></tr>
+        <tr><td>4</td><td>4</td></tr>
+        <tr><td>5</td><td>3</td></tr>
+        <tr><td>6</td><td>3</td></tr>
+        <tr><td>7</td><td>3</td></tr>
+        <tr><td>8</td><td>4</td></tr>
+      </table>
+    </td>
+    <td valign=top style="padding-left:25px;">
+      <table class=thinborder>
+        <tr><th>x</th><th>B</th></tr>
+        <tr><td>0</td><td>1</td></tr>
+        <tr><td>1</td><td>2</td></tr>
+        <tr><td>2</td><td>1</td></tr>
+        <tr><td>8</td><td>2</td></tr>
+      </table>
+    </td>
+    </tr></table>
+
+    <div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
+    <p>Both graphs have no value at the right edge of the panel (x=3). The lines that are drawn to the right edge are determined by their respective next valid value outside the visible area.
+    Therefore it is neither necessary that the next valid values are on the same point nor that they have the same index (index 4 for the green line and index 8 for the blue line).</p> 
+    <p>Use double click to unzoom and see the currently invisible points</p> 
+    
+    <script type="text/javascript">
+    g2 = new Dygraph(
+      document.getElementById("graph2"),
+"x,A,B  \n" +
+"0,2,1   \n" +
+"1,3,2   \n" +
+"2,3,1   \n" +
+"3,,   \n" +
+"4,4,   \n" +
+"5,3,   \n" +
+"6,3,   \n" +
+"7,3,   \n" +
+"8,4,2   \n"
+
+      , {
+        connectSeparatedPoints: true,
+        drawPoints: true,
+        pointSize: 3,
+        highlightCircleSize: 5,
+        dateWindow: [0,3]
+      }
+    );
+    </script>
+    
+    <table><tr>
+    <td valign=top>
+    Index
+    <pre>&nbsp;
+0
+1
+2
+3
+4
+5
+6
+7
+8</pre>
+    </td>
+    <td valign=top>
+    (CSV)
+    <pre>x,A,B
+0,2,1
+1,3,2
+2,3,1
+3,,
+4,4,
+5,3,
+6,3,
+7,3,
+8,4,2</pre>
+    </td>
+    <td valign=top style="padding-left: 25px;">
+    (native)
+    <pre>[ 
+  [0, 2, 1], 
+  [1, 3, 2],
+  [2, 3, 1],
+  [3, null, null],
+  [4, 4, null],
+  [5, 3, null],
+  [6, 3, null],
+  [7, 3, null],
+  [8, 4, 2] ]</pre>
+    </td>
+    </tr></table>
+
   </body>
 </html>
