use a DOM readiness listener everywhere

(mostly ours but also jQuery’s) + small fixes while here
danvk · Feb 16, 2023 · 23a5eb1 · 23a5eb1
1 parent a4adb3b
commit 23a5eb1
Show file tree

Hide file tree

Showing 100 changed files with 371 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -27,14 +27,16 @@ Get help with dygraphs on [Stack Overflow][] (preferred) and [Google Groups][].
 <body>
 <div id="graphdiv"></div>
 <script type="text/javascript"><!--//--><![CDATA[//><!--
-  g = new Dygraph(
+  Dygraph.onDOMready(function onDOMready() {  // or jQuery $() etc.
+    g = new Dygraph(
         document.getElementById("graphdiv"),  // containing div
         "Date,Temperature\n" +                // the data series
         "2008-05-07,75\n" +
         "2008-05-08,70\n" +
         "2008-05-09,80\n",
         { }                                   // the options
       );
+  });
 //--><!]]></script>
 </body>
 </html>

diff --git a/docs/annotations.html b/docs/annotations.html
@@ -11,6 +11,7 @@ <h2>dygraphs Annotations</h2><div class="annotationpage">
 <h3>Demo: Dow Jones Industrial Average</h3>
 <div id="dow_chart" style="width: 800px; height: 250px;"></div>
 <script type="text/javascript"><!--//--><![CDATA[//><!--
+Dygraph.onDOMready(function onDOMready() {
   // From http://www.econstats.com/eqty/eq_d_mi_3.csv
   stockchart = new Dygraph(
     document.getElementById('dow_chart'),
@@ -54,6 +55,7 @@ <h3>Demo: Dow Jones Industrial Average</h3>
     }
     ] );
   });
+});
 //--><!]]></script>
 
 <h3>Adding Annotations</h3>
@@ -82,6 +84,7 @@ <h3>Adding Annotations</h3>
       <h3 style="text-align:center">HTML</h3>
   <pre>
 &lt;script type=&#34;text/javascript&#34;&gt;
+Dygraph.onDOMready(function onDOMready() {
   g = new Dygraph(
     document.getElementById(&#34;graphdiv&#34;),
     &#34;Date,Temperature\n&#34; +
@@ -100,6 +103,7 @@ <h3 style="text-align:center">HTML</h3>
     }
     ]);
   });
+});
 &lt;/script&gt;
 </pre>
 </div>
@@ -108,6 +112,7 @@ <h3 style="text-align:center">HTML</h3>
   <h3 style="text-align:center">OUTPUT</h3>
   <div id="graphdiv" style="width: 350px; height: 250px;"></div>
   <script type="text/javascript"><!--//--><![CDATA[//><!--
+  Dygraph.onDOMready(function onDOMready() {
     g = new Dygraph(
 
       // containing div
@@ -129,6 +134,7 @@ <h3 style="text-align:center">OUTPUT</h3>
         }
         ]);
     });
+  });
   //--><!]]></script>
 </div>
 </div>

diff --git a/docs/css.html b/docs/css.html
@@ -16,6 +16,7 @@ <h2>CSS Reference</h2>
 
 <div id="demodiv"></div>
 <script type="text/javascript"><!--//--><![CDATA[//><!--
+Dygraph.onDOMready(function onDOMready() {
   g = new Dygraph(
       document.getElementById("demodiv"),
       "dow.txt",
@@ -43,6 +44,7 @@ <h2>CSS Reference</h2>
           $('.dygraph-legend').text('.dygraph-legend');
         },
       });
+});
 //--><!]]></script>
 
 <p>The CSS classes for the chart labels are:</p>

diff --git a/docs/index.html b/docs/index.html
@@ -33,20 +33,19 @@ <h4>dygraphs is a fast, flexible open source JavaScript charting library.</h4>
     $(function () {
 	if (window.location.hostname === 'dygraphs.com')
 		document.getElementById('mirrornote').style.display = 'none';
-    });
 
