Make sure that canvasx and canvasy properties are initialized from the start (#896)

Adding fields to a structure after it is created can be slow on some
browsers, like Chrome.

Adding a demo to benchmark many points, this seems to speed up my
Chromium from about 2.8-3s to about 1.8s.

Thanks to Christopher Palmer (@thecav) for the analysis and specific
suggestion.

diff --git a/gallery/data.js b/gallery/data.js
index bbccab0..3ab0b66 100644 (file)
--- a/gallery/data.js
+++ b/gallery/data.js
@@ -2683,3 +2683,11 @@ var stockData = function() {
       "2009-09-15,9280.67;9712.28;9829.87,4297.2232125907;4497.07133894216;4551.51896800004\n" +
       "2009-10-15,9487.67;9712.73;10092.2,4388.84340147194;4492.9525342659;4668.48924723722\n";
 };
+
+function dataManyPoints() {
+    var data = [];
+    for (var i = 0; i < 1000000; ++i) {
+       data[i] = [i, i % 1009, i % 1013, i % 1019, i % 1021]
+    }
+    return data
+}

diff --git a/gallery/index.html b/gallery/index.html
index 6d546b0..c834c31 100644 (file)
--- a/gallery/index.html
+++ b/gallery/index.html
@@ -33,6 +33,7 @@
     <script src="temperature-sf-ny.js"></script>
     <script src="interaction.js"></script>
     <script src="linear-regression.js"></script>
+    <script src="many-points.js"></script>
 
     <!-- These might not remain in the gallery
     <script src="dygraph-simple.js"></script>

diff --git a/gallery/many-points.js b/gallery/many-points.js
new file mode 100644 (file)
index 0000000..afae3ee
--- /dev/null
+++ b/gallery/many-points.js
@@ -0,0 +1,17 @@
+/*global Gallery,Dygraph,data */
+/*global dataManyPoints */
+Gallery.register(
+  'many-points',
+  {
+    name: 'Many Points',
+    title: 'Many Points Benchmark',
+    setup: function(parent) {
+      parent.innerHTML = "<div id='many_points_div' style='width: 600px; height: 300px;'></div><p id='many_points_timing'></p>";
+    },
+    run: function() {
+      var data = dataManyPoints();
+      var startTimeMillis = Date.now();       
+      var g = new Dygraph(document.getElementById("many_points_div"), data, {});
+      document.getElementById('many_points_timing').innerHTML = (Date.now() - startTimeMillis) + 'ms';
+    }
+   });

diff --git a/src/datahandler/datahandler.js b/src/datahandler/datahandler.js
index 921540e..4af36d2 100644 (file)
--- a/src/datahandler/datahandler.js
+++ b/src/datahandler/datahandler.js
@@ -123,7 +123,9 @@ handler.prototype.seriesToPoints = function(series, setName, boundaryIdStart) {
       xval : handler.parseFloat(item[0]),
       yval : yval,
       name : setName, // TODO(danvk): is this really necessary?
-      idx : i + boundaryIdStart
+      idx : i + boundaryIdStart,
+      canvasx: NaN, // add these so we do not alter the structure later, which slows Chrome
+      canvasy: NaN,
     };
     points.push(point);
   }