tests/independent-series.html

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