Added code for plot zoom

This commit is contained in:
Rushabh Mehta 2012-09-19 17:13:11 +05:30
parent fc59646b07
commit b3dcd83155

View file

@ -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);