X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=gallery%2Findependent-series.js;h=1a1e9020bd31603c2886ed63b9ed615291480822;hb=f808e16e56550f5260f4cf8c335424925e23e6b5;hp=5de2e8b45b422e23ea11728e5393c68c1c528b59;hpb=795b16307db2a673ba7aa3452f6f6b0e93baeb3a;p=dygraphs.git

diff --git a/gallery/independent-series.js b/gallery/independent-series.js
index 5de2e8b..1a1e902 100644
--- a/gallery/independent-series.js
+++ b/gallery/independent-series.js
@@ -1,88 +1,88 @@
-// Use this as a template for new Gallery entries.
+/*global Gallery,Dygraph,data */
 Gallery.register(
   'independent-series',
   {
     name: 'Independent Series',
     title: 'Independent Series',
     setup: function(parent) {
-      parent.innerHTML = 
-    "<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> \
-\
-    <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> \
-\
-    <div id='graph' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> \
-    <p>For example, say you had two series:</p> \
-    <table><tr> \
-    <td valign=top> \
-    <table> \
-      <table class='thinborder'> \
-        <tr><th>x</th><th>A</th></tr> \
-        <tr><td>2</td><td>2</td></tr> \
-        <tr><td>4</td><td>6</td></tr> \
-        <tr><td>6</td><td>4</td></tr> \
-      </table> \
-    </td> \
-    <td valign=top style='padding-left:25px;'> \
-      <table class='thinborder'> \
-        <tr><th>x</th><th>B</th></tr> \
-        <tr><td>1</td><td>3</td></tr> \
-        <tr><td>3</td><td>7</td></tr> \
-        <tr><td>5</td><td>5</td></tr> \
-      </table> \
-    </td> \
-    </tr></table> \
-\
-    <p>Then you would specify the following CSV or native data:</p> \
-    <table><tr> \
-    <td valign=top> \
-    (CSV) \
-    <pre id='csv1'></pre> \
-    </td> \
-    <td valign=top style='padding-left: 25px;'>\
-    (native) \
-    <pre id='native1'></pre> \
-    </td> \
-    </tr></table> \
-\
-    <h3>Encoding a gap</h3>\
-    <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 </p> \
-\
-    <table><tr> \
-    <td valign=top> \
-    <table> \
-      <table class='thinborder'> \
-        <tr><th>x</th><th>A</th></tr> \
-        <tr><td>2</td><td>2</td></tr> \
-        <tr><td>4</td><td>4</td></tr> \
-        <tr><td>6</td><td>(gap)</td></tr> \
-        <tr><td>8</td><td>8</td></tr> \
-        <tr><td>10</td><td>10</td></tr> \
-      </table> \
-    </td> \
-    <td valign=top style='padding-left:25px;'> \
-      <table class='thinborder'> \
-        <tr><th>x</th><th>B</th></tr> \
-        <tr><td>1</td><td>3</td></tr> \
-        <tr><td>3</td><td>5</td></tr> \
-        <tr><td>5</td><td>7</td></tr> \
-      </table> \
-    </td> \
-    </tr></table> \
-\
-    <div id='graph2' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> \
-    <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> \
-\
-    <table><tr> \
-    <td valign=top> \
-    (CSV) \
-    <pre id='csv2'></pre> \
-    </td> \
-    <td valign=top style='padding-left: 25px;'> \
-    (native) \
-    <pre id='native2'></pre> \
-    </td> \
-    </tr></table>"
+      parent.innerHTML = [
+    "<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> ",
+    "",
+    "<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> ",
+    "",
+    "<div id='graph' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> ",
+    "<p>For example, say you had two series:</p> ",
+    "<table><tr> ",
+    "<td valign=top> ",
+    "<table> ",
+    "  <table class='thinborder'> ",
+    "    <tr><th>x</th><th>A</th></tr> ",
+    "    <tr><td>2</td><td>2</td></tr> ",
+    "    <tr><td>4</td><td>6</td></tr> ",
+    "    <tr><td>6</td><td>4</td></tr> ",
+    "  </table> ",
+    "</td> ",
+    "<td valign=top style='padding-left:25px;'> ",
+    "  <table class='thinborder'> ",
+    "    <tr><th>x</th><th>B</th></tr> ",
+    "    <tr><td>1</td><td>3</td></tr> ",
+    "    <tr><td>3</td><td>7</td></tr> ",
+    "    <tr><td>5</td><td>5</td></tr> ",
+    "  </table> ",
+    "</td> ",
+    "</tr></table> ",
+    "",
+    "<p>Then you would specify the following CSV or native data:</p> ",
+    "<table><tr> ",
+    "<td valign=top> ",
+    "(CSV) ",
+    "<pre id='csv1'></pre> ",
+    "</td> ",
+    "<td valign=top style='padding-left: 25px;'>",
+    "(native) ",
+    "<pre id='native1'></pre> ",
+    "</td> ",
+    "</tr></table> ",
+    "",
+    "<h3>Encoding a gap</h3>",
+    "<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 </p> ",
+    "",
+    "<table><tr> ",
+    "<td valign=top> ",
+    "<table> ",
+    "  <table class='thinborder'> ",
+    "    <tr><th>x</th><th>A</th></tr> ",
+    "    <tr><td>2</td><td>2</td></tr> ",
+    "    <tr><td>4</td><td>4</td></tr> ",
+    "    <tr><td>6</td><td>(gap)</td></tr> ",
+    "    <tr><td>8</td><td>8</td></tr> ",
+    "    <tr><td>10</td><td>10</td></tr> ",
+    "  </table> ",
+    "</td> ",
+    "<td valign=top style='padding-left:25px;'> ",
+    "  <table class='thinborder'> ",
+    "    <tr><th>x</th><th>B</th></tr> ",
+    "    <tr><td>1</td><td>3</td></tr> ",
+    "    <tr><td>3</td><td>5</td></tr> ",
+    "    <tr><td>5</td><td>7</td></tr> ",
+    "  </table> ",
+    "</td> ",
+    "</tr></table> ",
+    "",
+    "<div id='graph2' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> ",
+    "<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> ",
+    "",
+    "<table><tr> ",
+    "<td valign=top> ",
+    "(CSV) ",
+    "<pre id='csv2'></pre> ",
+    "</td> ",
+    "<td valign=top style='padding-left: 25px;'> ",
+    "(native) ",
+    "<pre id='native2'></pre> ",
+    "</td> ",
+    "</tr></table>"].join("\n");
     },
     run: function() {
       document.getElementById("csv1").textContent =
@@ -126,7 +126,7 @@ Gallery.register(
           "  [10, 10, null]\n" +
           "]";
 
-      var g1 = new Dygraph(
+      new Dygraph(
         document.getElementById('graph'),
         [
           [1, null, 3],
@@ -143,19 +143,18 @@ Gallery.register(
         }
       );
 
-    g2 = new Dygraph(
+    new Dygraph(
       document.getElementById('graph2'),
-'x,A,B  \n' +
-'1,,3   \n' +
-'2,2,   \n' +
-'3,,5   \n' +
-'4,4,   \n' +
-'5,,7   \n' +
-'6,NaN, \n' +
-'8,8,   \n' +
-'10,10, \n'
-      , {
-        labels: ['x', 'A', 'B' ],
+      'x,A,B  \n' +
+      '1,,3   \n' +
+      '2,2,   \n' +
+      '3,,5   \n' +
+      '4,4,   \n' +
+      '5,,7   \n' +
+      '6,NaN, \n' +
+      '8,8,   \n' +
+      '10,10, \n',
+      {
         connectSeparatedPoints: true,
         drawPoints: true
       }