TIMEPLOT: Timeplot.paint draws samples outside of canvas area

I am dealing with large numbers of regularly spaced samples in my project
and timeplot plots them all (sometimes around 10k samples) each time it
updated. This was killing me because I was allowing click and drag ability
(drag through time) for the graphs and the repaint() speed was atrocious.
Once I implemented this small fix, the speed was improved to the point
where I had to throttle the drawing loop!

The only problem with my implementation is that it only works for regularly
sampled graphs because it assumes all samples are as wide apart as the
distance between the first and the last. This isn't as big of a problem as
it sounds and can be "fixed" for most non-regular plots by simply
increasing the "overdraw" to 2 or 3.

Timeplot.Plot.prototype._plot = function(f) {
    var data = this._dataSource.getData();
    if (data) {
        var times = data.times;
        var values = data.values;
        var T = times.length;

        // span = distance (x) between samples in pixels
        // and only works for regularly sampled periods
        var span;
        var overdraw = 1.25; // 1.25 represents a 25% greater span "overdraw"
        if(times.length > 2){
         span = (this._timeGeometry.toScreen(times[1]) -
this._timeGeometry.toScreen(times[0])) * overdraw;
        } else {
span = 0;
}

        for (var t = 0; t < T; t++) {
var x = this._timeGeometry.toScreen(times[t]);
            if(x > (0-span) && x < (this._canvas.width+span)){ // BUGFIX -
only draw what can be seen
var y = this._valueGeometry.toScreen(values[t]);
             f(x, y);
            }

        }
    }
};

Index: plot.js
===================================================================
--- plot.js (revision 9214)
+++ plot.js (working copy)
@@ -375,17 +375,30 @@
     },

     _plot: function(f) {
- var data = this._dataSource.getData();
- if (data) {
- var times = data.times;
- var values = data.values;
- var T = times.length;
- for (var t = 0; t < T; t++) {
- var x = this._timeGeometry.toScreen(times[t]);
- var y = this._valueGeometry.toScreen(values[t]);
- f(x, y);
- }
- }
+ var data = this._dataSource.getData();
+ if (data) {
+ var times = data.times;
+ var values = data.values;
+ var T = times.length;
+
+ // span = distance (x) between samples in pixels
+ // and only works for regularly sampled periods
+ var span;
+ var overdraw = 1.25; // 1.25 represents a 25% greater span "overdraw"
+ if(times.length > 2){
+ span = (this._timeGeometry.toScreen(times[1]) -
this._timeGeometry.toScreen(times[0])) * overdraw;
+ } else {
+ span = 0;
+ }
+
+ for (var t = 0; t < T; t++) {
+ var x = this._timeGeometry.toScreen(times[t]);
+ if(x > (0-span) && x < (this._canvas.width+span)){
+ var y = this._valueGeometry.toScreen(values[t]);
+ f(x, y);
+ }
+ }
+ }
     },

     _closeBubble: function() { 

[Submitted by Jon-Carlos Rivera on simile.mit.edu]
Original issue reported on code.google.com by stefano.mazzocchi@gmail.com on 25 Mar 2009 at 5:57
Arjunsos / simile-widgets

TIMEPLOT: Timeplot.paint draws samples outside of canvas area #81