-    g = new Dygraph(
-      document.getElementById("demodiv"),
-      "ny-vs-sf.txt",
-      {
-        rollPeriod: 14,
-        showRoller: true,
-        customBars: true,
-        title: 'NYC vs. SF',
-        ylabel: 'Temperature (F)',
-        legend: 'always'
-      }
-    );
+	g = new Dygraph(
+	    document.getElementById("demodiv"),
+	    "ny-vs-sf.txt", {
+		rollPeriod: 14,
+		showRoller: true,
+		customBars: true,
+		title: 'NYC vs. SF',
+		ylabel: 'Temperature (F)',
+		legend: 'always'
+	    }
+	  );
+    });
   //--><!]]></script>
 
   <p>The chart is <i>interactive</i>: you can mouse over to highlight individual values. You can click and drag to zoom. Double-clicking will zoom you back out. Shift-drag will pan. You can change the number and hit enter to adjust the averaging period.</p>

diff --git a/docs/tutorial.html b/docs/tutorial.html
@@ -18,6 +18,7 @@ <h3 style="text-align:center">HTML</h3>
 &lt;/head&gt;&lt;body&gt;
 &lt;div id="graphdiv"&gt;&lt;/div&gt;
 &lt;script type="text/javascript"&gt;
+Dygraph.onDOMready(function onDOMready() {
   g = new Dygraph(
 
     // containing div
@@ -30,6 +31,7 @@ <h3 style="text-align:center">HTML</h3>
     "2008-05-09,80\n"
 
   );
+});
 &lt;/script&gt;
 &lt;/body&gt;&lt;/html&gt;
 </pre>
@@ -38,8 +40,8 @@ <h3 style="text-align:center">HTML</h3>
     <h3 style="text-align:center">OUTPUT</h3>
     <div id="graphdiv"></div>
     <script type="text/javascript"><!--//--><![CDATA[//><!--
+    Dygraph.onDOMready(function onDOMready() {
       g = new Dygraph(
-
         // containing div
         document.getElementById("graphdiv"),
 
@@ -49,12 +51,17 @@ <h3 style="text-align:center">OUTPUT</h3>
         "2008-05-08,70\n" +
         "2008-05-09,80\n"
       );
+    });
     //--><!]]></script>
   </div>
 </div>
 
 <p style="clear:both">In order to keep this example self-contained,
- the second parameter is raw CSV data.
+ the second parameter is raw CSV data. You can use your favourite
+ “defer until DOM is ready” method (e.g. <a
+ href="http://api.prototypejs.org/dom/document/observe/index.html">Prototype</a> or <a
+ href="https://api.jquery.com/ready/">jQuery</a>); dygraphs includes a
+ small self-contained one that can be used if nothing else is available.
  The dygraphs library parses this data (including column headers),
  resizes its container to a reasonable default,
  calculates appropriate axis ranges and tick marks and draws the graph.
@@ -85,11 +92,13 @@ <h3 style="text-align:center">HTML</h3>
 &lt;div id="graphdiv2"
   style="width:500px; height:300px;"&gt;&lt;/div&gt;
 &lt;script type="text/javascript"&gt;
+Dygraph.onDOMready(function onDOMready() {
   g2 = new Dygraph(
     document.getElementById("graphdiv2"),
     "temperatures.csv", // path to CSV file
-    {}          // options
+    {}                  // options
   );
+});
 &lt;/script&gt;
 &lt;/body&gt;&lt;/html&gt;
 </pre>
@@ -98,11 +107,13 @@ <h3 style="text-align:center">HTML</h3>
     <h3 style="text-align:center">OUTPUT</h3>
     <div id="graphdiv2" style="width:500px; height:300px;"></div>
     <script type="text/javascript"><!--//--><![CDATA[//><!--
+    Dygraph.onDOMready(function onDOMready() {
       g2 = new Dygraph(
         document.getElementById("graphdiv2"),
         "temperatures.csv",
         {}
       );
+    });
     //--><!]]></script>
   </div>
 </div>
@@ -135,6 +146,7 @@ <h3 style="text-align:center">HTML</h3>
 &lt;div id="graphdiv3"
   style="width:500px; height:300px;"&gt;&lt;/div&gt;
 &lt;script type="text/javascript"&gt;
