Added code for plot zoom
This commit is contained in:
parent
fc59646b07
commit
b3dcd83155
1 changed files with 52 additions and 1 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue