title tbd

desc tbd

by Toni

HTML

<script src="http://dygraphs.com/dygraph-combined.js"></script>
<button onclick="hide()">hide</button>
<br />
<button onclick="show()">show</button>

<div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div> 
<p>For example, say you had two series:</p> 
<table><tbody><tr> 
<td valign="top"> 
<table> 
  </table><table class="thinborder"> 
    <tbody><tr><th>x</th><th>A</th></tr> 
    <tr><td>2</td><td>2</td></tr> 
    <tr><td>4</td><td>6</td></tr> 
    <tr><td>6</td><td>4</td></tr> 
  </tbody></table> 
</td> 
<td style="padding-left:25px;" valign="top"> 
  <table class="thinborder"> 
    <tbody><tr><th>x</th><th>B</th></tr> 
    <tr><td>1</td><td>3</td></tr> 
    <tr><td>3</td><td>7</td></tr> 
    <tr><td>5</td><td>5</td></tr> 
  </tbody></table> 
</td> 
</tr></tbody></table> 

<p>Then you would specify the following CSV or native data:</p> 
<table><tbody><tr> 
<td valign="top"> 
(CSV) 
<pre id="csv1"></pre> 
</td> 
<td style="padding-left: 25px;" valign="top">
(native) 
<pre id="native1"></pre> 
</td> 
</tr></tbody></table> 

<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><tbody><tr> 
<td valign="top"> 
<table> 
  </table><table class="thinborder"> 
    <tbody><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>(gap)</td></tr> 
    <tr><td>8</td><td>8</td></tr> 
    <tr><td>10</td><td>10</td></tr> 
  </tbody></table> 
</td> 
<td style="padding-left:25px;" valign="top"> 
  <table class="thinborder"> 
    <tbody><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> 
  </tbody></table> 
</td> 
</tr></tbody></table> 

<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...

CSS

.thinborder { border-width: 1px; border-spacing: 0px; border-style: solid; border-color: black; border-collapse: collapse; }

.thinborder td, #workarea #independent-series .thinborder th { border-width: 1px; padding: 5px; border-style: solid; border-color: black; }

JavaScript

$(document).ready(function () {
      document.getElementById("csv1").textContent =
          "X,A,B\n" +
          "1,,3\n" +
          "2,2,\n" +
          "3,,7\n" +
          "4,6,\n" +
          "5,,5\n" +
          "6,4,";

      document.getElementById("native1").textContent =
          "[\n" +
          "  [1, null, 3],\n" +
          "  [2, 2, null],\n" +
          "  [3, null, 7],\n" +
          "  [4, 6, null],\n" +
          "  [5, null, 5],\n" +
          "  [6, 4, null]\n" +
          "]";

      document.getElementById("csv2").textContent =
          "X,A,B\n" +
          "1,,3\n" +
          "2,2,\n" +
          "3,,5\n" +
          "4,4,\n" +
          "6,Nan,\n" +
          "8,8,\n" +
          "10,10,";

      document.getElementById("native2").textContent =
          "[\n" +
          "  [1, null, 3],\n" +
          "  [2, 2, null],\n" +
          "  [3, null, 5],\n" +
          "  [4, 4, null],\n" +
          "  [5, null, 7],\n" +
          "  [6, NaN, null],\n" +
          "  [8, 8, null]\n" +
          "  [10, 10, null]\n" +
          "]";

      g1 = new Dygraph(
        document.getElementById('graph'),
        [
          [1, null, 3],
          [2, 2, null],
          [3, null, 7],
          [4, 5, null],
          [5, null, 5],
          [6, 3, null]
        ],
        {
          labels: ['x', 'A', 'B' ],
          connectSeparatedPoints: true,
          drawPoints: true
        }
      );
  
     
    }
);

function hide(){
        g1.setVisibility(1, false);
}


function show(){
        g1.setVisibility(1, true);
}