Chris Leonello avatar Chris Leonello committed 2b82f05

Reworking of code for extensible architecture fairly complete.
Log axes plugin now working.

Comments (0)

Files changed (3)

jqplot.categoryAxisRenderer.js

 	       else console.log(arguments);
 	    }
 	};
-	
-    $.jqplot.linearAxisRenderer = function() {
-    };
-    
-    $.jqplot.linearAxisRenderer.prototype.init = function(options){
-        $.extend(true, this, options);
-    };
-    
-    // function: draw
-    // Creates the axis container DOM element and tick DOM elements.
-    // Populates some properties of the elements and figures out
-    // height and width of element.
-    // called with scope of axis
-    $.jqplot.linearAxisRenderer.prototype.draw = function() {
-        if (this.show) {
-            // populate the axis label and value properties.
-            this.renderer.createTicks.call(this);
-            // fill a div with axes labels in the right direction.
-            // Need to pregenerate each axis to get it's bounds and
-            // position it and the labels correctly on the plot.
-            var dim=0;
-            var temp;
-            
-            this._elem = $('<div class="jqplot-axis jqplot-'+this.name+'" style="position:absolute;"></div>');
-            //for (var s in axis.style) $(axis._elem).css(s, axis.style[s]);
-    
-            if (this.showTicks) {
-                var t = this._ticks;
-                for (var i=0; i<t.length; i++) {
-                    var tick = t[i];
-                    if (tick.showLabel && (!tick.isMinorTick || this.showMinorTicks)) {
-                        var elem = tick.draw();
-                        //var elem = $(frag).appendTo(axis._elem).get(0);
-                        elem.appendTo(this._elem);
-                    }
-                }
-            }
-        }
-        return this._elem;
-    };
-    
-    $.jqplot.linearAxisRenderer.prototype.set = function() {   
-        var dim = 0;
-        var temp; 
-        if (this.show && this.showTicks) {
-            var t = this._ticks;
-            for (var i=0; i<t.length; i++) {
-                var tick = t[i];
-                if (tick.showLabel && (!tick.isMinorTick || this.showMinorTicks)) {
-                    if (this.name == 'xaxis' || this.name == 'x2axis') {
-                        temp = tick._elem.outerHeight(true);
-                    }
-                    else {
-                        temp = tick._elem.outerWidth(true);
-                    }
-                    if (temp > dim) dim = temp;
-                }
-            }
-            if (this.name == 'xaxis') this._elem.css({'height':dim+'px', left:'0px', bottom:'0px'});
-            else if (this.name == 'x2axis') this._elem.css({'height':dim+'px', left:'0px', top:'0px'});
-            else if (this.name == 'yaxis') this._elem.css({'width':dim+'px', left:'0px', top:'0px'});
-            else if (this.name == 'y2axis') this._elem.css({'width':dim+'px', right:'0px', top:'0px'});
-        }  
-    };
-    
-    // function: setAxis
-    // called with scope of an axis
-    // Populate the axis properties, giving a label and value
-    // (corresponding to the user data coordinates, not plot coords.)
-    // for each tick on the axis.
-    $.jqplot.linearAxisRenderer.prototype.createTicks = function() {
-        // we're are operating on an axis here
-        var axis = this;
-        var ticks = axis._ticks;
-        var name = axis.name;
-        // databounds were set on axis initialization.
-        var db = axis._dataBounds;
-        var dim, interval;
-        var min, max;
-        var pos1, pos2;
-        var tt, i;
-        
-        //////////////////////////
-        //////////////////////////
-        // fix me
-        //////////////////////////
-        // if we already have ticks, use them.
-        // ticks must be in order of increasing value.
-        if (ticks.length) {
-            // for (i=0; i<ticks.length; i++){
-            //     var t = ticks[i];
-            //     if (!t.label) t.label = t.value.toString();
-            //     // set iitial css positioning styles for the ticks.
-            //     var pox = i*15+'px';
-            //     switch (name) {
-            //         case 'xaxis':
-            //             t._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'};
-            //             break;
-            //         case 'x2axis':
-            //             t._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'};
-            //             break;
-            //         case 'yaxis':
-            //             t._styles = {position:'absolute', right:'0px', top:pox, paddingRight:'10px'};
-            //             break;
-            //         case 'y2axis':
-            //             t._styles = {position:'absolute', left:'0px', top:pox, paddingLeft:'10px'};
-            //             break;
-            //     }
-            // }
-            // axis.numberTicks = ticks.length;
-            // axis.min = ticks[0].value;
-            // axis.max = ticks[axis.numberTicks-1].value;
-            // axis.tickInterval = (axis.max - axis.min) / (axis.numberTicks - 1);
-        }
-        
-        // we don't have any ticks yet, let's make some!
-        else {
-            if (name == 'xaxis' || name == 'x2axis') {
-                dim = this._plotWidth;
-            }
-            else {
-                dim = this._plotHeight;
-            }
-        
-            min = ((this.min != null) ? this.min : db.min);
-            max = ((this.max != null) ? this.max : db.max);
-
-            var range = max - min;
-            var rmin, rmax;
-        
-            rmin = min - range/2*(this.pad - 1);
-            rmax = max + range/2*(this.pad - 1);
-            this.min = rmin;
-            this.max = rmax;
-            range = this.max - this.min;
-    
-            if (this.numberTicks == null){
-                if (dim > 100) {
-                    this.numberTicks = parseInt(3+(dim-100)/75);
-                }
-                else this.numberTicks = 2;
-            }
-    
-            this.tickInterval = range / (this.numberTicks-1);
-            for (var i=0; i<this.numberTicks; i++){
-                tt = this.min + i * range / (this.numberTicks-1);
-                var t = new $.jqplot.AxisTick(this.tickOptions);
-                if (!this.showTicks) {
-                    t.showLabel = false;
-                    t.showMark = false;
-                }
-                else if (!this.showTickMarks) t.showMark = false;
-                t.setTick(tt, this.name);
-                axis._ticks.push(t);
-            }
-        }
-    };
-    
-    // functions: pack
-    // Define unit <-> coordinate conversions and properly position tick dom elements.
-    // Now we know offsets around the grid, we can define conversioning functions.
-    $.jqplot.linearAxisRenderer.prototype.pack = function(pos, offsets) {
-        var ticks = this._ticks;
-        var max = this.max;
-        var min = this.min;
-        var offmax = offsets.max;
-        var offmin = offsets.min;
-        
-        for (var p in pos) {
-            this._elem.css(p, pos[p]);
-        }
-        
-        this._offsets = offsets;
-        // pixellength will be + for x axes and - for y axes becasue pixels always measured from top left.
-        var pixellength = offmax - offmin;
-        var unitlength = max - min;
-        
-        // point to unit and unit to point conversions references to Plot DOM element top left corner.
-        this.p2u = function(p){
-            return (p - offmin) * unitlength / pixellength + min;
-        };
-        
-        this.u2p = function(u){
-            return (u - min) * pixellength / unitlength + offmin;
-        };
-        
-        // point to unit and unit to point conversions references to Grid DOM element top left corner.
-        this.series_p2u = function(p){
-            return p * unitlength / pixellength + min;
-        };
-        
-        if (this.name == 'xaxis' || this.name == 'x2axis'){
-            this.series_u2p = function(u){
-                return (u - min) * pixellength / unitlength;
-            };
-        }
-        
-        else {
-            this.series_u2p = function(u){
-                return (u - max) * pixellength / unitlength;
-            };
-        }
-        
-        if (this.show) {
-            if (this.name == 'xaxis' || this.name == 'x2axis') {
-                for (i=0; i<ticks.length; i++) {
-                    var t = ticks[i];
-                    var shim = t.getWidth()/2;
-                    var val = this.u2p(t.value) - shim + 'px';
-                    t._elem.css('left', val);
-                }
-            }
-            else {
-                for (i=0; i<ticks.length; i++) {
-                    var t = ticks[i];
-                    var shim = t.getHeight()/2;
-                    var val = this.u2p(t.value) - shim + 'px';
-                    t._elem.css('top', val);
-                }
-            }
-        }    
-    };
     
     // Class: categoryAxisRenderer
     // Subclass of linearAxisRenderer.  Renderes axis as equally spaced category labels.
     $.jqplot.categoryAxisRenderer = function() {
         $.jqplot.linearAxisRenderer.call(this);
     };