+Dygraph.onDOMready(function onDOMready() {
   g3 = new Dygraph(
     document.getElementById("graphdiv3"),
     "temperatures.csv",
@@ -143,6 +155,7 @@ <h3 style="text-align:center">HTML</h3>
       showRoller: true
     }
   );
+});
 &lt;/script&gt;
 &lt;/body&gt;&lt;/html&gt;
 </pre>
@@ -151,6 +164,7 @@ <h3 style="text-align:center">HTML</h3>
     <h3 style="text-align:center">OUTPUT</h3>
     <div id="graphdiv3" style="width:500px; height:300px;"></div>
     <script type="text/javascript"><!--//--><![CDATA[//><!--
+    Dygraph.onDOMready(function onDOMready() {
       g3 = new Dygraph(
         document.getElementById("graphdiv3"),
         "temperatures.csv",
@@ -159,6 +173,7 @@ <h3 style="text-align:center">OUTPUT</h3>
           showRoller: true
         }
       );
+    });
     //--><!]]></script>
   </div>
 </div>
@@ -194,6 +209,7 @@ <h3 style="text-align:center">HTML</h3>
 &lt;div id="graphdiv4"
   style="width:480px; height:320px;"&gt;&lt;/div&gt;
 &lt;script type="text/javascript"&gt;
+Dygraph.onDOMready(function onDOMready() {
   g4 = new Dygraph(
     document.getElementById("graphdiv4"),
     "twonormals.csv",
@@ -204,6 +220,7 @@ <h3 style="text-align:center">HTML</h3>
       valueRange: [50,125]
     }
   );
+});
 &lt;/script&gt;
 &lt;/body&gt;&lt;/html&gt;
 </pre>
@@ -212,6 +229,7 @@ <h3 style="text-align:center">HTML</h3>
   <h3 style="text-align:center">OUTPUT</h3>
   <div id="graphdiv4" style="width:480px; height:320px;"></div>
   <script type="text/javascript"><!--//--><![CDATA[//><!--
+  Dygraph.onDOMready(function onDOMready() {
     g4 = new Dygraph(
       document.getElementById("graphdiv4"),
       "twonormals.csv",
@@ -222,6 +240,7 @@ <h3 style="text-align:center">OUTPUT</h3>
         valueRange: [50,125]
       }
     );
+  });
   //--><!]]></script>
 </div>
 </div>
@@ -279,6 +298,7 @@ <h2 id="baseball">Charting Fractions</h2>
 <div style="width:750px; text-align:center; font-weight: bold; font-size: 125%;">Batting Average for Ichiro Suzuki vs. Mariners (2004)</div>
 <div id="baseballdiv" style="width:750px; height:300px;"></div>
 <script type="text/javascript"><!--//--><![CDATA[//><!--
+Dygraph.onDOMready(function onDOMready() {
   new Dygraph(
     document.getElementById("baseballdiv"),
     "suzuki-mariners.txt",
@@ -289,6 +309,7 @@ <h2 id="baseball">Charting Fractions</h2>
       rollPeriod: 15
     }
   );
+});
 //--><!]]></script>
 
 <b>Code:</b>
@@ -331,7 +352,8 @@ <h2 id="stock">One last demo</h2>
 </p>
 
 <script type="text/javascript"><!--//--><![CDATA[//><!--
-  var stock_annotations = [
+Dygraph.onDOMready(function onDOMready() {
+  stock_annotations = [
     {
       series: "Real",
       x: "1929-08-15",
@@ -376,6 +398,7 @@ <h2 id="stock">One last demo</h2>
       }
     }
   );
+});
 
   function stockchange(el) {
     stockchart.setVisibility(el.id, el.checked);
@@ -402,7 +425,7 @@ <h2 id="stock">One last demo</h2>
 sed '1,/Series Id,Year,/d' cpi-u.txt | sed '/^$/,$d' | cut -d, -f2,3,4 | perl -ne 'print if /,M(0[0-9]|1[012]),/' | perl -pe 's/(\d{4}),M(\d{2}),/$1-$2\t/g' > cpi-u.tsv
 
 # Merge:
-join -t'     ' cpi-u.tsv monthly-djia.tsv > annotated-djia.tsv
+join -t'	' cpi-u.tsv monthly-djia.tsv > annotated-djia.tsv
 perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high) = split /\t/; $cpi /= 100.0; print "$m-15,$low;$close;$high,",($low/$cpi),";",($close/$cpi),";",($high/$cpi),"\n"' annotated-djia.tsv > dow.txt
 
 -->

