updated chart examples to work with new no-jQuery tooltips and resizing

examples/cumulativeLineChartDaily.html

@@ -32,10 +32,9 @@ text {
   </div>
 
 <script src="../lib/d3.v2.js"></script>
-<script src="../lib/jquery.min.js"></script>
 <script src="../nv.d3.js"></script>
 <!-- including all the components so I don't have to minify every time I test in development -->
-<script src="../src/nvtooltip.js"></script>
+<script src="../src/tooltip.js"></script>
 <script src="../src/models/legend.js"></script>
 <script src="../src/models/axis.js"></script>
 <script src="../src/models/line.js"></script>

examples/lineChart.html

@@ -32,7 +32,6 @@ text {
   </div>
 
 <script src="../lib/d3.v2.js"></script>
-<!-- script src="../lib/jquery.min.js"></script -->
 <script src="../nv.d3.js"></script>
 <!-- including all the components so I don't have to minify every time I test in development -->
 <script src="../src/tooltip.js"></script>

examples/lineChartDaily.html

@@ -32,10 +32,9 @@ text {
   </div>
 
 <script src="../lib/d3.v2.js"></script>
-<script src="../lib/jquery.min.js"></script>
 <script src="../nv.d3.js"></script>
 <!-- including all the components so I don't have to minify every time I test in development -->
-<script src="../src/nvtooltip.js"></script>
+<script src="../src/tooltip.js"></script>
 <script src="../src/models/legend.js"></script>
 <script src="../src/models/axis.js"></script>
 <script src="../src/models/line.js"></script>

examples/lineWithFourAxes.html

@@ -32,9 +32,8 @@ text {
   </div>
 
 <script src="../lib/d3.v2.js"></script>
-<script src="../lib/jquery.min.js"></script>
 <script src="../nv.d3.js"></script>
-<script src="../src/nvtooltip.js"></script>
+<script src="../src/tooltip.js"></script>
 <script src="../src/models/legend.js"></script>
 <script src="../src/models/axis.js"></script>
 <script src="../src/models/line.js"></script>
@@ -85,9 +84,9 @@ nv.addGraph({
   },
   callback: function(chart) {
     var showTooltip = function(e) {
-          var offset = $(selector).offset(),
-              left = e.pos[0] + offset.left,
-              top = e.pos[1] + offset.top,
+          var offsetElement = document.getElementById(selector.substr(1)),
+              left = e.pos[0] + offsetElement.offsetLeft,
+              top = e.pos[1] + offsetElement.offsetTop,
               formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
               formatX = chart.xAxis.tickFormat();
 
@@ -98,20 +97,21 @@ nv.addGraph({
                         formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
                         '</p>';
 
-          nvtooltip.show([left, top], content);
+          nv.tooltip.show([left, top], content);
         };
 
     chart.dispatch.on('tooltipShow', showTooltip);
-    chart.dispatch.on('tooltipHide', nvtooltip.cleanup);
+    chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
 
 
-    $(window).resize(function() {
+    window.onresize =
+    function() {
       // now that width and height are functions, should be automatic..of course you can always override them
       d3.select('#chart1 svg')
           .attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
           .attr('height', chart.height()())
           .call(chart);
-    });
+    };
   }
 });
 

examples/lineWithLegend.html

@@ -65,7 +65,7 @@ nv.addGraph({
 
     chart
         .width(width)
-        .height(height)
+        .height(height);
 
     chart.xAxis
         .tickFormat(xTickFormat);
@@ -84,22 +84,21 @@ nv.addGraph({
   },
   callback: function(chart) {
     var showTooltip = function(e) {
-          var offsetElement = document.getElementById(selector.substr(1)),
-                left = e.pos[0] + offsetElement.offsetLeft,
-                top = e.pos[1] + offsetElement.offsetTop,
-
-        formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
-              formatX = chart.xAxis.tickFormat();
-
-        // uses the chart's getX and getY, you may customize if x position is not the same as the value you want
-          //   ex. daily data without weekends, x is the index, while you want the date
-          var content = '<h3>' + e.series.key + '</h3>' +
-                        '<p>' +
-                        formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
-                        '</p>';
-
-          nv.tooltip.show([left, top], content);
-        };
+      var offsetElement = document.getElementById(selector.substr(1)),
+          left = e.pos[0] + offsetElement.offsetLeft,
+          top = e.pos[1] + offsetElement.offsetTop,
+          formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
+          formatX = chart.xAxis.tickFormat();
+
+      // uses the chart's getX and getY, you may customize if x position is not the same as the value you want
+      //   ex. daily data without weekends, x is the index, while you want the date
+      var content = '<h3>' + e.series.key + '</h3>' +
+                    '<p>' +
+                    formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
+                    '</p>';
+
+      nv.tooltip.show([left, top], content);
+    };
 
     chart.dispatch.on('tooltipShow', showTooltip);
     chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);

examples/stackedArea.html

@@ -79,7 +79,6 @@ nv.addGraph({
                     formatterY(graph.y()(e.point)) + ' at ' + formatterX(graph.x()(e.point)) +
                     '</p>';
 
-      //$('#positionTest').css({'left': left, 'top': top});
       nv.tooltip.show([left, top], content);
     });
 

nv.d3.js

@@ -3251,7 +3251,7 @@ nv.charts.line = function() {
         graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
 
         //TODO: create resize queue and have nv core handle resize instead of binding all to window resize
-        window.onResize =
+        window.onresize =
         function() {
           // now that width and height are functions, should be automatic..of course you can always override them
           d3.select(selector + ' svg')
@@ -3352,9 +3352,9 @@ nv.charts.lineChartDaily = function() {
   var graph = nv.models.lineWithLegend()
                 .x(function(d,i) { return i }),
       showTooltip = function(e) {
-        var offset = $(selector).offset(),
-            left = e.pos[0] + offset.left,
-            top = e.pos[1] + offset.top,
+        var offsetElement = document.getElementById(selector.substr(1)),
+            left = e.pos[0] + offsetElement.offsetLeft,
+            top = e.pos[1] + offsetElement.offsetTop,
             formatX = graph.xAxis.tickFormat(),
             formatY = graph.yAxis.tickFormat(),
             x = formatX(graph.x()(e, e.pointIndex)),
@@ -3362,7 +3362,7 @@ nv.charts.lineChartDaily = function() {
             y = formatY(graph.y()(e.point)),
             content = tooltip(e.series.key, x, y, e, graph);
 
-        nvtooltip.show([left, top], content);
+        nv.tooltip.show([left, top], content);
       };
 
   //setting component defaults
@@ -3416,16 +3416,17 @@ nv.charts.lineChartDaily = function() {
       },
       callback: function(graph) {
         graph.dispatch.on('tooltipShow', showTooltip);
-        graph.dispatch.on('tooltipHide', nvtooltip.cleanup);
+        graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
 
         //TODO: create resize queue and have nv core handle resize instead of binding all to window resize
-        $(window).resize(function() {
+        window.onresize =
+        function() {
           // now that width and height are functions, should be automatic..of course you can always override them
           d3.select(selector + ' svg')
               .attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
               .attr('height', graph.height()())
               .call(graph);
-        });
+        };
       }
     });
 
@@ -3520,9 +3521,9 @@ nv.charts.cumulativeLineChartDaily = function() {
   var graph = nv.models.cumulativeLine()
                 .x(function(d,i) { return i }),
       showTooltip = function(e) {
-        var offset = $(selector).offset(),
-            left = e.pos[0] + offset.left,
-            top = e.pos[1] + offset.top,
+        var offsetElement = document.getElementById(selector.substr(1)),
+            left = e.pos[0] + offsetElement.offsetLeft,
+            top = e.pos[1] + offsetElement.offsetTop,
             formatX = graph.xAxis.tickFormat(),
             formatY = graph.yAxis.tickFormat(),
             x = formatX(graph.x()(e, e.pointIndex)),
@@ -3530,7 +3531,7 @@ nv.charts.cumulativeLineChartDaily = function() {
             y = formatY(graph.y()(e.point)),
             content = tooltip(e.series.key, x, y, e, graph);
 
-        nvtooltip.show([left, top], content);
+        nv.tooltip.show([left, top], content);
       };
 
   //setting component defaults
@@ -3583,16 +3584,17 @@ nv.charts.cumulativeLineChartDaily = function() {
       },
       callback: function(graph) {
         graph.dispatch.on('tooltipShow', showTooltip);
-        graph.dispatch.on('tooltipHide', nvtooltip.cleanup);
+        graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
 
         //TODO: create resize queue and have nv core handle resize instead of binding all to window resize
-        $(window).resize(function() {
+        window.onresize =
+        function() {
           // now that width and height are functions, should be automatic..of course you can always override them
           d3.select(selector + ' svg')
               .attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
               .attr('height', graph.height()())
               .call(graph);
-        });
+        };
       }
     });
 

src/charts/cumulativeLineChartDaily.js

@@ -17,9 +17,9 @@ nv.charts.cumulativeLineChartDaily = function() {
   var graph = nv.models.cumulativeLine()
                 .x(function(d,i) { return i }),
       showTooltip = function(e) {
-        var offset = $(selector).offset(),
-            left = e.pos[0] + offset.left,
-            top = e.pos[1] + offset.top,
+        var offsetElement = document.getElementById(selector.substr(1)),
+            left = e.pos[0] + offsetElement.offsetLeft,
+            top = e.pos[1] + offsetElement.offsetTop,
             formatX = graph.xAxis.tickFormat(),
             formatY = graph.yAxis.tickFormat(),
             x = formatX(graph.x()(e, e.pointIndex)),
@@ -27,7 +27,7 @@ nv.charts.cumulativeLineChartDaily = function() {
             y = formatY(graph.y()(e.point)),
             content = tooltip(e.series.key, x, y, e, graph);
 
-        nvtooltip.show([left, top], content);
+        nv.tooltip.show([left, top], content);
       };
 
   //setting component defaults
@@ -80,16 +80,17 @@ nv.charts.cumulativeLineChartDaily = function() {
       },
       callback: function(graph) {
         graph.dispatch.on('tooltipShow', showTooltip);
-        graph.dispatch.on('tooltipHide', nvtooltip.cleanup);
+        graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
 
         //TODO: create resize queue and have nv core handle resize instead of binding all to window resize
-        $(window).resize(function() {
+        window.onresize =
+        function() {
           // now that width and height are functions, should be automatic..of course you can always override them
           d3.select(selector + ' svg')
               .attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
               .attr('height', graph.height()())
               .call(graph);
-        });
+        };
       }
     });
 

src/charts/lineChart.js

@@ -74,7 +74,7 @@ nv.charts.line = function() {
         graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
 
         //TODO: create resize queue and have nv core handle resize instead of binding all to window resize
-        window.onResize =
+        window.onresize =
         function() {
           // now that width and height are functions, should be automatic..of course you can always override them
           d3.select(selector + ' svg')

src/charts/lineChartDaily.js

@@ -16,9 +16,9 @@ nv.charts.lineChartDaily = function() {
   var graph = nv.models.lineWithLegend()
                 .x(function(d,i) { return i }),
       showTooltip = function(e) {
-        var offset = $(selector).offset(),
-            left = e.pos[0] + offset.left,
-            top = e.pos[1] + offset.top,
+        var offsetElement = document.getElementById(selector.substr(1)),
+            left = e.pos[0] + offsetElement.offsetLeft,
+            top = e.pos[1] + offsetElement.offsetTop,
             formatX = graph.xAxis.tickFormat(),
             formatY = graph.yAxis.tickFormat(),
             x = formatX(graph.x()(e, e.pointIndex)),
@@ -26,7 +26,7 @@ nv.charts.lineChartDaily = function() {
             y = formatY(graph.y()(e.point)),
             content = tooltip(e.series.key, x, y, e, graph);
 
-        nvtooltip.show([left, top], content);
+        nv.tooltip.show([left, top], content);
       };
 
   //setting component defaults
@@ -80,16 +80,17 @@ nv.charts.lineChartDaily = function() {
       },
       callback: function(graph) {
         graph.dispatch.on('tooltipShow', showTooltip);
-        graph.dispatch.on('tooltipHide', nvtooltip.cleanup);
+        graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
 
         //TODO: create resize queue and have nv core handle resize instead of binding all to window resize
-        $(window).resize(function() {
+        window.onresize =
+        function() {
           // now that width and height are functions, should be automatic..of course you can always override them
           d3.select(selector + ' svg')
               .attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
               .attr('height', graph.height()())
               .call(graph);
-        });
+        };
       }
     });