gallery/independent-series.js

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