tests/independent-series.html

   1 <html>
   2   <head>
   3     <title>Independent Series</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="../excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10     <script type="text/javascript" src="../dygraph.js"></script>
  11     <style type="text/css">
  12       .thinborder {
  13         border-width: 1px;
  14         border-spacing: 0px;
  15         border-style: solid;
  16         border-color: black;
  17         border-collapse: collapse;
  18       }
  19
  20       .thinborder td,
  21       .thinborder th {
  22         border-width: 1px;
  23         padding: 5px;
  24         border-style: solid;
  25         border-color: black;
  26       }
  27     </style>
  28   </head>
  29   <body>
  30     <h3>Independent Series</h3>
  31     <p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.</p>
  32
  33     <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>
  34
  35     <div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
  36     <p>For example, say you had two series:</p>
  37     <table><tr>
  38     <td valign=top>
  39     <table>
  40       <table class=thinborder>
  41         <tr><th>x</th><th>A</th></tr>
  42         <tr><td>2</td><td>2</td></tr>
  43         <tr><td>4</td><td>6</td></tr>
  44         <tr><td>6</td><td>4</td></tr>
  45       </table>
  46     </td>
  47     <td valign=top style="padding-left:25px;">
  48       <table class=thinborder>
  49         <tr><th>x</th><th>B</th></tr>
  50         <tr><td>1</td><td>3</td></tr>
  51         <tr><td>3</td><td>7</td></tr>
  52         <tr><td>5</td><td>5</td></tr>
  53       </table>
  54     </td>
  55     </tr></table>
  56
  57     <p>Then you would specify the following CSV or native data:</p>
  58     <table><tr>
  59     <td valign=top>
  60     (CSV)
  61     <pre>X,A,B
  62 1,,3
  63 2,2,
  64 3,,7
  65 4,6,
  66 5,,5
  67 6,4,</pre>
  68     </td>
  69     <td valign=top style="padding-left: 25px;">
  70     (native)
  71     <pre>[
  72 [1, null, 3],
  73 [2, 2, null],
  74 [3, null, 7],
  75 [4, 6, null],
  76 [5, null, 5],
  77 [6, 4, null] ]</pre>
  78     </td>
  79     </tr></table>
  80
  81     <script type="text/javascript">
  82     new Dygraph(
  83       document.getElementById("graph"),
  84       [
  85         [1, null, 3],
  86         [2, 2, null],
  87         [3, null, 7],
  88         [4, 5, null],
  89         [5, null, 5],
  90         [6, 3, null]
  91       ],
  92       {
  93         labels: ["x", "A", "B" ],
  94         connectSeparatedPoints: true,
  95         drawPoints: true
  96       }
  97     );
  98     </script>
  99
 100     <h3>Encoding a gap</h3>
 101     <p>There's one extra wrinkle. What if one of the series has a missing
 102     value, i.e. what if your series are something like </p>
 103
 104     <table><tr>
 105     <td valign=top>
 106     <table>
 107       <table class=thinborder>
 108         <tr><th>x</th><th>A</th></tr>
 109         <tr><td>2</td><td>2</td></tr>
 110         <tr><td>4</td><td>4</td></tr>
 111         <tr><td>6</td><td>(gap)</td></tr>
 112         <tr><td>8</td><td>8</td></tr>
 113         <tr><td>10</td><td>10</td></tr>
 114       </table>
 115     </td>
 116     <td valign=top style="padding-left:25px;">
 117       <table class=thinborder>
 118         <tr><th>x</th><th>B</th></tr>
 119         <tr><td>1</td><td>3</td></tr>
 120         <tr><td>3</td><td>5</td></tr>
 121         <tr><td>5</td><td>7</td></tr>
 122       </table>
 123     </td>
 124     </tr></table>
 125
 126     <div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
 127     <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>
 128
 129     <script type="text/javascript">
 130     g2 = new Dygraph(
 131       document.getElementById("graph2"),
 132 "x,A,B  \n" +
 133 "1,,3   \n" +
 134 "2,2,   \n" +
 135 "3,,5   \n" +
 136 "4,4,   \n" +
 137 "5,,7   \n" +
 138 "6,NaN, \n" +
 139 "8,8,   \n" +
 140 "10,10, \n"
 141       , {
 142         labels: ["x", "A", "B" ],
 143         connectSeparatedPoints: true,
 144         drawPoints: true
 145       }
 146     );
 147     </script>
 148
 149     <table><tr>
 150     <td valign=top>
 151     (CSV)
 152     <pre>x,A,B
 153 1,,3
 154 2,2,
 155 3,,5
 156 4,4,
 157 5,,7
 158 6,NaN,
 159 8,8,
 160 10,10,</pre>
 161     </td>
 162     <td valign=top style="padding-left: 25px;">
 163     (native)
 164     <pre>[ [1, null, 3],
 165   [2, 2, null],
 166   [3, null, 5],
 167   [4, 4, null],
 168   [5, null, 7],
 169   [6, NaN, null],
 170   [8, 8, null],
 171   [10, 10, null] ]</pre>
 172     </td>
 173     </tr></table>
 174
 175   </body>
 176 </html>