+    
+    $.jqplot.categoryAxisRenderer.prototype = new $.jqplot.linearAxisRenderer();
+    $.jqplot.categoryAxisRenderer.prototype.constructor = $.jqplot.categoryAxisRenderer;
  
     // function: setAxis
     // called with scope of an axis

jqplot.logAxisRenderer.js

 	    }
 	};
 	
-    $.jqplot.logAxisRenderer = function() {
-        this.base = 10;
-        this.tickDistribution = 'even';
+    $.jqplot.LogAxisRenderer = function() {
     };
     
-    $.jqplot.logAxisRenderer.prototype.init = function(options) {
+    $.jqplot.LogAxisRenderer.prototype.init = function(options) {
+        // var defaults = {
+        //     base:10,
+        //     tickDistribution:'even'
+        // };
         $.extend(true, this, options);
+        log('Log Axis init: ', this);
     };
     
     // function: draw
     // Populates some properties of the elements and figures out
     // height and width of element.
     // called with scope of axis
-    $.jqplot.logAxisRenderer.prototype.draw = function(target, plotHeight, plotWidth) {
-        // we are operating on a axis objec here.
-        var axis = this;
-        if (axis.show) {
+    $.jqplot.LogAxisRenderer.prototype.draw = function() {
+        if (this.show) {
             // populate the axis label and value properties.
-            axis.renderer.setAxis.call(axis, plotHeight, plotWidth);
+            this.renderer.createTicks.call(this);
             // fill a div with axes labels in the right direction.
             // Need to pregenerate each axis to get it's bounds and
             // position it and the labels correctly on the plot.
-            var h, w;
+            var dim=0;
+            var temp;
             
-            axis._elem = $('<div class="jqplot-axis"></div>').appendTo(target).get(0);
+            this._elem = $('<div class="jqplot-axis jqplot-'+this.name+'" style="position:absolute;"></div>');
             //for (var s in axis.style) $(axis._elem).css(s, axis.style[s]);
     
-            if (axis.ticks.showLabels) {
-                var t = axis._ticks;
+            if (this.showTicks) {
+                var t = this._ticks;
                 for (var i=0; i<t.length; i++) {
                     var tick = t[i];
-                    if (!tick.isMinorTick || axis.showMinorTicks) {
+                    if (tick.showLabel && (!tick.isMinorTick || this.showMinorTicks)) {
                         var elem = tick.draw();
                         //var elem = $(frag).appendTo(axis._elem).get(0);
-                        $(elem).appendTo(axis._elem);
-                        for (var s in tick._styles) {
-                            $(elem).css(s, tick._styles[s]);   
-                        }
-                        $(elem).html(tick.label);
-                    
-                        if (axis.ticks.fontFamily) elem.style.fontFamily = axis.ticks.fontFamily;
-                        if (axis.ticks.fontSize) elem.style.fontSize = axis.ticks.fontSize;
-                    
-                        h = $(elem).outerHeight(true);
-                        w = $(elem).outerWidth(true);
-                    
-                        if (axis._height < h) {
-                            axis._height = h;
-                        }
-                        if (axis._width < w) {
-                            axis._width = w;
-                        }
+                        elem.appendTo(this._elem);
                     }
                 }
             }
         }
+        return this._elem;
+    };    
+    
+    $.jqplot.LogAxisRenderer.prototype.set = function() {   
+        var dim = 0;
+        var temp; 
+        if (this.show && this.showTicks) {
+            var t = this._ticks;
+            for (var i=0; i<t.length; i++) {
+                var tick = t[i];
+                if (tick.showLabel && (!tick.isMinorTick || this.showMinorTicks)) {
+                    if (this.name == 'xaxis' || this.name == 'x2axis') {
+                        temp = tick._elem.outerHeight(true);
+                    }
+                    else {
+                        temp = tick._elem.outerWidth(true);
+                    }
+                    if (temp > dim) dim = temp;
+                }
+            }
+            if (this.name == 'xaxis') this._elem.css({'height':dim+'px', left:'0px', bottom:'0px'});
+            else if (this.name == 'x2axis') this._elem.css({'height':dim+'px', left:'0px', top:'0px'});
+            else if (this.name == 'yaxis') this._elem.css({'width':dim+'px', left:'0px', top:'0px'});
+            else if (this.name == 'y2axis') this._elem.css({'width':dim+'px', right:'0px', top:'0px'});
+        } 
     };
     
     // function: setAxis
     // for each tick on the axis.
     // Set initial styles on tick dom elements.
     // figure out numberTicks, min, max, tickInterval and tick values.
-    $.jqplot.logAxisRenderer.prototype.setAxis = function(plotHeight, plotWidth) {
+    $.jqplot.LogAxisRenderer.prototype.createTicks = function() {
         // we're are operating on an axis here
-        var axis = this;
-        var ticks = axis._ticks;
-        var name = axis.name;
-        var db = axis._dataBounds;
+        var ticks = this._ticks;
+        var name = this.name;
+        var db = this._dataBounds;
         var dim, interval;
         var min, max;
         var pos1, pos2;
         var tt, i;
         
-        axis._canvasHeight = plotHeight;
-        axis._canvasWidth = plotWidth;
-        
+        //////////////////
+        // fix me
+        /////////////////
         // if we already have ticks, use them.
         // ticks must be in order of increasing value.
         if (ticks.length) {
-            for (i=0; i<ticks.length; i++){
-                var t = ticks[i];
-                if (!t.label) t.label = t.value.toString();
-                // set iitial css positioning styles for the ticks.
-                var pox = i*15+'px';
-                switch (name) {
-                    case 'xaxis':
-                        t._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'};
-                        break;
-                    case 'x2axis':
-                        t._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'};
-                        break;
-                    case 'yaxis':
-                        t._styles = {position:'absolute', right:'0px', top:pox, paddingRight:'10px'};
-                        break;
-                    case 'y2axis':
-                        t._styles = {position:'absolute', left:'0px', top:pox, paddingLeft:'10px'};
-                        break;
-                }
-            }
-            axis.numberTicks = ticks.length;
-            axis.min = ticks[0].value;
-            axis.max = ticks[axis.numberTicks-1].value;
-            axis.tickInterval = (axis.max - axis.min) / (axis.numberTicks - 1);
+            // for (i=0; i<ticks.length; i++){
+            //     var t = ticks[i];
+            //     if (!t.label) t.label = t.value.toString();
+            //     // set iitial css positioning styles for the ticks.
+            //     var pox = i*15+'px';
+            //     switch (name) {
+            //         case 'xaxis':
+            //             t._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'};
+            //             break;
+            //         case 'x2axis':
+            //             t._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'};
+            //             break;
+            //         case 'yaxis':
+            //             t._styles = {position:'absolute', right:'0px', top:pox, paddingRight:'10px'};
+            //             break;
+            //         case 'y2axis':
+            //             t._styles = {position:'absolute', left:'0px', top:pox, paddingLeft:'10px'};
+            //             break;
+            //     }
+            // }
+            // this.numberTicks = ticks.length;
+            // this.min = ticks[0].value;
+            // this.max = ticks[this.numberTicks-1].value;
+            // this.tickInterval = (this.max - this.min) / (this.numberTicks - 1);
         }
         
         // we don't have any ticks yet, let's make some!
         else {
             if (name == 'xaxis' || name == 'x2axis') {
-                dim = axis._canvasWidth;
+                dim = this._plotDimensions.width;
             }
             else {
-                dim = axis._canvasHeight;
+                dim = this._plotDimensions.height;
             }
         
-            min = ((axis.min != null) ? axis.min : db.min);
-            max = ((axis.max != null) ? axis.max : db.max);
+            min = ((this.min != null) ? this.min : db.min);
+            max = ((this.max != null) ? this.max : db.max);
             // perform some checks
-            if (min < 1e-9) min = 1e-9;
-            if (max < 1e-8) max = 1e-8;
-            if (axis.pad >1.99) axis.pad = 1.99;
+            if (this.min != null && this.min <= 0) throw('log axis minimum must be greater than 0');
+            if (this.max != null && this.max <= 0) throw('log axis maximum must be greater than 0');
+            // if (this.pad >1.99) this.pad = 1.99;
             var range = max - min;
             var rmin, rmax;
 
-            if (axis.renderer.tickDistribution == 'even') {                    
+            if (this.tickDistribution == 'even') {                    
                 // for log axes, open up range to get a nice power of axis.renderer.base.
-                rmin = min - min*((axis.pad-1)/2);
-                rmax = max + max*((axis.pad-1)/2);
-                axis.min = rmin;
-                axis.max = rmax;
-                range = axis.max - axis.min;            
+                rmin = min - min*((this.pad-1)/2);
+                rmax = max + max*((this.pad-1)/2);
+                this.min = rmin;
+                this.max = rmax;
+                range = this.max - this.min;            
         
-                if (axis.numberTicks == null){
+                if (this.numberTicks == null){
                     if (dim > 100) {
-                        axis.numberTicks = parseInt(3+(dim-100)/75);
+                        this.numberTicks = parseInt(3+(dim-100)/75);
                     }
                     else {
-                        axis.numberTicks = 2;
+                        this.numberTicks = 2;
                     }
                 }
     
-                var u = Math.pow(axis.renderer.base, (1/(axis.numberTicks-1)*Math.log(axis.max/axis.min)/Math.log(axis.renderer.base)));
-                for (var i=0; i<axis.numberTicks; i++){
-                    tt = axis.min * Math.pow(u, i);
-                    var t = new $.jqplot.AxisTick();
-                    var label = axis.tickFormatter(axis.ticks.formatString, tt);
-                    t.setTick(tt, label, name);
-                    axis._ticks.push(t);
+                var u = Math.pow(this.base, (1/(this.numberTicks-1)*Math.log(this.max/this.min)/Math.log(this.base)));
+                for (var i=0; i<this.numberTicks; i++){
+                    tt = this.min * Math.pow(u, i);
+                    var t = new this.tickRenderer(this.tickOptions);
+                    if (!this.showTicks) {
+                        t.showLabel = false;
+                        t.showMark = false;
+                    }
+                    else if (!this.showTickMarks) t.showMark = false;
+                    t.setTick(tt, this.name);
+                    this._ticks.push(t);
                 }
                 
             }
             
-            else if (axis.renderer.tickDistribution == 'power'){
+            else if (this.tickDistribution == 'power'){
                 
                 // for log axes, open up range to get a nice power of axis.renderer.base.
-                rmin = Math.pow(axis.renderer.base, Math.ceil(Math.log(min*(2-axis.pad))/Math.log(axis.renderer.base))-1);
-                rmax = Math.pow(axis.renderer.base, Math.floor(Math.log(max*axis.pad)/Math.log(axis.renderer.base))+1);
-                axis.min = rmin;
-                axis.max = rmax;
-                range = axis.max - axis.min;            
+                rmin = Math.pow(this.base, Math.ceil(Math.log(min*(2-this.pad))/Math.log(this.base))-1);
+                rmax = Math.pow(this.base, Math.floor(Math.log(max*this.pad)/Math.log(this.base))+1);
+                this.min = rmin;
+                this.max = rmax;
+                range = this.max - this.min;            
         
                 var fittedTicks = 0;
                 var minorTicks = 0;
-                if (axis.numberTicks == null){
+                if (this.numberTicks == null){
                     if (dim > 100) {
-                        axis.numberTicks = Math.round(Math.log(axis.max/axis.min)/Math.log(axis.renderer.base) + 1);
-                        if (axis.numberTicks < 2) axis.numberTicks = 2;
+                        this.numberTicks = Math.round(Math.log(this.max/this.min)/Math.log(this.base) + 1);
+                        if (this.numberTicks < 2) this.numberTicks = 2;
                         fittedTicks = parseInt(3+(dim-100)/75);
                     }
                     else {
-                        axis.numberTicks = 2;
+                        this.numberTicks = 2;
                         fittedTicks = 2;
                     }
                     // if we don't have enough ticks, add some intermediate ticks
                     // how many to have between major ticks.
-                    if (axis.numberTicks < fittedTicks-1) {
-                        minorTicks = Math.floor(fittedTicks/axis.numberTicks);
+                    if (this.numberTicks < fittedTicks-1) {
+                        minorTicks = Math.floor(fittedTicks/this.numberTicks);
                     }
                 }
 
-                for (var i=0; i<axis.numberTicks; i++){
-                    tt = Math.pow(axis.renderer.base, i - axis.numberTicks + 1) * axis.max;
-                    var t = new $.jqplot.AxisTick();
-                    var label = axis.tickFormatter(axis.ticks.formatString, tt);
-                    t.setTick(tt, label, name);
-                    axis._ticks.push(t);
+                for (var i=0; i<this.numberTicks; i++){
+                    tt = Math.pow(this.base, i - this.numberTicks + 1) * this.max;
+                    var t = new this.tickRenderer(this.tickOptions);
+                    if (!this.showTicks) {
+                        t.showLabel = false;
+                        t.showMark = false;
+                    }
+                    else if (!this.showTickMarks) t.showMark = false;
+                    t.setTick(tt, this.name);
+                    this._ticks.push(t);
             
-                    if (minorTicks && i<axis.numberTicks-1) {
-                        var tt1 = Math.pow(axis.renderer.base, i - axis.numberTicks + 2) * axis.max;
+                    if (minorTicks && i<this.numberTicks-1) {
+                        var tt1 = Math.pow(this.base, i - this.numberTicks + 2) * this.max;
                         var spread = tt1 - tt;
                         var interval = tt1 / (minorTicks+1);
                         for (var j=minorTicks-1; j>=0; j--) {
                             var t = new $.jqplot.AxisTick();
                             var val = tt1-interval*(j+1);
-                            var label = axis.tickFormatter(axis.ticks.formatString, val, true);
-                            t.setTick(val, label, name);
-                            axis._ticks.push(t);
+                            var t = new this.tickRenderer(this.tickOptions);
+                            if (!this.showTicks) {
+                                t.showLabel = false;
+                                t.showMark = false;
+                            }
+                            else if (!this.showTickMarks) t.showMark = false;
+                            t.setTick(val, this.name);
+                            this._ticks.push(t);
                         }
                     }       
                 }                    
             }       
         }
-        
-        if (name == 'yaxis' || name == 'y2axis') this.ticks.styles.reverse();
     };
     
+    
     // functions: pack
     // Define unit <-> coordinate conversions and properly position tick dom elements.
     // Now we know offsets around the grid, we can define conversioning functions.
     // called with scope of axis.
-    $.jqplot.logAxisRenderer.prototype.pack = function(offsets, gridwidth, gridheight) {
-        var axis = this;
-        var lb = parseInt(axis.renderer.base);
-        var ticks = axis._ticks;
+    $.jqplot.LogAxisRenderer.prototype.pack = function(pos, offsets) {
+        var lb = parseInt(this.base);
+        var ticks = this._ticks;
         var trans = function (v) { return Math.log(v)/Math.log(lb); };
-        max = Math.log(axis.max)/Math.log(lb);
-        min = Math.log(axis.min)/Math.log(lb);
+        max = trans(this.max);
+        min = trans(this.min);
+        var offmax = offsets.max;
+        var offmin = offsets.min;
         
-        if (axis.name == 'xaxis' || axis.name == 'x2axis') {
-            axis._offsets = {min:offsets.left, max:offsets.right};
-            
-            axis.p2u = function(p) {
-                return (trans(p) - axis._offsets.min)*(axis.max - axis.min)/(axis._canvasWidth - axis._offsets.max - axis._offsets.min) + axis.min;
-            }
-            
-            axis.u2p = function(u) {
-                return (trans(u) - axis.min) * (axis._canvasWidth - axis._offsets.max - axis._offsets.min) / (axis.max - axis.min) + axis._offsets.min;
-            }
-            
-            axis.series_u2p = function(u) {
-                return (trans(u) - axis.min) * gridwidth / (axis.max - axis.min);
-            }
-            
-            axis.series_p2u = function(p) {
-                return trans(p) * (axis.max - axis.min) / gridwidth + axis.min;
-            }
-            
-            if (axis.show) {
-                // set the position
-                if (axis.name == 'xaxis') {
-                    $(axis._elem).css({position:'absolute', left:'0px', top:(axis._canvasHeight-offsets.bottom)+'px'});
-                }
-                else {
-                    $(axis._elem).css({position:'absolute', left:'0px', bottom:(axis._canvasHeight-offsets.top)+'px'});
-                }
+        for (var p in pos) {
+            this._elem.css(p, pos[p]);
+        }
+        
+        this._offsets = offsets;
+        // pixellength will be + for x axes and - for y axes becasue pixels always measured from top left.
+        var pixellength = offmax - offmin;
+        var unitlength = max - min;
+        
+        // point to unit and unit to point conversions references to Plot DOM element top left corner.
+        this.p2u = function(p){
+            return (p - offmin) * unitlength / pixellength + min;
+        };
+        
+        this.u2p = function(u){
+            return (trans(u) - min) * pixellength / unitlength + offmin;
+        };
+        
+        // point to unit and unit to point conversions references to Grid DOM element top left corner.
+        this.series_p2u = function(p){
+            return p * unitlength / pixellength + min;
+        };
+        
+        if (this.name == 'xaxis' || this.name == 'x2axis'){
+            this.series_u2p = function(u){
+                return (trans(u) - min) * pixellength / unitlength;
+            };
+        }
+        // yaxis is max at top of canvas.
+        else {
+            this.series_u2p = function(u){
+                return (trans(u) - max) * pixellength / unitlength;
+            };
+        }
+        
+        if (this.show) {
+            if (this.name == 'xaxis' || this.name == 'x2axis') {
                 for (i=0; i<ticks.length; i++) {
                     var t = ticks[i];
-                    var shim = $(t._elem).outerWidth(true)/2;
-                    var val = axis.u2p(t.value) - shim + 'px';
-                    $(t._elem).css('left', val);
-                    // remember, could have done it this way
-                    //tickdivs[i].style.left = val;
+                    var shim = t.getWidth()/2;
+                    var val = this.u2p(t.value) - shim + 'px';
+                    t._elem.css('left', val);
                 }
             }
-        }  
-        else {
-            axis._offsets = {min:offsets.bottom, max:offsets.top};
-            
-            axis.p2u = function(p) {
-                return (trans(p) - axis._canvasHeight + axis._offsets.min)*(max - min)/(axis._canvasHeight - axis._offsets.min - axis._offsets.max) + min;
-            }
-            
-            axis.u2p = function(u) {
-                return -(trans(u) - min) * (axis._canvasHeight - axis._offsets.min - axis._offsets.max) / (max - min) + axis._canvasHeight - axis._offsets.min;
-            }
-            
-            axis.series_u2p = function(u) {
-                return (max - trans(u)) * gridheight /(max - min);
-            }
-            
-            axis.series_p2u = function(p) {
-                return -trans(p) * (max - min) / gridheight + max;
-            }
-            
-            if (axis.show) {
-                // set the position
-                if (axis.name == 'yaxis') {
-                    $(axis._elem).css({position:'absolute', right:(axis._canvasWidth-offsets.left)+'px', top:'0px'});
-                }
-                else {
-                    $(axis._elem).css({position:'absolute', left:(axis._canvasWidth - offsets.right)+'px', top:'0px'});
-                }
+            else {
                 for (i=0; i<ticks.length; i++) {
                     var t = ticks[i];
-                    var shim = $(t._elem).outerHeight(true)/2;
-                    var val = axis.u2p(t.value) - shim + 'px';
-                    $(t._elem).css('top', val);
+                    var shim = t.getHeight()/2;
+                    var val = this.u2p(t.value) - shim + 'px';
+                    t._elem.css('top', val);
                 }
             }
-        }    
-        
+        }        
     };
 })(jQuery);
         this.tickInterval;
         // prop: renderer
         // Instance of a rendering engine that draws the axis on the plot.
-        this.renderer = new $.jqplot.linearAxisRenderer();
+        this.renderer = $.jqplot.LinearAxisRenderer;
         this.rendererOptions = {};
+        this.tickRenderer = $.jqplot.AxisTick;
         // prop: tickOptions
         // Container for axis tick properties.
         // 
                 }              
             }
         }
+        this.renderer = new this.renderer();
+        this.renderer.init.call(this, this.rendererOptions);
         
-        this.renderer.init(this.rendererOptions);
     };
     
     Axis.prototype.draw = function() {
         if (this.show) this.renderer.pack.call(this, pos, offsets);
     };
     
-    $.jqplot.linearAxisRenderer = function() {
+    $.jqplot.LinearAxisRenderer = function() {
     };
     
-    $.jqplot.linearAxisRenderer.prototype.init = function(options){
+    $.jqplot.LinearAxisRenderer.prototype.init = function(options){
         $.extend(true, this, options);
     };
     
     // Populates some properties of the elements and figures out
     // height and width of element.
     // called with scope of axis
-    $.jqplot.linearAxisRenderer.prototype.draw = function() {
+    $.jqplot.LinearAxisRenderer.prototype.draw = function() {
         if (this.show) {
             // populate the axis label and value properties.
             this.renderer.createTicks.call(this);
         return this._elem;
     };
     
-    $.jqplot.linearAxisRenderer.prototype.set = function() {   
+    $.jqplot.LinearAxisRenderer.prototype.set = function() {   
         var dim = 0;
         var temp; 
         if (this.show && this.showTicks) {
     // Populate the axis properties, giving a label and value
     // (corresponding to the user data coordinates, not plot coords.)
     // for each tick on the axis.
-    $.jqplot.linearAxisRenderer.prototype.createTicks = function() {
+    $.jqplot.LinearAxisRenderer.prototype.createTicks = function() {
         // we're are operating on an axis here
-        var axis = this;
-        var ticks = axis._ticks;
-        var name = axis.name;
+        var ticks = this._ticks;
+        var name = this.name;
         // databounds were set on axis initialization.
-        var db = axis._dataBounds;
+        var db = this._dataBounds;
         var dim, interval;
         var min, max;
         var pos1, pos2;
         // we don't have any ticks yet, let's make some!
         else {
             if (name == 'xaxis' || name == 'x2axis') {
-                dim = this._plotWidth;
+                dim = this._plotDimensions.width;
             }
             else {
-                dim = this._plotHeight;
+                dim = this._plotDimensions.height;
             }
         
             min = ((this.min != null) ? this.min : db.min);
             this.tickInterval = range / (this.numberTicks-1);
             for (var i=0; i<this.numberTicks; i++){
                 tt = this.min + i * range / (this.numberTicks-1);
-                var t = new $.jqplot.AxisTick(this.tickOptions);
+                var t = new this.tickRenderer(this.tickOptions);
+                // var t = new $.jqplot.AxisTick(this.tickOptions);
                 if (!this.showTicks) {
                     t.showLabel = false;
                     t.showMark = false;
                 }
                 else if (!this.showTickMarks) t.showMark = false;
                 t.setTick(tt, this.name);
-                axis._ticks.push(t);
+                this._ticks.push(t);
             }
         }
     };
     // functions: pack
     // Define unit <-> coordinate conversions and properly position tick dom elements.
     // Now we know offsets around the grid, we can define conversioning functions.
-    $.jqplot.linearAxisRenderer.prototype.pack = function(pos, offsets) {
+    $.jqplot.LinearAxisRenderer.prototype.pack = function(pos, offsets) {
         var ticks = this._ticks;
         var max = this.max;
         var min = this.min;
         }    
     };
 
+    // as convienence, tick cna be initialized when created.
     $.jqplot.AxisTick = function(options) {
         $.jqplot.ElemContainer.call(this);
         this.mark = 'outside';
         $.extend(true, this, options);
     };
     
+    $.jqplot.AxisTick.prototype.init = function(options) {
+        $.extend(true, this, options);
+    }
+    
     $.jqplot.AxisTick.prototype = new $.jqplot.ElemContainer();
     $.jqplot.AxisTick.prototype.constructor = $.jqplot.AxisTick;
     
         this.rowSpacing = '0.5em';
         // prop: _elem
         // reference to the legend DOM element.
-        this.renderer = new $.jqplot.tableLegendRenderer();
+        this.renderer = $.jqplot.TableLegendRenderer;
         this.rendererOptions = {};
         this._series = [];
         
     Legend.prototype = new $.jqplot.ElemContainer();
     Legend.prototype.constructor = Legend;
     
+    Legend.prototype.init = function() {
+        this.renderer = new this.renderer();
+        this.renderer.init.call(this, this.rendererOptions);
+    }
+    
     Legend.prototype.draw = function(offsets) {
-        log('Legend draw');
         return this.renderer.draw.call(this, offsets);
     };
     
         this.renderer.set.call(this);
     };
     
-    $.jqplot.tableLegendRenderer = function(){
+    $.jqplot.TableLegendRenderer = function(){
         //
     };
+
+    $.jqplot.TableLegendRenderer.prototype.init = function(options) {
+        $.extend(true, this, options);
+    }
     
-    $.jqplot.tableLegendRenderer.prototype.draw = function(offsets) {
+    $.jqplot.TableLegendRenderer.prototype.draw = function(offsets) {
         var legend = this;
         if (this.show) {
             var series = this._series;
                 '<div style="width:1.2em;height:0.7em;background-color:'+color+';"></div>'+
                 '</div></td>').appendTo(tr);
             $('<td class="jqplot-legend" style="vertical-align:middle;padding-top:'+rs+';">'+label+'</td>').appendTo(tr);
-            log('legend set: ', tr);
         };
         
         var pad = false;
         // prop: textColor
         // css color spec for the text.
         this.textColor = '';
-        this.renderer = new $.jqplot.divTitleRenderer();
+        this.renderer = $.jqplot.DivTitleRenderer;
         this.rendererOptions = {};   
     };
     
     Title.prototype.constructor = Title;
     
     Title.prototype.init = function() {
-        this.renderer.init(this.rendererOptions);
+        this.renderer = new this.renderer();
+        this.renderer.init.call(this, this.rendererOptions);
     }
     
     Title.prototype.draw = function(width) {
         this.renderer.pack.call(this);
     };
     
-    $.jqplot.divTitleRenderer = function() {
+    $.jqplot.DivTitleRenderer = function() {
     };
     
-    $.jqplot.divTitleRenderer.prototype.init = function(options) {
+    $.jqplot.DivTitleRenderer.prototype.init = function(options) {
         $.extend(true, this, options);
     };
     
-    $.jqplot.divTitleRenderer.prototype.draw = function() {
+    $.jqplot.DivTitleRenderer.prototype.draw = function() {
         var r = this.renderer;
         if (!this.text) {
             this.show = false;
         return this._elem;
     };
     
-    $.jqplot.divTitleRenderer.prototype.pack = function() {
+    $.jqplot.DivTitleRenderer.prototype.pack = function() {
         // nothing to do here
     };
 
         this._yaxis;
         // prop: renderer
         // Instance of a renderer which will draw the series.
-        this.renderer = new $.jqplot.lineRenderer();
+        this.renderer = $.jqplot.LineRenderer;
         // prop: rendererOptions
         // Options to set on the renderer.  See the renderer for possibly options.
         this.rendererOptions = {};
         // Either an instance of a mark renderer which will draw the data pont markers
         // or an options object with a renderer property and additional options to pass
         // to the renderer.  See the renderer for additional options.
-        this.marker = new $.jqplot.markRenderer();
+        this.markerRenderer = $.jqplot.MarkerRenderer;
         this.markerOptions = {};
         // // prop: mode
         // // 'scatter' or 'category'
                 continue;
             }
         }
+        this.renderer = new this.renderer();
         this.renderer.init.call(this, this.rendererOptions);
+        this.markerRenderer = new this.markerRenderer();
+        if (!this.markerOptions.color) this.markerOptions.color = this.color;
+        if (this.markerOptions.show == null) this.markerOptions.show = this.showMarker;
+        // the markerRenderer is called within it's own scaope, don't want to overwrite series options!!
+        this.markerRenderer.init(this.markerOptions);
     }
     
     Series.prototype.draw = function(sctx) {
+        this.renderer.setGridData.call(this);
         this.renderer.draw.call(this, sctx);
     }
     
-    $.jqplot.lineRenderer = function(){
+    $.jqplot.LineRenderer = function(){
     };
     
     // called with scope of series.
-    $.jqplot.lineRenderer.prototype.init = function(options) {
+    $.jqplot.LineRenderer.prototype.init = function(options) {
         $.extend(true, this.renderer, options);
-        if (!this.markerOptions.color) this.markerOptions.color = this.color;
-        if (this.markerOptions.show == null) this.markerOptions.show = this.showMarker;
-        this.marker.init(this.markerOptions);
-    }
+    };
+    
+    $.jqplot.LineRenderer.prototype.setGridData = function() {
+        // recalculate the grid data
+        var xp = this._xaxis.series_u2p;
+        var yp = this._yaxis.series_u2p;
+        this.gridData = [];
+        this.gridData.push([xp.call(this._xaxis, this.data[0][0]), yp.call(this._yaxis, this.data[0][1])]);
+        for (var i=1; i<this.data.length; i++) {
+            this.gridData.push([xp.call(this._xaxis, this.data[i][0]), yp.call(this._yaxis, this.data[i][1])]);
+        }
+    };
 
-    $.jqplot.lineRenderer.prototype.draw = function(ctx) {
+    $.jqplot.LineRenderer.prototype.draw = function(ctx) {
         var i;
         var xaxis = this.xaxis;
         var yaxis = this.yaxis;
             ctx.lineCap = 'round';
             ctx.lineWidth = this.lineWidth;
             ctx.strokeStyle = this.color;
-            // recalculate the grid data
-            this.gridData = [];
-            this.gridData.push([xp.call(this._xaxis, this.data[0][0]), yp.call(this._yaxis, this.data[0][1])]);
             ctx.moveTo(this.gridData[0][0], this.gridData[0][1]);
             for (var i=1; i<this.data.length; i++) {
-                this.gridData.push([xp.call(this._xaxis, this.data[i][0]), yp.call(this._yaxis, this.data[i][1])]);
                 ctx.lineTo(this.gridData[i][0], this.gridData[i][1]);
             }
             ctx.stroke();
         }
         
         // now draw the markers
-        if (this.marker.show) {
+        if (this.markerRenderer.show) {
             for (i=0; i<this.gridData.length; i++) {
-                this.marker.draw(this.gridData[i][0], this.gridData[i][1], ctx);
+                this.markerRenderer.draw(this.gridData[i][0], this.gridData[i][1], ctx);
             }
         }
         
         ctx.restore();
     };    
     
-    $.jqplot.markRenderer = function(){
+    $.jqplot.MarkerRenderer = function(){
         this.show = true;
         // prop: style
         // One of diamond, circle, square, x, plus, dash, filledDiamond, filledCircle, filledSquare
         this.shadowAlpha = '0.07';
     };
     
-    $.jqplot.markRenderer.prototype.init = function(options) {
+    $.jqplot.MarkerRenderer.prototype.init = function(options) {
         $.extend(true, this, options);
     }
     
-    $.jqplot.markRenderer.prototype.drawDiamond = function(x, y, ctx, fill) {
+    $.jqplot.MarkerRenderer.prototype.drawDiamond = function(x, y, ctx, fill) {
         ctx.save();
         ctx.lineJoin = 'miter';
         ctx.lineWidth = this.lineWidth;
             ctx.save();
             for (var j=0; j<this.shadowDepth; j++) {
                 ctx.translate(Math.cos(this.shadowAngle*Math.PI/180)*this.shadowOffset, Math.sin(this.shadowAngle*Math.PI/180)*this.shadowOffset);
+                // // Experimental shadow growth
+                // ctx.lineWidth = this.lineWidth*(1+j/4);
+                // stretch = 1.2 * (1+j/7);
+                // dx = this.size/2*stretch;
+                // dy = this.size/2*stretch;
+                // //////////////////
                 ctx.beginPath();
                 ctx.strokeStyle = 'rgba(0,0,0,'+this.shadowAlpha+')';
                 ctx.fillStyle = 'rgba(0,0,0,'+this.shadowAlpha+')';
         ctx.restore();
     };
     
-    $.jqplot.markRenderer.prototype.drawSquare = function(x, y, ctx, fill) {
+    $.jqplot.MarkerRenderer.prototype.drawSquare = function(x, y, ctx, fill) {
         ctx.save();
         ctx.lineJoin = 'miter';
         ctx.lineWidth = this.lineWidth;
         ctx.restore();
     };
     
-    $.jqplot.markRenderer.prototype.drawCircle = function(x, y, ctx, fill) {
+    $.jqplot.MarkerRenderer.prototype.drawCircle = function(x, y, ctx, fill) {
         ctx.save();
         ctx.lineJoin = 'miter';
         ctx.lineWidth = this.lineWidth;
             ctx.save();
             for (var j=0; j<this.shadowDepth; j++) {
                 ctx.translate(Math.cos(this.shadowAngle*Math.PI/180)*this.shadowOffset, Math.sin(this.shadowAngle*Math.PI/180)*this.shadowOffset);
+                // // Experimental shadow growth
+                // ctx.lineWidth = this.lineWidth*(1+j/5);
+                // radius = this.size/2*(1+j/6);
+                // ///////////////////////////
                 ctx.beginPath();
                 ctx.strokeStyle = 'rgba(0,0,0,'+this.shadowAlpha+')';
                 ctx.fillStyle = 'rgba(0,0,0,'+this.shadowAlpha+')';
         ctx.restore();
     };
     
-    $.jqplot.markRenderer.prototype.draw = function(x, y, ctx) {
+    $.jqplot.MarkerRenderer.prototype.draw = function(x, y, ctx) {
         switch (this.style) {
             case 'diamond':
                 this.drawDiamond(x,y,ctx, false);
         this._axes = [];
         // prop: renderer
         // Instance of a renderer which will actually render the grid.
-        this.renderer = new $.jqplot.canvasGridRenderer();
+        this.renderer = $.jqplot.CanvasGridRenderer;
         this.rendererOptions = {};
         this._offsets = {top:null, bottom:null, left:null, right:null};
     };
     Grid.prototype.constructor = Grid;
     
     Grid.prototype.init = function() {
+        this.renderer = new this.renderer();
         this.renderer.init.call(this, this.rendererOptions);
     }
     
         this.renderer.draw.call(this);
     }
     
-    $.jqplot.canvasGridRenderer = function(){};
+    $.jqplot.CanvasGridRenderer = function(){};
     
     // called with context of Grid object
-    $.jqplot.canvasGridRenderer.prototype.init = function(options) {
+    $.jqplot.CanvasGridRenderer.prototype.init = function(options) {
         this._ctx;
         $.extend(true, this, options);
     }
     
     // called with context of Grid.
-    $.jqplot.canvasGridRenderer.prototype.createElement = function() {
+    $.jqplot.CanvasGridRenderer.prototype.createElement = function() {
         var elem = document.createElement('canvas');
         var w = this._plotDimensions.width;
         var h = this._plotDimensions.height;
     //     this.octx = this.overlayCanvas.getContext("2d");
     // };
     
-    $.jqplot.canvasGridRenderer.prototype.draw = function() {
+    $.jqplot.CanvasGridRenderer.prototype.draw = function() {
         this._ctx = this._elem.get(0).getContext("2d");
         var ctx = this._ctx;
         var axes = this._axes;
             this.data = data;
             
             this.parseOptions(options);
+            this.title.init();
+            this.legend.init();
             
             for (var i=0; i<this.series.length; i++) {
                 this.series[i]._plotDimensions = this._plotDimensions;
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.