gallery/independent-series.js

   1 /*global Gallery,Dygraph,data */
   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>"].join("\n");
  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       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     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         connectSeparatedPoints: true,
 159         drawPoints: true
 160       }
 161     );
 162     }
 163   });
 164