diff --git a/gallery/index.html b/gallery/index.html
@@ -55,7 +55,8 @@
   <body>
     <table>
       <tr>
-        <td><h2><a href="../index.html">Dygraphs</a> Gallery</h2></td>
+        <td><h2 style="white-space:nowrap;"><a
+         href="../index.html">Dygraphs</a> Gallery</h2></td>
         <td></td>
         <td id="demotitle"></td>
       </tr>
@@ -71,6 +72,8 @@
         </td>
       </tr>
     </table>
-  <script type="text/javascript">Gallery.start()</script>
+  <script type="text/javascript"><!--//--><![CDATA[//><!--
+    $(Gallery.start);
+  //--><!]]></script>
   </body>
 </html>
diff --git a/src/dygraph.js b/src/dygraph.js
@@ -17,9 +17,11 @@
   Usage:
    <div id="graphdiv" style="width:800px; height:500px;"></div>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
+   $(function onDOMready() {
      new Dygraph(document.getElementById("graphdiv"),
                  "datafile.csv",  // CSV file with headers
                  { }); // options
+   });
    //--><!]]></script>
 
  The CSV file is of the form

diff --git a/tests/annotation-gviz.html b/tests/annotation-gviz.html
@@ -10,6 +10,7 @@
 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript"><!--//--><![CDATA[//><!--
+    Dygraph.onDOMready(function onDOMready() {
       google.load('visualization', '1', {'packages':['annotatedtimeline']});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
@@ -42,6 +43,7 @@
         var g = new Dygraph.GVizChart(document.getElementById("dg_div"));
         g.draw(data, {displayAnnotations: true, labelsKMB: true});
       }
+    });
     //--><!]]></script>
   </head>
 

diff --git a/tests/annotation-native.html b/tests/annotation-native.html
@@ -14,6 +14,7 @@
     <div id="demodiv"></div>
 
     <script type="text/javascript"><!--//--><![CDATA[//><!--
+    Dygraph.onDOMready(function onDOMready() {
       g = new Dygraph(
               document.getElementById("demodiv"),
               [
@@ -37,6 +38,7 @@
         shortText: 'M',
         text: 'Marker'
       }]);
+    });
     //--><!]]></script>
   </body>
 </html>
diff --git a/tests/annotation.html b/tests/annotation.html
@@ -23,6 +23,7 @@ <h3>Annotations Demo</h3>
     <div style="position:absolute; left:700px; top: 200px;" id="list"></div>
 
     <script type="text/javascript"><!--//--><![CDATA[//><!--
+    Dygraph.onDOMready(function onDOMready() {
       var eventDiv = document.getElementById("events");
       function nameAnnotation(ann) {
         return "(" + ann.series + ", " + ann.x + ")";
@@ -108,7 +109,7 @@ <h3>Annotations Demo</h3>
         g.setAnnotations(annotations);
       }
 
-      function add() {
+      add = function add() {
         var x = last_ann + 2;
         var annnotations = g.annotations();
         annotations.push( {
@@ -122,7 +123,7 @@ <h3>Annotations Demo</h3>
         g.setAnnotations(annotations);
       }
 
-      function bottom(el) {
+      bottom = function bottom(el) {
         var to_bottom = true;
         if (el.value != 'Shove to bottom') to_bottom = false;
 
@@ -176,6 +177,7 @@ <h3>Annotations Demo</h3>
           num++;
         }
       });
+    });
     //--><!]]></script>
   </body>
 </html>