gallery/independent-series.js

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