+ g2 = new Dygraph(
+ document.getElementById("graph3"),
+"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"
+ , {
+ 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>
+
+ <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(