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     <p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.</p>
  31
  32     <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>
  33
  34     <div id="graph" style="position: absolute; top: 100px; left: 400px; width: 400px; height: 300px;"></div>
  35     <p>For example, say you had two series:</p>
  36     <table><tr>
  37     <td valign=top>
  38     <table>
  39       <table class=thinborder>
  40         <tr><th>x</th><th>A</th></tr>
  41         <tr><td>2</td><td>2</td></tr>
  42         <tr><td>4</td><td>4</td></tr>
  43         <tr><td>6</td><td>6</td></tr>
  44       </table>
  45     </td>
  46     <td valign=top style="padding-left:25px;">
  47       <table class=thinborder>
  48         <tr><th>x</th><th>B</th></tr>
  49         <tr><td>1</td><td>3</td></tr>
  50         <tr><td>3</td><td>5</td></tr>
  51         <tr><td>5</td><td>7</td></tr>
  52       </table>
  53     </td>
  54     </tr></table>
  55
  56     <p>Then you would specify the following CSV or native data:</p>
  57     <table><tr>
  58     <td valign=top>
  59     (CSV)
  60     <pre>X,A,B
  61 1,,3
  62 2,2,
  63 3,,5
  64 4,4,
  65 5,,7
  66 6,6,</pre>
  67     </td>
  68     <td valign=top style="padding-left: 25px;">
  69     (native)
  70     <pre>[
  71 [1, null, 3],
  72 [2, 2, null],
  73 [3, null, 5],
  74 [4, 4, null],
  75 [5, null, 7],
  76 [6, 6, null] ]</pre>
  77     </td>
  78     </tr></table>
  79
  80     <script type="text/javascript">
  81     new Dygraph(
  82       document.getElementById("graph"),
  83       [
  84         [1, null, 3],
  85         [2, 2, null],
  86         [3, null, 5],
  87         [4, 4, null],
  88         [5, null, 7],
  89         [6, 6, null]
  90       ],
  91       {
  92         labels: ["x", "A", "B" ],
  93         connectSeparatedPoints: true
  94       }
  95     );
  96     </script>
  97
  98     <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
  99
 100     <table><tr>
 101     <td valign=top>
 102     <table>
 103       <table class=thinborder>
 104         <tr><th>x</th><th>A</th></tr>
 105         <tr><td>2</td><td>2</td></tr>
 106         <tr><td>4</td><td>4</td></tr>
 107         <tr><td>6</td><td>(gap)</td></tr>
 108         <tr><td>8</td><td>8</td></tr>
 109         <tr><td>10</td><td>10</td></tr>
 110       </table>
 111     </td>
 112     <td valign=top style="padding-left:25px;">
 113       <table class=thinborder>
 114         <tr><th>x</th><th>B</th></tr>
 115         <tr><td>1</td><td>3</td></tr>
 116         <tr><td>3</td><td>5</td></tr>
 117         <tr><td>5</td><td>7</td></tr>
 118       </table>
 119     </td>
 120     </tr></table>
 121
 122     <div id="graph2" style="float: left; width: 400px; height: 300px;"></div>
 123     <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>
 124
 125     <script type="text/javascript">
 126     new Dygraph(
 127       document.getElementById("graph2"),
 128       [
 129         [1, null, 3],
 130         [2, 2, null],
 131         [3, null, 5],
 132         [4, 4, null],
 133         [5, null, 7],
 134         [6, NaN, null],
 135         [8, 8, null],
 136         [10, 10, null]
 137       ],
 138       {
 139         labels: ["x", "A", "B" ],
 140         connectSeparatedPoints: true
 141       }
 142     );
 143     </script>
 144
 145   </body>
 146 </html>