diff --git a/js/wn/views/grid_report.js b/js/wn/views/grid_report.js
index 69bd4453d1..4837c97943 100644
--- a/js/wn/views/grid_report.js
+++ b/js/wn/views/grid_report.js
@@ -349,8 +349,15 @@ wn.views.GridReport = Class.extend({
 			return;
 		}
 		wn.require('js/lib/flot/jquery.flot.js');
-		$.plot(this.wrapper.find('.plot').toggle(true), plot_data, this.get_plot_options());
+		
+		var plot_options = this.get_plot_options();
+		var plot_area = this.wrapper.find('.plot');
+		
+		$.plot(plot_area.toggle(true), plot_data, plot_options);
 		this.setup_plot_hover();
+		
+		// setup zoom if required
+		if(plot_options.zoom) this.setup_plot_zoom(plot_area);
 	},
 	setup_plot_hover: function() {
 		var me = this;
@@ -386,6 +393,50 @@ wn.views.GridReport = Class.extend({
 	    });
 		
 	},
+	setup_plot_zoom: function(plot_area) {
+		wn.require('js/lib/flot/jquery.flot.navigate.js');
+		
+		// show pan/zoom messages to illustrate events 
+    	plot_area.bind('plotpan', function (event, plot) {
+	        var axes = plot.getAxes();
+	        $(".message").html("Panning to x: "  + axes.xaxis.min.toFixed(2)
+	                           + " – " + axes.xaxis.max.toFixed(2)
+	                           + " and y: " + axes.yaxis.min.toFixed(2)
+	                           + " – " + axes.yaxis.max.toFixed(2));
+	    });
+
+	    plot_area.bind('plotzoom', function (event, plot) {
+	        var axes = plot.getAxes();
+	        $(".message").html("Zooming to x: "  + axes.xaxis.min.toFixed(2)
+	                           + " – " + axes.xaxis.max.toFixed(2)
+	                           + " and y: " + axes.yaxis.min.toFixed(2)
+	                           + " – " + axes.yaxis.max.toFixed(2));
+	    });
+
+	    // add zoom out button 
+	    $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(plot_area)
+			.click(function (e) {
+		        e.preventDefault();
+		        plot.zoomOut();
+		    });
+
+	    // and add panning buttons
+    
+	    // little helper for taking the repetitive work out of placing
+	    // panning arrows
+	    function addArrow(dir, right, top, offset) {
+	        $('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">')
+				.appendTo(plot_area).click(function (e) {
+		            e.preventDefault();
+		            plot.pan(offset);
+		        });
+	    }
+
+	    // addArrow('left', 55, 60, { left: -100 });
+	    // addArrow('right', 25, 60, { left: 100 });
+	    // addArrow('up', 40, 45, { top: -100 });
+	    // addArrow('down', 40, 75, { top: 100 });
+	},
 	get_tooltip_text: function(label, x, y) {
 		var date = dateutil.obj_to_user(new Date(x));
 	 	var value = fmt_money(y);