From 605b6119bcc80db4ea100d66df3483425dcd32af Mon Sep 17 00:00:00 2001 From: Robert Konigsberg Date: Mon, 16 Jan 2012 19:28:14 -0500 Subject: [PATCH] Rewrite HTML generation. --- gallery/annotation.js | 14 ++-- gallery/drawing.js | 18 ++--- gallery/dynamic-update.js | 11 +-- gallery/gallery.js | 2 +- gallery/highlighted-region.js | 6 +- gallery/independent-series.js | 156 ++++++++++++++++++++--------------------- gallery/interaction.js | 64 ++++++++--------- gallery/linear-regression.js | 22 +++--- gallery/link-interaction.js | 22 +++--- gallery/plotter.js | 38 +++++----- gallery/range-selector.js | 11 +-- gallery/stock.js | 11 +-- gallery/styled-chart-labels.js | 10 +-- gallery/synchronize.js | 18 ++--- gallery/temperature-sf-ny.js | 11 +-- 15 files changed, 209 insertions(+), 205 deletions(-) diff --git a/gallery/annotation.js b/gallery/annotation.js index 358c2a9..e0e0319 100644 --- a/gallery/annotation.js +++ b/gallery/annotation.js @@ -4,13 +4,13 @@ Gallery.register( name: 'Annotations', title: 'Dynamic Annotations Demo', setup: function(parent) { - parent.innerHTML = - "

Click any point to add an annotation to it or click 'Add Annotation'.

" + - "" + - "" + - "
" + - "
" + - "
"; + parent.innerHTML = [ + "

Click any point to add an annotation to it or click 'Add Annotation'.

", + "", + "", + "
", + "
", + "
" ].join("\n"); }, run: function() { diff --git a/gallery/drawing.js b/gallery/drawing.js index fb5e8de..eef3091 100644 --- a/gallery/drawing.js +++ b/gallery/drawing.js @@ -4,15 +4,15 @@ Gallery.register( name: 'Time Series Drawing Demo', title: 'Time Series Drawing Demo', setup: function(parent) { - parent.innerHTML = - "
" + - "
" + - "
" + - "
" + - "
" + - "
" + - "

Toolbar/cursor icons are CC-licensed from " + - "FatCow.

"; + parent.innerHTML = [ + "
", + "
", + "
", + "
", + "
", + "
", + "

Toolbar/cursor icons are CC-licensed from ", + "FatCow.

"].join("\n"); }, run: function() { diff --git a/gallery/dynamic-update.js b/gallery/dynamic-update.js index 9141df5..0eb82bb 100644 --- a/gallery/dynamic-update.js +++ b/gallery/dynamic-update.js @@ -4,11 +4,12 @@ Gallery.register( name: 'Dynamic Update', title: 'Live random data', setup: function(parent) { - parent.innerHTML = "
" + - "

This test is modeled after a " + - "highcharts" + - "test. New points should appear once per second. Try zooming and " + - "panning over to the right edge to watch them show up.

"; + parent.innerHTML = [ + "
", + "

This test is modeled after a ", + "highcharts", + "test. New points should appear once per second. Try zooming and ", + "panning over to the right edge to watch them show up.

"].join("\n"); }, run: function() { var data = []; diff --git a/gallery/gallery.js b/gallery/gallery.js index 5a907bb..14cd341 100644 --- a/gallery/gallery.js +++ b/gallery/gallery.js @@ -89,4 +89,4 @@ Gallery.hashChange = function(event) { elem.onclick(); } } -}; \ No newline at end of file +}; diff --git a/gallery/highlighted-region.js b/gallery/highlighted-region.js index 4a13d1e..3a951f4 100644 --- a/gallery/highlighted-region.js +++ b/gallery/highlighted-region.js @@ -4,9 +4,9 @@ Gallery.register( name: 'Highlighted Region', title: 'Draws a time series with an unusual region highlighted', setup: function(parent) { - parent.innerHTML = - "
" + - "

When you zoom and pan, the region remains highlighted.

"; + parent.innerHTML = [ + "
", + "

When you zoom and pan, the region remains highlighted.

"].join("\n"); }, run: function() { // A basic sinusoidal data series. diff --git a/gallery/independent-series.js b/gallery/independent-series.js index 5de2e8b..5ff8d13 100644 --- a/gallery/independent-series.js +++ b/gallery/independent-series.js @@ -5,84 +5,84 @@ Gallery.register( name: 'Independent Series', title: 'Independent Series', setup: function(parent) { - parent.innerHTML = - "

By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.

\ -\ -

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 null for each of the other series.

\ -\ -
\ -

For example, say you had two series:

\ - \ - \ - \ -
\ - \ -
\ - \ - \ - \ - \ -
xA
22
46
64
\ - 		\ - \ - \ - \ - \ - \ -
xB
13
37
55
\ -
\ -\ -

Then you would specify the following CSV or native data:

\ - \ - \ - \ -
\ - (CSV) \ - 
 \
-    		\
-    (native) \
-    
 \
-    
 \
-\
-    
Encoding a gap
\
-    
There's one extra wrinkle. What if one of the series has a missing \
-    value, i.e. what if your series are something like 
 \
-\
-     \
-     \
-     \
-    
 \
-     \
-      
 \
-         \
-         \
-         \
-         \
-         \
-         \
-      
xA
22
44
6(gap)
88
1010
 \
-    		 \
-       \
-         \
-         \
-         \
-         \
-      
xB
13
35
57
 \
-    
 \
-\
-    
 \
-    
The gap would normally be encoded as a null, or missing value. But when you use connectSeparatedPoints, that has a special meaning. Instead, you have to use NaN. This is a bit of a hack, but it gets the job done.
 \
-\
-     \
-     \
-     \
-    
 \
-    (CSV) \
-    
 \
-    		 \
-    (native) \
-    
 \
-    
"
+      parent.innerHTML = [
+    "
By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.
 ",
+    "",
+    "
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 null for each of the other series.
 ",
+    "",
+    "
 ",
+    "
For example, say you had two series:
 ",
+    " ",
+    " ",
+    " ",
+    "
 ",
+    " ",
+    "  
 ",
+    "     ",
+    "     ",
+    "     ",
+    "     ",
+    "  
xA
22
46
64
 ",
+    "		 ",
+    "   ",
+    "     ",
+    "     ",
+    "     ",
+    "     ",
+    "  
xB
13
37
55
 ",
+    "
 ",
+    "",
+    "
Then you would specify the following CSV or native data:
 ",
+    " ",
+    " ",
+    " ",
+    "
 ",
+    "(CSV) ",
+    "
 ",
+    "		",
+    "(native) ",
+    "
 ",
+    "
 ",
+    "",
+    "
Encoding a gap
",
+    "
There's one extra wrinkle. What if one of the series has a missing ",
+    "value, i.e. what if your series are something like 
 ",
+    "",
+    " ",
+    " ",
+    " ",
+    "
 ",
+    " ",
+    "  
 ",
+    "     ",
+    "     ",
+    "     ",
+    "     ",
+    "     ",
+    "     ",
+    "  
xA
22
44
6(gap)
88
1010
 ",
+    "		 ",
+    "   ",
+    "     ",
+    "     ",
+    "     ",
+    "     ",
+    "  
xB
13
35
57
 ",
+    "
 ",
+    "",
+    "
 ",
+    "
The gap would normally be encoded as a null, or missing value. But when you use connectSeparatedPoints, that has a special meaning. Instead, you have to use NaN. This is a bit of a hack, but it gets the job done.
 ",
+    "",
+    " ",
+    " ",
+    " ",
+    "
 ",
+    "(CSV) ",
+    "
 ",
+    "		 ",
+    "(native) ",
+    "
 ",
+    "
"].join("\n");
     },
     run: function() {
       document.getElementById("csv1").textContent =
diff --git a/gallery/interaction.js b/gallery/interaction.js
index 7ef64b0..03b30e4 100644
--- a/gallery/interaction.js
+++ b/gallery/interaction.js
@@ -4,38 +4,38 @@ Gallery.register(
     name: 'Custom interaction models',
     title: 'title',
     setup: function(parent) {
-      parent.innerHTML =
-          "" +
-          "" +
-          "" +
-          "" +
-          "" +
-          "
" +
-          "Default interaction model" +
-          "
" +
-          "		Zoom: click-drag
Pan: shift-click-drag
Restore zoom level: double-click
" +
-          "
" +
-          "No interaction model" +
-          "
" +
-          "		Click and drag all you like, it won't do anything!" +
-          "
" +
-          "
" +
-          "Custom interaction model" +
-          "" +
-          "
" +
-          "		" +
-          "Zoom in: double-click, scroll wheel
" +
-          "Zoom out: ctrl-double-click, scroll wheel
" +
-          "Standard Zoom: shift-click-drag" +
-          "Standard Pan: click-drag
" +
-          "Restore zoom level: press button
" +
-          "
" +
-          "Fun model!" +
-          "
" +
-          "		" +
-          "Keep the mouse button pressed, and hover over all points" +
-          "to mark them." +
-          "
";
+      parent.innerHTML = [
+          "",
+          "",
+          "",
+          "",
+          "",
+          "
",
+          "Default interaction model",
+          "
",
+          "		Zoom: click-drag
Pan: shift-click-drag
Restore zoom level: double-click
",
+          "
",
+          "No interaction model",
+          "
",
+          "		Click and drag all you like, it won't do anything!",
+          "
",
+          "
",
+          "Custom interaction model",
+          "",
+          "
",
+          "		",
+          "Zoom in: double-click, scroll wheel
",
+          "Zoom out: ctrl-double-click, scroll wheel
",
+          "Standard Zoom: shift-click-drag",
+          "Standard Pan: click-drag
",
+          "Restore zoom level: press button
",
+          "
",
+          "Fun model!",
+          "
",
+          "		",
+          "Keep the mouse button pressed, and hover over all points",
+          "to mark them.",
+          "
"].join("\n");
 
     },
     run: function() {
diff --git a/gallery/linear-regression.js b/gallery/linear-regression.js
index 0a93b8f..de02075 100644
--- a/gallery/linear-regression.js
+++ b/gallery/linear-regression.js
@@ -5,17 +5,17 @@ Gallery.register(
     name: 'Linear Regressions',
     title: 'Linear Regression Demo',
     setup: function(parent) {
-      parent.innerHTML =
-        "
Click the buttons to generate linear regressions over either data "+
-        "series. If you zoom in and then click the regression button, the regression "+
-        "will only be run over visible points. Zoom back out to see what the local "+
-        "regression looks like over the full data.
 "+
-        "
" +
-        "
" + 
-        " " +
-        " " +
-        "" +
-        "
";
+      parent.innerHTML = [
+        "
Click the buttons to generate linear regressions over either data ",
+        "series. If you zoom in and then click the regression button, the regression ",
+        "will only be run over visible points. Zoom back out to see what the local ",
+        "regression looks like over the full data.
 ",
+        "
",
+        "
",
+        " ",
+        " ",
+        "",
+        "
"].join("\n");
     },
     run: function() {
       document.getElementById("ry1").onclick = function() { regression(1) };
diff --git a/gallery/link-interaction.js b/gallery/link-interaction.js
index 5d9b050..f0bfecf 100644
--- a/gallery/link-interaction.js
+++ b/gallery/link-interaction.js
@@ -4,17 +4,17 @@ Gallery.register(
   {
     name: 'Link Interaction',
     setup: function(parent) {
-      parent.innerHTML =
-          "
" +
-          "Zoom:" +
-          "hour " +
-          "day " +
-          "week " +
-          "month " +
-          "full " +
-          "Pan: " +
-          "left " +
-          "right ";
+      parent.innerHTML = [
+          "
",
+          "Zoom:",
+          "hour ",
+          "day ",
+          "week ",
+          "month ",
+          "full ",
+          "Pan: ",
+          "left ",
+          "right "].join("\n");
     },
     run: function() {
       var r = [ ];
diff --git a/gallery/plotter.js b/gallery/plotter.js
index dfbe4b2..268ea88 100644
--- a/gallery/plotter.js
+++ b/gallery/plotter.js
@@ -5,25 +5,25 @@ Gallery.register(
     name: 'Function Plotter',
     title: 'Define your data with functions',
     setup: function(parent) {
-      parent.innerHTML =
-        "
Equation: 
\n" +
-        "
\n" +
-        "Preset functions: \n" +
-        "
\n" +
-        "\n" +
-        "    
x range:  \n" +
-        "    to 
\n" +
-        "    
\n" +
-        "\n" +
-        "    
";
+      parent.innerHTML = [
+        "
Equation: 
",
+        "
",
+        "Preset functions: ",
+        "
",
+        "",
+        "    
x range:  ",
+        "    to 
",
+        "    
",
+        "",
+        "    
"].join("\n");
 
     },
     run: function() {
diff --git a/gallery/range-selector.js b/gallery/range-selector.js
index 4d9a82a..57ac71b 100644
--- a/gallery/range-selector.js
+++ b/gallery/range-selector.js
@@ -4,11 +4,12 @@ Gallery.register(
     name: 'Range Selector',
     title: 'Demo of the Range Selector',
     setup: function(parent) {
-      parent.innerHTML =
-          "
No roll period.
" +
-          "
" +
-          "
Roll period of 14 timesteps, custom range selector height and plot color.
" +
-          "
";
+      parent.innerHTML = [
+          "
No roll period.
",
+          "
",
+          "",
+          "
Roll period of 14 timesteps, custom range selector height and plot color.
",
+          "
"].join("\n");
     },
     run: function() {
       g1 = new Dygraph(
diff --git a/gallery/stock.js b/gallery/stock.js
index 0cee3fb..cb7fe3e 100644
--- a/gallery/stock.js
+++ b/gallery/stock.js
@@ -4,11 +4,12 @@ Gallery.register(
     name: 'Stock Chart Demo',
     title: 'Stock Chart Demo',
     setup: function(parent) {
-      parent.innerHTML = "

" +
-          "
" +
-          " " +
-          "" +
-          "
";
+      parent.innerHTML = [
+          "

",
+          "
",
+          "   ",
+          "  ",
+          "
"].join("\n");
     },
     run: function() {
       var g = new Dygraph(document.getElementById("stock_div"), stockData,
diff --git a/gallery/styled-chart-labels.js b/gallery/styled-chart-labels.js
index 6139526..1248855 100644
--- a/gallery/styled-chart-labels.js
+++ b/gallery/styled-chart-labels.js
@@ -4,11 +4,11 @@ Gallery.register(
     name: 'CSS label styling',
     title: 'Each chart label is styled independently with CSS',
     setup: function(parent) {
-      parent.innerHTML =
-          "
This chart's labels are styled
" +
-          "
" +
-          "
This version of the chart uses the default styles:
" +
-          "
";
+      parent.innerHTML = [
+          "
This chart's labels are styled
",
+          "
",
+          "
This version of the chart uses the default styles:
",
+          "
"].join("\n");
     },
     run: function() {
       g = new Dygraph(
diff --git a/gallery/synchronize.js b/gallery/synchronize.js
index 8e1eb77..9675464 100644
--- a/gallery/synchronize.js
+++ b/gallery/synchronize.js
@@ -5,15 +5,15 @@ Gallery.register(
     name: 'Synchronization',
     title: 'Multiple graphs in sync',
     setup: function(parent) {
-      parent.innerHTML =
-        "
Zooming and panning on any of the charts will zoom and pan all the" +
-        "others.
" +
-        "
" +
-        "" +
-        "" +
-        "" +
-        "" +
-        "
";
+      parent.innerHTML = [
+        "
Zooming and panning on any of the charts will zoom and pan all the",
+        "others.
",
+        "
",
+        "",
+        "",
+        "",
+        "",
+        "
"].join("\n");
     },
     run: function() {
       gs = [];
diff --git a/gallery/temperature-sf-ny.js b/gallery/temperature-sf-ny.js
index 8f43d1e..d903b8b 100644
--- a/gallery/temperature-sf-ny.js
+++ b/gallery/temperature-sf-ny.js
@@ -5,11 +5,12 @@ Gallery.register(
     name: 'Roll Periods and Error Bars',
     title: 'Demo of a graph with many data points and custom error bars.',
     setup: function(parent) {
-      parent.innerHTML =
-          "
Roll period of 14 timesteps.
" +
-          "
" +
-          "
No roll period.
" +
-          "
";
+      parent.innerHTML = [
+          "
Roll period of 14 timesteps.
",
+          "
",
+          "
No roll period.
",
+          "
"]
+          .join("\n");
     },
     run: function() {
       g1 = new Dygraph(
-- 
2.7.4