X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Findependent-series.html;fp=tests%2Findependent-series.html;h=e3ae8a4a5e07240c18e0027942074bd18b486cba;hb=c6a0ebbac1ac1454b2d633e6623eef7e1913f5e1;hp=ad0357495995bbac14b2bb008b6427fc448a72ab;hpb=75c589da9e8e764d354a24c9c7640733e7f036e9;p=dygraphs.git

diff --git a/tests/independent-series.html b/tests/independent-series.html
index ad03574..e3ae8a4 100644
--- a/tests/independent-series.html
+++ b/tests/independent-series.html
@@ -31,7 +31,7 @@
 
     <p>The trick is to specify values for the series at the union of the x-values of all series. For one series' x values, specify <code>null</code> for each of the other series.</p>
 
-    <div id="graph" style="position: absolute; top: 100px; left: 400px; width: 400px; height: 300px;"></div>
+    <div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
     <p>For example, say you had two series:</p>
     <table><tr>
     <td valign=top>
@@ -39,16 +39,16 @@
       <table class=thinborder>
         <tr><th>x</th><th>A</th></tr>
         <tr><td>2</td><td>2</td></tr>
-        <tr><td>4</td><td>4</td></tr>
-        <tr><td>6</td><td>6</td></tr>
+        <tr><td>4</td><td>6</td></tr>
+        <tr><td>6</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>1</td><td>3</td></tr>
-        <tr><td>3</td><td>5</td></tr>
-        <tr><td>5</td><td>7</td></tr>
+        <tr><td>3</td><td>7</td></tr>
+        <tr><td>5</td><td>5</td></tr>
       </table>
     </td>
     </tr></table>
@@ -60,20 +60,20 @@
     <pre>X,A,B
 1,,3
 2,2,
-3,,5
-4,4,
-5,,7
-6,6,</pre>
+3,,7
+4,6,
+5,,5
+6,4,</pre>
     </td>
     <td valign=top style="padding-left: 25px;">
     (native)
     <pre>[
 [1, null, 3],
 [2, 2, null],
-[3, null, 5],
-[4, 4, null],
-[5, null, 7],
-[6, 6, null] ]</pre>
+[3, null, 7],
+[4, 6, null],
+[5, null, 5],
+[6, 4, null] ]</pre>
     </td>
     </tr></table>
 
@@ -83,19 +83,22 @@
       [
         [1, null, 3],
         [2, 2, null],
-        [3, null, 5],
-        [4, 4, null],
-        [5, null, 7],
-        [6, 6, null]
+        [3, null, 7],
+        [4, 5, null],
+        [5, null, 5],
+        [6, 3, null]
       ],
       {
         labels: ["x", "A", "B" ],
-        connectSeparatedPoints: true
+        connectSeparatedPoints: true,
+        drawPoints: true
       }
     );
     </script>
 
-    <p>There's one extra wrinkle. What if one of the series has a missing value, i.e. what if your series are something like 
+    <h3>Encoding a gap</h3>
+    <p>There's one extra wrinkle. What if one of the series has a missing
+    value, i.e. what if your series are something like </p>
 
     <table><tr>
     <td valign=top>
@@ -119,28 +122,54 @@
     </td>
     </tr></table>
 
-    <div id="graph2" style="float: left; width: 400px; height: 300px;"></div>
+    <div id="graph2" 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">
     new Dygraph(
       document.getElementById("graph2"),
-      [
-        [1, null, 3],
-        [2, 2, null],
-        [3, null, 5],
-        [4, 4, null],
-        [5, null, 7],
-        [6, NaN, null],
-        [8, 8, null],
-        [10, 10, null]
-      ],
-      {
+"x,A,B  \n" +
+"1,,3   \n" +
+"2,2,   \n" +
+"3,,5   \n" +
+"4,4,   \n" +
+"5,,7   \n" +
+"6,NaN, \n" +
+"8,8,   \n" +
+"10,10, \n"
+      , {
         labels: ["x", "A", "B" ],
-        connectSeparatedPoints: true
+        connectSeparatedPoints: true,
+        drawPoints: true
       }
     );
     </script>
 
+    <table><tr>
+    <td valign=top>
+    (CSV)
+    <pre>x,A,B
+1,,3
+2,2,
+3,,5
+4,4,
+5,,7
+6,NaN,
+8,8,
+10,10,</pre>
+    </td>
+    <td valign=top style="padding-left: 25px;">
+    (native)
+    <pre>[ [1, null, 3],
+  [2, 2, null],
+  [3, null, 5],
+  [4, 4, null],
+  [5, null, 7],
+  [6, NaN, null],
+  [8, 8, null],
+  [10, 10, null] ]</pre>
+    </td>
+    </tr></table>
+
   </body>
 </html>