tests/independent-series.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>Independent Series</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7
   8     <style type="text/css">
   9       .thinborder {
  10         border-width: 1px;
  11         border-spacing: 0px;
  12         border-style: solid;
  13         border-color: black;
  14         border-collapse: collapse;
  15       }
  16
  17       .thinborder td,
  18       .thinborder th {
  19         border-width: 1px;
  20         padding: 5px;
  21         border-style: solid;
  22         border-color: black;
  23       }
  24     </style>
  25   </head>
  26   <body>
  27     <h3>Independent Series</h3>
  28     <p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.</p>
  29
  30     <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>
  31
  32     <div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
  33     <p>For example, say you had two series:</p>
  34     <table><tr>
  35     <td valign=top>
  36     <table>
  37       <table class=thinborder>
  38         <tr><th>x</th><th>A</th></tr>
  39         <tr><td>2</td><td>2</td></tr>
  40         <tr><td>4</td><td>6</td></tr>
  41         <tr><td>6</td><td>4</td></tr>
  42       </table>
  43     </td>
  44     <td valign=top style="padding-left:25px;">
  45       <table class=thinborder>
  46         <tr><th>x</th><th>B</th></tr>
  47         <tr><td>1</td><td>3</td></tr>
  48         <tr><td>3</td><td>7</td></tr>
  49         <tr><td>5</td><td>5</td></tr>
  50       </table>
  51     </td>
  52     </tr></table>
  53
  54     <p>Then you would specify the following CSV or native data:</p>
  55     <table><tr>
  56     <td valign=top>
  57     (CSV)
  58     <pre>X,A,B
  59 1,,3
  60 2,2,
  61 3,,7
  62 4,6,
  63 5,,5
  64 6,4,</pre>
  65     </td>
  66     <td valign=top style="padding-left: 25px;">
  67     (native)
  68     <pre>[
  69 [1, null, 3],
  70 [2, 2, null],
  71 [3, null, 7],
  72 [4, 6, null],
  73 [5, null, 5],
  74 [6, 4, null] ]</pre>
  75     </td>
  76     </tr></table>
  77
  78     <script type="text/javascript">
  79     var g1 = new Dygraph(
  80       document.getElementById("graph"),
  81       [
  82         [1, null, 3],
  83         [2, 2, null],
  84         [3, null, 7],
  85         [4, 5, null],
  86         [5, null, 5],
  87         [6, 3, null]
  88       ],
  89       {
  90         labels: ["x", "A", "B" ],
  91         connectSeparatedPoints: true,
  92         drawPoints: true
  93       }
  94     );
  95     </script>
  96
  97     <h3>Encoding a gap</h3>
  98     <p>There's one extra wrinkle. What if one of the series has a missing
  99     value, i.e. what if your series are something like </p>
 100
 101     <table><tr>
 102     <td valign=top>
 103     <table>
 104       <table class=thinborder>
 105         <tr><th>x</th><th>A</th></tr>
 106         <tr><td>2</td><td>2</td></tr>
 107         <tr><td>4</td><td>4</td></tr>
 108         <tr><td>6</td><td>(gap)</td></tr>
 109         <tr><td>8</td><td>8</td></tr>
 110         <tr><td>10</td><td>10</td></tr>
 111       </table>
 112     </td>
 113     <td valign=top style="padding-left:25px;">
 114       <table class=thinborder>
 115         <tr><th>x</th><th>B</th></tr>
 116         <tr><td>1</td><td>3</td></tr>
 117         <tr><td>3</td><td>5</td></tr>
 118         <tr><td>5</td><td>7</td></tr>
 119       </table>
 120     </td>
 121     </tr></table>
 122
 123     <div id="graph3" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
 124     <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>
 125
 126     <script type="text/javascript">
 127     g2 = new Dygraph(
 128       document.getElementById("graph3"),
 129 "x,A,B  \n" +
 130 "1,,3   \n" +
 131 "2,2,   \n" +
 132 "3,,5   \n" +
 133 "4,4,   \n" +
 134 "5,,7   \n" +
 135 "6,NaN, \n" +
 136 "8,8,   \n" +
 137 "10,10, \n"
 138       , {
 139         connectSeparatedPoints: true,
 140         drawPoints: true
 141       }
 142     );
 143     </script>
 144
 145     <table><tr>
 146     <td valign=top>
 147     (CSV)
 148     <pre>x,A,B
 149 1,,3
 150 2,2,
 151 3,,5
 152 4,4,
 153 5,,7
 154 6,NaN,
 155 8,8,
 156 10,10,</pre>
 157     </td>
 158     <td valign=top style="padding-left: 25px;">
 159     (native)
 160     <pre>[ [1, null, 3],
 161   [2, 2, null],
 162   [3, null, 5],
 163   [4, 4, null],
 164   [5, null, 7],
 165   [6, NaN, null],
 166   [8, 8, null],
 167   [10, 10, null] ]</pre>
 168     </td>
 169     </tr></table>
 170
 171     <h3>Behavior at the edges of the panel for independent series</h3>
 172     <p> In case only a part of the whole data is visible (e.g. after zooming in) the lines are
 173     drawn to the respective next valid point outside the visible area. </p>
 174
 175     <table><tr>
 176     <td valign=top>
 177     <table>
 178       <table class=thinborder>
 179         <tr><th>x</th><th>A</th></tr>
 180         <tr><td>0</td><td>2</td></tr>
 181         <tr><td>1</td><td>3</td></tr>
 182         <tr><td>2</td><td>3</td></tr>
 183         <tr><td>4</td><td>4</td></tr>
 184         <tr><td>5</td><td>3</td></tr>
 185         <tr><td>6</td><td>3</td></tr>
 186         <tr><td>7</td><td>3</td></tr>
 187         <tr><td>8</td><td>4</td></tr>
 188       </table>
 189     </td>
 190     <td valign=top style="padding-left:25px;">
 191       <table class=thinborder>
 192         <tr><th>x</th><th>B</th></tr>
 193         <tr><td>0</td><td>1</td></tr>
 194         <tr><td>1</td><td>2</td></tr>
 195         <tr><td>2</td><td>1</td></tr>
 196         <tr><td>8</td><td>2</td></tr>
 197       </table>
 198     </td>
 199     </tr></table>
 200
 201     <div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
 202     <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.
 203     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>
 204     <p>Use double click to unzoom and see the currently invisible points</p>
 205
 206     <script type="text/javascript">
 207     g2 = new Dygraph(
 208       document.getElementById("graph2"),
 209 "x,A,B  \n" +
 210 "0,2,1   \n" +
 211 "1,3,2   \n" +
 212 "2,3,1   \n" +
 213 "3,,   \n" +
 214 "4,4,   \n" +
 215 "5,3,   \n" +
 216 "6,3,   \n" +
 217 "7,3,   \n" +
 218 "8,4,2   \n"
 219
 220       , {
 221         connectSeparatedPoints: true,
 222         drawPoints: true,
 223         pointSize: 3,
 224         highlightCircleSize: 5,
 225         dateWindow: [0,3]
 226       }
 227     );
 228     </script>
 229
 230     <table><tr>
 231     <td valign=top>
 232     Index
 233     <pre>&nbsp;
 234 0
 235 1
 236 2
 237 3
 238 4
 239 5
 240 6
 241 7
 242 8</pre>
 243     </td>
 244     <td valign=top>
 245     (CSV)
 246     <pre>x,A,B
 247 0,2,1
 248 1,3,2
 249 2,3,1
 250 3,,
 251 4,4,
 252 5,3,
 253 6,3,
 254 7,3,
 255 8,4,2</pre>
 256     </td>
 257     <td valign=top style="padding-left: 25px;">
 258     (native)
 259     <pre>[
 260   [0, 2, 1],
 261   [1, 3, 2],
 262   [2, 3, 1],
 263   [3, null, null],
 264   [4, 4, null],
 265   [5, 3, null],
 266   [6, 3, null],
 267   [7, 3, null],
 268   [8, 4, 2] ]</pre>
 269     </td>
 270     </tr></table>
 271
 272   </body>
 273 </html>