ajax zoom

From flegmat...@gmail.com on July 04, 2011 12:52:43

I wouldn't call this an issue, but more like a feature request.

I'm using dygraph to visualize large sets of data, where statistical info is collected for a couple of years every 5 minutes. The fact is - loading 300.000 data points is an overkill for every modern browser on every modern workstation.

I've came with a simple quick'n'dirty update which seems to work for me, However, I'm to limited in time to adopt it properly within the code. Maybe author could embed something similar within next release, because this feature is mandatory IMHO?

//updated functions

/*determines if 'url' is being used as a data-source and appends url with 'from' and 'to' fields,
corresponding to timestamp being selected. Then, instead of calling doZoomXDates_(), reloads data set via start_() */
Dygraph.prototype.doZoomX_ = function(lowX, highX) {
// Find the earliest and latest dates contained in this canvasx range.
// Convert the call to date ranges of the raw data.

//we must return min/max dates in GMT
tzOffset=-1_new Date().getTimezoneOffset()60;
var minDate = Math.floor(this.toDataXCoord(lowX)/1000)+tzOffset;
var maxDate = Math.floor(this.toDataXCoord(highX)/1000)+tzOffset;
if ( (typeof this.file == 'string' && this.file_.indexOf('\n') < 0) ) {
if (this.origFile_)
this.file_=this.origFile_;

var newUrl= [
  this.file_+( this.file_.indexOf('?')>=0 ? '' : '?' ),
  'from='+minDate,
  'to='+maxDate
].join('&');

this.origFile_=this.file_;
this.file_=newUrl;
this.start_();

} else {
this.doZoomXDates_(minDate, maxDate);
}
};

/determines if 'url' is being used as a data-source and calls start() with initial(unmodified) url to
reload original data_/
Dygraph.prototype.doUnzoom_ = function() {
var dirty = false;
if (this.dateWindow_ != null) {
dirty = true;
this.dateWindow_ = null;
}

for (var i = 0; i < this.axes_.length; i++) {
if (this.axes_[i].valueWindow != null) {
dirty = true;
delete this.axes_[i].valueWindow;
}
}

// Clear any selection, since it's likely to be drawn in the wrong place.
this.clearSelection();

if (dirty || this.origFile_) {
// Putting the drawing operation before the callback because it resets
// yAxisRange.
this.zoomed_x_ = false;
this.zoomed_y_ = false;
//if file is url - reload ajax query
if ( (typeof this.file_ == 'string' && this.file_.indexOf('\n') < 0) ) {
this.file_=this.origFile_;
delete this.origFile_;
this.start_();
} else {
this.drawGraph_();
}
if (this.attr_("zoomCallback")) {
var minDate = this.rawData_[0][0];
var maxDate = this.rawData_[this.rawData_.length - 1][0];
this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
}
}
};

Original issue: http://code.google.com/p/dygraphs/issues/detail?id=210

Start by locating the existing doZoomX_ and doUnzoom_ entry points and read how start_() loads URL data. Compare the proposed from/to query behavior with the original issue referenced in the description. Done means zooming reloads the selected range and unzooming restores the original URL and data.