Commits

Chris Leonello  committed 0db658d

Major tear up. Reworking to make truly modular code.

  • Participants
  • Parent commits 44b6fb7

Comments (0)

Files changed (9)

File jqplot.AxisRenderers.js

-(function($) {
-    var debug = 1;
-        
-	// Convienence function that won't hang IE.
-	function log() {
-	    if (window.console && debug) {
-	       if (arguments.length == 1) console.log (arguments[0]);
-	       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(target, plotHeight, plotWidth) {
-        var axis = this;
-        if (axis.show) {
-            // populate the axis label and value properties.
-            axis.renderer.setAxis.call(axis, plotHeight, plotWidth);
-            // 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;
-            
-            axis._elem = $('<div class="jqplot-axis"></div>').appendTo(target).get(0);
-            //for (var s in axis.style) $(axis._elem).css(s, axis.style[s]);
-    
-            if (axis.ticks.showLabels) {
-                var t = axis._ticks;
-                for (var i=0; i<t.length; i++) {
-                    var tick = t[i];
-                    if (!tick.isMinorTick || axis.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;
-                        }
-                    }
-                }
-            }
-        }
-    };
-    
-    // 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.setAxis = function(plotHeight, plotWidth) {
-        // we're are operating on an axis here
-        var axis = this;
-        var ticks = axis._ticks;
-        var name = axis.name;
-        var db = axis._dataBounds;
-        var dim, interval;
-        var min, max;
-        var pos1, pos2;
-        var tt, i;
-        
-        axis._canvasHeight = plotHeight;
-        axis._canvasWidth = plotWidth;
-        
-        // 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._canvasWidth;
-            }
-            else {
-                dim = this._canvasHeight;
-            }
-        
-            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 (this.pad >1.99) this.pad = 1.99;
-            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();
-                var label = axis.tickFormatter(axis.ticks.formatString, tt);
-                t.setTick(tt, label, this.name);
-                axis._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.
-    $.jqplot.linearAxisRenderer.prototype.pack = function(offsets, gridwidth, gridheight) {
-        var ticks = this._ticks;
-        var max = this.max;
-        var min = this.min;
-        
-        if (this.name == 'xaxis' || this.name == 'x2axis') {
-            this._offsets = {min:offsets.left, max:offsets.right};
-            
-            this.p2u = function(p) {
-                return (p - this._offsets.min)*(this.max - this.min)/(this._canvasWidth - this._offsets.max - this._offsets.min) + this.min;
-            }
-            
-            this.u2p = function(u) {
-                return (u - this.min) * (this._canvasWidth - this._offsets.max - this._offsets.min) / (this.max - this.min) + this._offsets.min;
-            }
-            
-            this.series_u2p = function(u) {
-                return (u - this.min) * gridwidth / (this.max - this.min);
-            }
-            
-            this.series_p2u = function(p) {
-                return p * (this.max - this.min) / gridwidth + this.min;
-            }
-            
-            if (this.show) {
-                // set the position
-                if (this.name == 'xaxis') {
-                    $(this._elem).css({position:'absolute', left:'0px', top:(this._canvasHeight-offsets.bottom)+'px'});
-                }
-                else {
-                    $(this._elem).css({position:'absolute', left:'0px', bottom:(this._canvasHeight-offsets.top)+'px'});
-                }
-                for (i=0; i<ticks.length; i++) {
-                    var t = ticks[i];
-                    var shim = $(t._elem).outerWidth(true)/2;
-                    var val = this.u2p(t.value) - shim + 'px';
-                    $(t._elem).css('left', val);
-                    // remember, could have done it this way
-                    //tickdivs[i].style.left = val;
-                }
-            }
-        }  
-        else {
-            this._offsets = {min:offsets.bottom, max:offsets.top};
-            
-            this.p2u = function(p) {
-                return (p - this._canvasHeight + this._offsets.min)*(max - min)/(this._canvasHeight - this._offsets.min - this._offsets.max) + min;
-            }
-            
-            this.u2p = function(u) {
-                return -(u - min) * (this._canvasHeight - this._offsets.min - this._offsets.max) / (max - min) + this._canvasHeight - this._offsets.min;
-            }
-            
-            this.series_u2p = function(u) {
-                return (max - u) * gridheight /(max - min);
-            }
-            
-            this.series_p2u = function(p) {
-                return -p * (max - min) / gridheight + max;
-            }
-            
-            if (this.show) {
-                // set the position
-                if (this.name == 'yaxis') {
-                    $(this._elem).css({position:'absolute', right:(this._canvasWidth-offsets.left)+'px', top:'0px'});
-                }
-                else {
-                    $(this._elem).css({position:'absolute', left:(this._canvasWidth - offsets.right)+'px', top:'0px'});
-                }
-                for (i=0; i<tickdivs.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);
-                }
-            }
-        }    
-    };
-    
-    // Class: categoryAxisRenderer
-    // Subclass of linearAxisRenderer.  Renderes axis as equally spaced category labels.
-    $.jqplot.categoryAxisRenderer = function() {
-        $.jqplot.linearAxisRenderer.call(this);
-    };
- 
-    // 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.categroyAxisRenderer.prototype.setAxis = function(plotHeight, plotWidth) {
-        // we're are operating on an axis here
-        var axis = this;
-        var ticks = this._ticks;
-        var name = this.name;
-        var db = this._dataBounds;
-        var dim, interval;
-        var min, max;
-        var pos1, pos2;
-        var tt, i;
-        
-        this._canvasHeight = plotHeight;
-        this._canvasWidth = plotWidth;
-        
-        // if tick
-        
-        // Ticks should have been already specified by the user or set by the line renderer.  Since we
-        // don't have access to the series, there's not much to do if we don't already have ticks.
-        if (ticks.length) {
-            this.numberTicks =ticks.length;
-            for (i=0; i<ticks.length; i++){
-                var t = ticks[i];
-                if (!t.label) t.label = this.formatter(this.formatString, t.value.toString());
-                // databounds should have been set to 0, 2*series length in line renderer
-                this.min = db.min;
-                this.max = db.max;
-                // 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;
-                }
-            }
-        }
-        
-        // we don't have any ticks yet, try to guess based on the bounds.
-        else {
-            // TBD what to do here.
-        }
-        
-        if (name == 'yaxis' || name == 'y2axis') this.ticks.styles.reverse();
-    };
-    
-    
-})(jQuery);

File jqplot.AxisTicks.js

-(function($) {    
-    $.jqplot.AxisTick = function() {
-        this.mark = 'outside';
-        this.isMinorTick = false;
-        this.size = 4;
-        this.show = true;
-        this.showLabel = true;
-        this.label = '';
-        this.value;
-        this._styles = {};
-        this.formatString;
-        this.fontFamily='';
-        this.fontSize = '0.75em';
-        this.textColor = '';
-        this._elem;
-    };
-    
-    $.jqplot.AxisTick.prototype.setTick = function(value, label, axisName, isMinor) {
-        this.label = label;
-        this.value = value;
-        var pox = '15px';
-        switch (axisName) {
-            case 'xaxis':
-                this._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'};
-                break;
-            case 'x2axis':
-                this._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'};
-                break;
-            case 'yaxis':
-                this._styles = {position:'absolute', right:'0px', top:pox, paddingRight:'10px'};
-                break;
-            case 'y2axis':
-                this._styles = {position:'absolute', left:'0px', top:pox, paddingLeft:'10px'};
-                break;
-        }
-        if (isMinor) this.isMinorTick = true;
-        return this;
-    };
-    
-    $.jqplot.AxisTick.prototype.draw = function() {
-        this._elem = $('<div class="jqplot-axis-tick"></div>').get(0);
-        return this._elem;
-    }
-})(jQuery);

File jqplot.axisRenderers.js

+(function($) {
+    var debug = 1;
+        
+	// Convienence function that won't hang IE.
+	function log() {
+	    if (window.console && debug) {
+	       if (arguments.length == 1) console.log (arguments[0]);
+	       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.grid_p2u = function(p){
+            return p * unitlength / pixellength + min;
+        };
+        
+        this.grid_u2p = function(u){
+            return (u - min) * 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);
+    };
+ 
+    // 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.categoryAxisRenderer.prototype.setAxis = function(plotHeight, plotWidth) {
+        // we're are operating on an axis here
+        var axis = this;
+        var ticks = this._ticks;
+        var name = this.name;
+        var db = this._dataBounds;
+        var dim, interval;
+        var min, max;
+        var pos1, pos2;
+        var tt, i;
+        
+        this._canvasHeight = plotHeight;
+        this._canvasWidth = plotWidth;
+        
+        // if tick
+        
+        // Ticks should have been already specified by the user or set by the line renderer.  Since 
+we
+        // don't have access to the series, there's not much to do if we don't already have ticks.
+        if (ticks.length) {
+            this.numberTicks =ticks.length;
+            for (i=0; i<ticks.length; i++){
+                var t = ticks[i];
+                if (!t.label) t.label = this.formatter(this.formatString, t.value.toString());
+                // databounds should have been set to 0, 2*series length in line renderer
+                this.min = db.min;
+                this.max = db.max;
+                // 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;
+                }
+            }
+        }
+        
+        // we don't have any ticks yet, try to guess based on the bounds.
+        else {
+            // TBD what to do here.
+        }
+        
+        if (name == 'yaxis' || name == 'y2axis') this.ticks.styles.reverse();
+    };
+    
+    
+})(jQuery);

File jqplot.axisTick.js

+(function($) {    
+    $.jqplot.AxisTick = function(options) {
+        $.jqplot.ElemContainer.call(this);
+        this.mark = 'outside';
+        this.showMark = true;
+        this.isMinorTick = false;
+        this.size = 4;
+        this.markSize = 4;
+        this.show = true;
+        this.showLabel = true;
+        this.label = '';
+        this.value = null;
+        this._styles = {};
+        this.formatter = $.jqplot.sprintf;
+        this.formatString;
+        this.fontFamily='';
+        this.fontSize = '0.75em';
+        this.textColor = '';
+        this._elem;
+        
+        $.extend(true, this, options);
+    };
+    
+    $.jqplot.AxisTick.prototype = new $.jqplot.ElemContainer();
+    $.jqplot.AxisTick.prototype.constructor = $.jqplot.AxisTick;
+    
+    $.jqplot.AxisTick.prototype.setTick = function(value, axisName, isMinor) {
+        this.value = value;
+        var pox = '15px';
+        switch (axisName) {
+            case 'xaxis':
+                this._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'};
+                break;
+            case 'x2axis':
+                this._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'};
+                break;
+            case 'yaxis':
+                this._styles = {position:'absolute', left:'0px', top:pox, paddingRight:'10px'};
+                break;
+            case 'y2axis':
+                this._styles = {position:'absolute', right:'0px', top:pox, paddingLeft:'10px'};
+                break;
+        }
+        if (isMinor) this.isMinorTick = true;
+        return this;
+    };
+    
+    $.jqplot.AxisTick.prototype.draw = function() {
+        if (!this.label) this.label = this.formatter(this.formatString, this.value);
+        this._elem = $('<div class="jqplot-axis-tick">'+this.label+'</div>');
+        for (var s in this._styles) {
+            this._elem.css(s, this._styles[s]);
+        }
+        if (this.fontFamily) this._elem.css('font-family', this.fontFamily);
+        if (this.fontSize) this._elem.css('font-size', this.fontSize);
+        if (this.textColor) this._elem.css('color', this.textColor);
+        return this._elem;
+    }
+})(jQuery);

File jqplot.axisTicks.js

+(function($) {    
+    $.jqplot.AxisTick = function(options) {
+        $.jqplot.ElemContainer.call(this);
+        this.mark = 'outside';
+        this.showMark = true;
+        this.isMinorTick = false;
+        this.size = 4;
+        this.markSize = 4;
+        this.show = true;
+        this.showLabel = true;
+        this.label = '';
+        this.value = null;
+        this._styles = {};
+        this.formatter = $.jqplot.sprintf;
+        this.formatString;
+        this.fontFamily='';
+        this.fontSize = '0.75em';
+        this.textColor = '';
+        this._elem;
+        
+        $.extend(true, this, options);
+    };
+    
+    $.jqplot.AxisTick.prototype = new $.jqplot.ElemContainer();
+    $.jqplot.AxisTick.prototype.constructor = $.jqplot.AxisTick;
+    
+    $.jqplot.AxisTick.prototype.setTick = function(value, axisName, isMinor) {
+        this.value = value;
+        var pox = '15px';
+        switch (axisName) {
+            case 'xaxis':
+                this._styles = {position:'absolute', top:'0px', left:pox, paddingTop:'10px'};
+                break;
+            case 'x2axis':
+                this._styles = {position:'absolute', bottom:'0px', left:pox, paddingBottom:'10px'};
+                break;
+            case 'yaxis':
+                this._styles = {position:'absolute', left:'0px', top:pox, paddingRight:'10px'};
+                break;
+            case 'y2axis':
+                this._styles = {position:'absolute', right:'0px', top:pox, paddingLeft:'10px'};
+                break;
+        }
+        if (isMinor) this.isMinorTick = true;
+        return this;
+    };
+    
+    $.jqplot.AxisTick.prototype.draw = function() {
+        if (!this.label) this.label = this.formatter(this.formatString, this.value);
+        this._elem = $('<div class="jqplot-axis-tick">'+this.label+'</div>');
+        for (var s in this._styles) {
+            this._elem.css(s, this._styles[s]);
+        }
+        if (this.fontFamily) this._elem.css('font-family', this.fontFamily);
+        if (this.fontSize) this._elem.css('font-size', this.fontSize);
+        if (this.textColor) this._elem.css('color', this.textColor);
+        return this._elem;
+    }
+})(jQuery);

File jqplot.canvasGridRenderer.js

     // (Public) Rendrer for the jqPlot grid which draws the grid as a canvas element on the page.
     $.jqplot.canvasGridRenderer = function(){};
     
+    // called with context of Grid object
+    $.jqplot.canvasGridRenderer.prototype.init = function(options) {
+        this._ctx;
+        $.extend(true, this, options);
+    }
+    
+    // called with context of Grid.
+    $.jqplot.canvasGridRenderer.prototype.createElements = function() {
+        var elem = document.createElement('canvas');
+        var w = this._plotDimensions.width;
+        var h = this._plotDimensions.height;
+        elem.width = w;
+        elem.height = h;
+        if ($.browser.msie) // excanvas hack
+            elem = window.G_vmlCanvasManager.initElement(elem);
+        this._elem = $(elem);
+        this._elem.css({ position: 'absolute', left: 0, top: 0 });
+        this._top = this._offsets.top;
+        this._bottom = h - this._offsets.bottom;
+        this._left = this._offsets.left;
+        this._right = w - this._offsets.right;
+        this._width = this._right - this._left;
+        this._height = this._bottom - this._top;
+        return this._elem;
+    };
+    
+        // var h = this._plotDimensions.height - this._offsets.bottom - this._offsets.top;
+        // var w = this._plotDimensions.width - this._offsets.left - this._offsets.right;
+    
     // Function: createDrawingContext
     // (Public) Creates (but doesn't populate) the actual canvas elements for plotting.
     // Called within context of jqPlot object.
-    $.jqplot.canvasGridRenderer.prototype.createDrawingContext = function(){
-        this.gridCanvas = document.createElement('canvas');
-        this.gridCanvas.width = this._width;
-        this.gridCanvas.height = this._height;
-        if ($.browser.msie) // excanvas hack
-            this.gridCanvas = window.G_vmlCanvasManager.initElement(this.gridCanvas);
-        $(this.gridCanvas).css({ position: 'absolute', left: 0, top: 0 });
-        this.target.append(this.gridCanvas);
-        this.gctx = this.gridCanvas.getContext("2d");
-        
-        this.seriesCanvas = document.createElement('canvas');
-        this.seriesCanvas.width = this.grid._width;
-        this.seriesCanvas.height = this.grid._height;
-        if ($.browser.msie) // excanvas hack
-            this.seriesCanvas = window.G_vmlCanvasManager.initElement(this.seriesCanvas);
-        $(this.seriesCanvas).css({ position: 'absolute', left: this.grid._left, top: this.grid._top });
-        this.target.append(this.seriesCanvas);
-        this.sctx = this.seriesCanvas.getContext("2d");
-        
-        this.overlayCanvas = document.createElement('canvas');
-        this.overlayCanvas.width = this._width;
-        this.overlayCanvas.height = this._height;
-        if ($.browser.msie) // excanvas hack
-            this.overlayCanvas = window.G_vmlCanvasManager.initElement(this.overlayCanvas);
-        $(this.overlayCanvas).css({ position: 'absolute', left: 0, top: 0 });
-        this.target.append(this.overlayCanvas);
-        this.octx = this.overlayCanvas.getContext("2d");
-    };
+    // $.jqplot.canvasGridRenderer.prototype.createDrawingContext = function(){
+    //     this.gridCanvas = document.createElement('canvas');
+    //     this.gridCanvas.width = this._width;
+    //     this.gridCanvas.height = this._height;
+    //     if ($.browser.msie) // excanvas hack
+    //         this.gridCanvas = window.G_vmlCanvasManager.initElement(this.gridCanvas);
+    //     $(this.gridCanvas).css({ position: 'absolute', left: 0, top: 0 });
+    //     this.target.append(this.gridCanvas);
+    //     this.gctx = this.gridCanvas.getContext("2d");
+    //     
+    //     this.seriesCanvas = document.createElement('canvas');
+    //     this.seriesCanvas.width = this.grid._width;
+    //     this.seriesCanvas.height = this.grid._height;
+    //     if ($.browser.msie) // excanvas hack
+    //         this.seriesCanvas = window.G_vmlCanvasManager.initElement(this.seriesCanvas);
+    //     $(this.seriesCanvas).css({ position: 'absolute', left: this.grid._left, top: this.grid._top });
+    //     this.target.append(this.seriesCanvas);
+    //     this.sctx = this.seriesCanvas.getContext("2d");
+    //     
+    //     this.overlayCanvas = document.createElement('canvas');
+    //     this.overlayCanvas.width = this._width;
+    //     this.overlayCanvas.height = this._height;
+    //     if ($.browser.msie) // excanvas hack
+    //         this.overlayCanvas = window.G_vmlCanvasManager.initElement(this.overlayCanvas);
+    //     $(this.overlayCanvas).css({ position: 'absolute', left: 0, top: 0 });
+    //     this.target.append(this.overlayCanvas);
+    //     this.octx = this.overlayCanvas.getContext("2d");
+    // };
     
-    $.jqplot.canvasGridRenderer.prototype.draw = function(ctx, axes) {
-        var grid = this;
+    $.jqplot.canvasGridRenderer.prototype.draw = function() {
+        this._ctx = this._elem.get(0).getContext("2d");
+        var ctx = this._ctx;
+        var axes = this._axes;
         // Add the grid onto the grid canvas.  This is the bottom most layer.
         ctx.save();
-        ctx.fillStyle = grid.background;
-        ctx.fillRect(grid._left, grid._top, grid._width, grid._height);
+        ctx.fillStyle = this.background;
+        ctx.fillRect(this._left, this._top, this._width, this._height);
         
-        function drawGridLine(x1, y1, x2, y2) {
-            
-        }
-        
-        if (grid.drawGridlines) {
+        if (this.drawGridlines) {
             ctx.save();
             ctx.lineJoin = 'miter';
             ctx.lineCap = 'round';
                         case 'xaxis':
                             for (var i=0; i<ticks.length; i++) {
                                 var pos = Math.round(axis.u2p(axis._ticks[i].value)) + 0.5;
-                                drawLine(pos, grid._top, pos, grid._bottom);
+                                drawLine(pos, this._top, pos, this._bottom);
                             }
                             break;
                         case 'yaxis':
                             for (var i=0; i<ticks.length; i++) {
                                 var pos = Math.round(axis.u2p(axis._ticks[i].value)) + 0.5;
-                                drawLine(grid._right, pos, grid._left, pos);
+                                drawLine(this._right, pos, this._left, pos);
                             }
                             break;
                         case 'x2axis':
                             for (var i=0; i<ticks.length; i++) {
                                 var pos = Math.round(axis.u2p(axis._ticks[i].value)) + 0.5;
-                                drawLine(pos, grid._bottom, pos, grid._top);
+                                drawLine(pos, this._bottom, pos, this._top);
                             }
                             break;
                         case 'y2axis':
                             for (var i=0; i<ticks.length; i++) {
                                 var pos = Math.round(axis.u2p(axis._ticks[i].value)) + 0.5;
-                                drawLine(grid._left, pos, grid._right, pos);
+                                drawLine(this._left, pos, this._right, pos);
                             }
                             break;
                     }
         ctx.strokeStyle = '#cccccc';
         for (var name in axes) {
             var axis = axes[name];
-            if (axis.show && axis.ticks.mark) {
-                var ticks = axis.ticks;
-                var s = ticks.markSize;
-                var m = ticks.mark;
+            var to = axis.tickOptions;
+            if (axis.show && to.mark) {
+                var ticks = axis._ticks;
+                var s = to.markSize;
+                var m = to.mark;
                 var t = axis._ticks;
                 switch (name) {
                     case 'xaxis':
                             var b, e;
                             switch (m) {
                                 case 'inside':
-                                    b = grid._bottom-s;
-                                    e = grid._bottom;
+                                    b = this._bottom-s;
+                                    e = this._bottom;
                                     break;
                                 case 'outside':
-                                    b = grid._bottom;
-                                    e = grid._bottom+s;
+                                    b = this._bottom;
+                                    e = this._bottom+s;
                                     break;
                                 case 'cross':
-                                    b = grid._bottom-s;
-                                    e = grid._bottom+s;
+                                    b = this._bottom-s;
+                                    e = this._bottom+s;
                                     break;
                                 default:
-                                    b = grid._bottom;
-                                    e = grid._bottom+s;
+                                    b = this._bottom;
+                                    e = this._bottom+s;
                                     break;
                             }
                             drawLine(pos, b, pos, e);
                             var b, e;
                             switch (m) {
                                 case 'outside':
-                                    b = grid._left-s;
-                                    e = grid._left;
+                                    b = this._left-s;
+                                    e = this._left;
                                     break;
                                 case 'inside':
-                                    b = grid._left;
-                                    e = grid._left+s;
+                                    b = this._left;
+                                    e = this._left+s;
                                     break;
                                 case 'cross':
-                                    b = grid._left-s;
-                                    e = grid._left+s;
+                                    b = this._left-s;
+                                    e = this._left+s;
                                     break;
                                 default:
-                                    b = grid._left-s;
-                                    e = grid._left;
+                                    b = this._left-s;
+                                    e = this._left;
                                     break;
                             }
                             drawLine(b, pos, e, pos);
                             var b, e;
                             switch (m) {
                                 case 'outside':
-                                    b = grid._top-s;
-                                    e = grid._top;
+                                    b = this._top-s;
+                                    e = this._top;
                                     break;
                                 case 'inside':
-                                    b = grid._top;
-                                    e = grid._top+s;
+                                    b = this._top;
+                                    e = this._top+s;
                                     break;
                                 case 'cross':
-                                    b = grid._top-s;
-                                    e = grid._top+s;
+                                    b = this._top-s;
+                                    e = this._top+s;
                                     break;
                                 default:
-                                    b = grid._top-s;
-                                    e = grid._top;
+                                    b = this._top-s;
+                                    e = this._top;
                                     break;
                             }
                             drawLine(pos, b, pos, e);
                             var b, e;
                             switch (m) {
                                 case 'inside':
-                                    b = grid._right-s;
-                                    e = grid._right;
+                                    b = this._right-s;
+                                    e = this._right;
                                     break;
                                 case 'outside':
-                                    b = grid._right;
-                                    e = grid._right+s;
+                                    b = this._right;
+                                    e = this._right+s;
                                     break;
                                 case 'cross':
-                                    b = grid._right-s;
-                                    e = grid._right+s;
+                                    b = this._right-s;
+                                    e = this._right+s;
                                     break;
                                 default:
-                                    b = grid._right;
-                                    e = grid._right+s;
+                                    b = this._right;
+                                    e = this._right+s;
                                     break;
                             }
                             drawLine(b, pos, e, pos);
             }
         }
         ctx.restore();
-        ctx.lineWidth = grid.borderWidth;
-        ctx.strokeStyle = grid.borderColor;
-        ctx.strokeRect(grid._left, grid._top, grid._width, grid._height);
+        ctx.lineWidth = this.borderWidth;
+        ctx.strokeStyle = this.borderColor;
+        ctx.strokeRect(this._left, this._top, this._width, this._height);
         
         // now draw the shadow
-        if (grid.shadow) {
+        if (this.shadow) {
             ctx.save();
-            for (var j=0; j<grid.shadowDepth; j++) {
-                ctx.translate(Math.cos(grid.shadowAngle*Math.PI/180)*grid.shadowOffset, Math.sin(grid.shadowAngle*Math.PI/180)*grid.shadowOffset);
-                ctx.lineWidth = grid.shadowWidth;
-                ctx.strokeStyle = 'rgba(0,0,0,'+grid.shadowAlpha+')';
+            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);
+                ctx.lineWidth = this.shadowWidth;
+                ctx.strokeStyle = 'rgba(0,0,0,'+this.shadowAlpha+')';
                 ctx.lineJoin = 'miter';
                 ctx.lineCap = 'round';
                 ctx.beginPath();
-                ctx.moveTo(grid._left, grid._bottom);
-                ctx.lineTo(grid._right, grid._bottom);
-                ctx.lineTo(grid._right, grid._top);
+                ctx.moveTo(this._left, this._bottom);
+                ctx.lineTo(this._right, this._bottom);
+                ctx.lineTo(this._right, this._top);
                 ctx.stroke();
-                //ctx.strokeRect(grid._left, grid._top, grid._width, grid._height);
+                //ctx.strokeRect(this._left, this._top, this._width, this._height);
             }
             ctx.restore();
         }

File jqplot.divTitleRenderer.js

+(function($) {    
+    $.jqplot.divTitleRenderer = function() {
+    };
+    
+    $.jqplot.divTitleRenderer.prototype.init = function(options) {
+        $.extend(true, this, options);
+    };
+    
+    $.jqplot.divTitleRenderer.prototype.draw = function() {
+        var r = this.renderer;
+        if (!this.text) {
+            this.show = false;
+            this._elem = null;
+        }
+        else if (this.text) {
+            var styletext = 'padding-bottom:0.5em;position:absolute;top:0px;left:0px;';
+            styletext += (this._plotWidth) ? 'width:'+this._plotWidth+'px;' : '';
+            styletext += (this.fontFamily) ? 'font-family:'+this.fontFamily+';' : '';
+            styletext += (this.fontSize) ? 'font-size:'+this.fontSize+';' : '';
+            styletext += (this.textAlign) ? 'text-align:'+this.textAlign+';' : '';
+            styletext += (this.textColor) ? 'color:'+this.textColor+';' : '';
+            this._elem = $('<div class="jqplot-title" style="'+styletext+'">'+this.text+'</div>');
+        }
+        
+        return this._elem;
+    };
+    
+    $.jqplot.divTitleRenderer.prototype.pack = function() {
+        // nothing to do here
+    };
+})(jQuery);

File jqplot.lineRenderer.js

 (function($) {
     $.jqplot.lineRenderer = function(){
-        // prop: color
-        // css color spec for the series
-        this.color = '#666666';
-        // prop: lineWidth
-        // width of the line in pixels.  May have different meanings depending on renderer.
-        this.lineWidth = 2.5;
-        // prop: shadow
-        // wether or not to draw a shadow on the line
-        this.shadow = true;
-        // prop: shadowAngle
-        // Shadow angle in degrees
-        this.shadowAngle = 45;
-        // prop: shadowOffset
-        // Shadow offset from line in pixels
-        this.shadowOffset = 1;
-        // prop: shadowDepth
-        // Number of times shadow is stroked, each stroke offset shadowOffset from the last.
-        this.shadowDepth = 3;
-        // prop: shadowAlpha
-        // Alpha channel transparency of shadow.  0 = transparent.
-        this.shadowAlpha = '0.07';
-        // prop: breakOnNull
-        // wether line segments should be be broken at null value.
-        // False will join point on either side of line.
-        this.breakOnNull = false;
-        // prop: marks
-        // 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();
-        // // prop: mode
-        // // 'scatter' or 'category'
-        // // 'scatter' gives an X-Y scatter line plot, 'category' gives equally spaced data line plot.
-        // this.mode = 'scatter'
-        // prop: showLine
-        // wether to actually draw the line or not.  Series will still be renderered, even if no line is drawn.
-        this.showLine = true;
+        this._ctx;
     };
     
     $.jqplot.lineRenderer.prototype.init = function(options) {
         ctx.restore();
     };
     
-    $.jqplot.lineRenderer.prototype.processData = function() { 
-        // don't have axes conversion functions yet, all we can do is look for bad
-        // points and set the axes bounds.  
-        var d = this.data;
-        var i;
-        var xaxis = this._xaxis;
-        var yaxis = this._yaxis;
-        var dbx = xaxis._dataBounds;
-        var dby = yaxis._dataBounds;
-
-        // weed out any null points and set the axes bounds
-        for (i=0; i<d.length; i++) {
-            if (d[i] == null || d[i][0] == null || d[i][1] == null) {
-                // if line breaking on null values is set, keep the null in the data
-                // if (this.renderer.breakOnNull && this.renderer.mode == 'scatter') d[i] = null;
-                // else delete the null to skip the point.
-                // else d.splice(i,1);
-                // For the time being, just delete null values
-                d.splice(i,1);
-                continue;
-            }
-            // Set the initial axes databounds.  May be overriden later by axis padding or by
-            // specific types of axes which call for different bounds.
-            else {                
-                if (d[i][0] < dbx.min || dbx.min == null) dbx.min = d[i][0];
-                if (d[i][0] > dbx.max || dbx.max == null) dbx.max = d[i][0];
-                if (d[i][1] < dby.min || dby.min == null) dby.min = d[i][1];
-                if (d[i][1] > dby.max || dby.max == null) dby.max = d[i][1];
-            }
-        }
-        
-        // Maybe don't do any of this.  Handle category intelligence within Axis.
-        // 
-        // // if the xaxis is a category axis, modify the databounds and ticks.
-        // if (xaxis.renderer.prototype == $.jqplot.categoryAxisRenderer) {
-        //     // A category line (or just line) plot.
-        //     // Populate the axis values if none were given.
-        //     // Each axis values will start at 1 and increment by 2 so
-        //     // that we can have nice "bins" for data and ticks.
-        //     // set the databaounds to 1 less and greater than number of bins.
-        //     dbx.min = 0;
-        //     dbx.max = d.length*2;
-        //     var ticks = xaxis._ticks;
-        //     if (!ticks.length) {
-        //         ticks = [];
-        //         for (i=0; i<d.length; i++) {
-        //             var t = new $.jqplot.AxisTick();
-        //             // set the tick value to it's position on the axis
-        //             // and set its label to the x value of the line.
-        //             ticks.push(t.init(2*i+1, d[i][0].toString(), xaxis.name));
-        //             // now reassign the x value to the right bin.
-        //             d[i][0] = 2*i+1;
-        //         }
-        //     }
-        // }
-        // 
-        // // Don't know if this makes sense, but allow it anyway.
-        // // if the yaxis is a category axis, modify the databounds and ticks.
-        // if (yaxis.renderer.prototype == $.jqplot.categoryAxisRenderer) {
-        //     // A category line (or just line) plot.
-        //     // Populate the axis values if none were given.
-        //     // Each axis values will start at 1 and increment by 2 so
-        //     // that we can have nice "bins" for data and ticks.
-        //     // set the databaounds to 1 less and greater than number of bins.
-        //     dby.min = 0;
-        //     dby.max = d.length*2;
-        //     var ticks = yaxis._ticks;
-        //     if (!ticks.length) {
-        //         ticks = [];
-        //         for (i=0; i<d.length; i++) {
-        //             var t = new $.jqplot.AxisTick();
-        //             // set the tick value to it's position on the axis
-        //             // and set its label to the y value of the line.
-        //             ticks.push(t.init(2*i+1, d[i][1].toString(), xaxis.name));
-        //             // now reassign the y value to the right bin.
-        //             d[i][1] = 2*i+1;
-        //         }
-        //     }
-        // }
-    };
+    ///////////////////////////
+    //////////////////////////
+    // Don't need this anymore.
+    // $.jqplot.lineRenderer.prototype.processData = function() { 
+    //     // don't have axes conversion functions yet, all we can do is look for bad
+    //     // points and set the axes bounds.  
+    //     var d = this.data;
+    //     var i;
+    //     var xaxis = this._xaxis;
+    //     var yaxis = this._yaxis;
+    //     var dbx = xaxis._dataBounds;
+    //     var dby = yaxis._dataBounds;
+    // 
+    //     // weed out any null points and set the axes bounds
+    //     for (i=0; i<d.length; i++) {
+    //         if (d[i] == null || d[i][0] == null || d[i][1] == null) {
+    //             // if line breaking on null values is set, keep the null in the data
+    //             // if (this.renderer.breakOnNull && this.renderer.mode == 'scatter') d[i] = null;
+    //             // else delete the null to skip the point.
+    //             // else d.splice(i,1);
+    //             // For the time being, just delete null values
+    //             d.splice(i,1);
+    //             continue;
+    //         }
+    //         // Set the initial axes databounds.  May be overriden later by axis padding or by
+    //         // specific types of axes which call for different bounds.
+    //         else {                
+    //             if (d[i][0] < dbx.min || dbx.min == null) dbx.min = d[i][0];
+    //             if (d[i][0] > dbx.max || dbx.max == null) dbx.max = d[i][0];
+    //             if (d[i][1] < dby.min || dby.min == null) dby.min = d[i][1];
+    //             if (d[i][1] > dby.max || dby.max == null) dby.max = d[i][1];
+    //         }
+    //     }
+    //     
+    //     // Maybe don't do any of this.  Handle category intelligence within Axis.
+    //     // 
+    //     // // if the xaxis is a category axis, modify the databounds and ticks.
+    //     // if (xaxis.renderer.prototype == $.jqplot.categoryAxisRenderer) {
+    //     //     // A category line (or just line) plot.
+    //     //     // Populate the axis values if none were given.
+    //     //     // Each axis values will start at 1 and increment by 2 so
+    //     //     // that we can have nice "bins" for data and ticks.
+    //     //     // set the databaounds to 1 less and greater than number of bins.
+    //     //     dbx.min = 0;
+    //     //     dbx.max = d.length*2;
+    //     //     var ticks = xaxis._ticks;
+    //     //     if (!ticks.length) {
+    //     //         ticks = [];
+    //     //         for (i=0; i<d.length; i++) {
+    //     //             var t = new $.jqplot.AxisTick();
+    //     //             // set the tick value to it's position on the axis
+    //     //             // and set its label to the x value of the line.
+    //     //             ticks.push(t.init(2*i+1, d[i][0].toString(), xaxis.name));
+    //     //             // now reassign the x value to the right bin.
+    //     //             d[i][0] = 2*i+1;
+    //     //         }
+    //     //     }
+    //     // }
+    //     // 
+    //     // // Don't know if this makes sense, but allow it anyway.
+    //     // // if the yaxis is a category axis, modify the databounds and ticks.
+    //     // if (yaxis.renderer.prototype == $.jqplot.categoryAxisRenderer) {
+    //     //     // A category line (or just line) plot.
+    //     //     // Populate the axis values if none were given.
+    //     //     // Each axis values will start at 1 and increment by 2 so
+    //     //     // that we can have nice "bins" for data and ticks.
+    //     //     // set the databaounds to 1 less and greater than number of bins.
+    //     //     dby.min = 0;
+    //     //     dby.max = d.length*2;
+    //     //     var ticks = yaxis._ticks;
+    //     //     if (!ticks.length) {
+    //     //         ticks = [];
+    //     //         for (i=0; i<d.length; i++) {
+    //     //             var t = new $.jqplot.AxisTick();
+    //     //             // set the tick value to it's position on the axis
+    //     //             // and set its label to the y value of the line.
+    //     //             ticks.push(t.init(2*i+1, d[i][1].toString(), xaxis.name));
+    //     //             // now reassign the y value to the right bin.
+    //     //             d[i][1] = 2*i+1;
+    //     //         }
+    //     //     }
+    //     // }
+    // };
 })(jQuery);

File jquery.jqplot.js

 (function($) {
     var debug = 1;
     
-    /* 
-        Class: Axis
-        (Private) An individual axis object.  Cannot be instantiated directly, but created
-        by the Plot oject.  Axis properties can be set or overriden by the 
-        options passed in from the user.  As currently implemented, the axis and 
-        the lineAxisRenderer are tightly integrated.  Options are assigned to the
-        Axis object itself, and not the renderer.
+    // Class: $.jqplot
+    // (Public) jQuery extension called by user to create plot.
+    //
+    // Parameters:
+    // target - ID of target element to render the plot into.
+    // data - an array of data series.
+    // options - user defined options object.
+    $.jqplot = function(target, data, options) {
+        var _data, _options;
         
-        Parameters:
-            name - Axis name (identifier).  One of 'xaxis', 'yaxis', 'x2axis' or 'y2axis'.
-    */
-    function Axis(name, series) {
+        // check to see if only 2 arguments were specified, what is what.
+        if (options == null) {
+            if (data instanceof Array) {
+                _data = data;
+                _options = null;   
+            }
+            
+            else if (data.constructor == Object) {
+                _data = null;
+                _options = data;
+            }
+        }
+        else {
+            _data = data;
+            _options = options;
+        }
+        var plot = new jqPlot();
+        plot.init(target, _data, _options);
+        plot.draw();
+        return plot;
+    };
+    
+    $.jqplot.ElemContainer = function() {
+        this._elem;
+        this._plotWidth;
+        this._plotHeight;
+        this._plotDimensions = {height:null, width:null};
+    };
+            
+    $.jqplot.ElemContainer.prototype.getWidth = function() {
+        return this._elem.outerWidth(true);
+    };
+    
+    $.jqplot.ElemContainer.prototype.getHeight = function() {
+        return this._elem.outerHeight(true);
+    };
+    
+    $.jqplot.ElemContainer.prototype.getPosition = function() {
+        return this._elem.position();
+    };
+    
+    $.jqplot.ElemContainer.prototype.getTop = function() {
+        return this.getPosition().top;
+    };
+    
+    $.jqplot.ElemContainer.prototype.getLeft = function() {
+        return this.getPosition().left;
+    };
+    
+    $.jqplot.ElemContainer.prototype.getBottom = function() {
+        return this._elem.css('bottom');
+    };
+    
+    $.jqplot.ElemContainer.prototype.getRight = function() {
+        return this._elem.css('right');
+    };
+    
+
+    // Class: Axis
+    // (Private) An individual axis object.  Cannot be instantiated directly, but created
+    // by the Plot oject.  Axis properties can be set or overriden by the 
+    // options passed in from the user.  As currently implemented, the axis and 
+    // the lineAxisRenderer are tightly integrated.  Options are assigned to the
+    // Axis object itself, and not the renderer.
+    // 
+    // Parameters:
+    //     name - Axis name (identifier).  One of 'xaxis', 'yaxis', 'x2axis' or 'y2axis'.
+    function Axis(name) {
+        $.jqplot.ElemContainer.call(this);
         // Group: Properties
         
         // prop: name
         // Axis name (identifier).  One of 'xaxis', 'yaxis', 'x2axis' or 'y2axis'.
         this.name = name;
-        this.series = [];
+        this._series = [];
         // prop: show
         // Wether to display the axis on the graph.
         this.show = false;
+        // prop; min
+        // minimum value of the axis (in data units, not pixels).
+        this.min=null;
+        // prop: max
+        // maximum value of the axis (in data units, not pixels).
+        this.max=null;
         // prop: pad
         // Padding to extend the range above and below the data bounds.
         // Factor to multiply by the data range when setting the axis bounds
         // Instance of a rendering engine that draws the axis on the plot.
         this.renderer = new $.jqplot.linearAxisRenderer();
         this.rendererOptions = {};
-        /*  
-            prop: label
-            Axis label object.  Container for axis label properties. Not implimeted yet.
+
+        // prop: label
+        // Axis label object options.  Container for axis label properties. Not implimeted yet.
+        // 
+        // Properties:
+        // text - label text.
+        // fontFamily - css font-family spec.
+        // fontSize - css font-size spec. 
+        this.labelOptions = {text:null, fontFamily:null, fontSize:null};
         
-            Properties:
-          
-            text - label text.
-            fontFamily - css font-family spec.
-            fontSize - css font-size spec.  
-            align - css text-align spec.
-        */
-        this.label = {text:null, fontFamily:null, fontSize:null, align:null};
-        /*  
-            prop: ticks
-            Container for axis tick properties.
-        
-            Properties:
-          
-            mark - tick markings.  One of 'inside', 'outside', 'cross', '' or null.
-                The latter 2 options will hide the tick marks.
-            size - length of the tick marks in pixels.  For 'cross' style, length
-                will be stoked above and below axis, so total length will be twice this.
-            showLabels - Wether to show labels or not.
-            labels - Array of tick labels.
-            values - Array of underlying data values.
-            styles - Array of css styles to be applied.
-            formatString - formatting string passed to the tick formatter.
-            fontFamily - css font-family spec.
-            fontSize -css font-size spec.
-            textColor - css color spec.
-        */
-        this.ticks = {mark:'outside', markSize:4, size:4, showLabels:true, labels:[], values:[], styles:[], formatString:'%.1f', fontFamily:'', fontSize:'0.75em', textColor:''};
+        // prop: tickOptions
+        // Container for axis tick properties.
+        // 
+        // Properties:
+        // mark - tick markings.  One of 'inside', 'outside', 'cross', '' or null.
+        //     The latter 2 options will hide the tick marks.
+        // size - length of the tick marks in pixels.  For 'cross' style, length
+        //     will be stoked above and below axis, so total length will be twice this.
+        // showLabels - Wether to show labels or not.
+        // formatString - formatting string passed to the tick formatter.
+        // fontFamily - css font-family spec.
+        // fontSize -css font-size spec.
+        // textColor - css color spec.
+        this.tickOptions = {mark:'outside', markSize:4, size:4, showLabel:true, formatter:$.jqplot.sprintf, formatString:'%.1f', fontFamily:'', fontSize:'0.75em', textColor:''};
+        this.showTicks = true;
+        this.showTickMarks = true;
         this.showMinorTicks = true;
-        // prop: tickFormatter
-        // Function applied to format tick label text.
-        this.tickFormatter = sprintf;
-        // prop: _height
-        // height of the rendered axis in pixels.
-        this._height = 0;
-        // prop: _width
-        // width of the rendered axis in pixels.
-        this._width = 0;
-        // prop: _elem
-        // reference to the actual axis DOM element.
-        this._elem;
-        /*  
-            prop: _dataBounds
-            low/high values of all of the series bound to this axis.
-        
-            Properties:
-          
-            min - lowest value on this axis.
-            max - highest value on this axis.
-        */
+        // prop: _dataBounds
+        // low/high values of all of the series bound to this axis.
+        // 
+        // Properties:
+        // min - lowest value on this axis.
+        // max - highest value on this axis.
         this._dataBounds = {min:null, max:null};
-        // prop; min
-        // minimum value of the axis (in data units, not pixels).
-        this.min=null;
-        // prop: max
-        // maximum value of the axis (in data units, not pixels).
-        this.max=null;
-        // prop: style
-        // Don't know? Will have to check if this is used.
-        this.style;
-        // prop: _gridOffsets
-        // reference to the plot element grid offsets.
-        this._gridOffsets;
-        /*  
-            Property: _offsets
-            Pixel offsets from the edge of the DOM element in pixels.
-        
-            Properties:
-            min - pixel offset to the minimum value.
-            max - pixel offset to the maximum value.
-        */
+        // Property: _offsets
+        // Pixel offsets from the edge of the DOM element in pixels.
+        // 
+        // Properties:
+        // min - pixel offset to the minimum value tick.
+        // max - pixel offset to the maximum value tick.
         this._offsets = {min:null, max:null};
         // prop: _canvasWidth
-        // width of the grid canvas, total DOM element width.
-        this._canvasWidth;
+        // width of the plot canvas, total DOM element width.
+        this._plotWidth;
         // prop: _canvasHeight
-        // height of the grid canvas, total DOM element height.
-        this._canvasHeight;
+        // height of the plot canvas, total DOM element height.
+        this._plotHeight;
         this._ticks=[];
-        
-        // append a reference to the series using this axis.
-        this.series.push(series);
     };
     
-    /* 
-        Class: Legend
-        (Private) Legend object.  Cannot be instantiated directly, but created
-        by the Plot oject.  Legend properties can be set or overriden by the 
-        options passed in from the user.
-    */
+    Axis.prototype = new $.jqplot.ElemContainer();
+    Axis.prototype.constructor = Axis;
+    
+    Axis.prototype.init = function() {
+        var db = this._dataBounds;
+        // Go through all the series attached to this axis and find
+        // the min/max bounds for this axis.
+        for (var i=0; i<this._series.length; i++) {
+            var s = this._series[i];
+            var d = s.data;
+            
+            for (var j=0; j<d.length; j++) { 
+                if (this.name == 'xaxis' || this.name == 'x2axis') {
+                    if (d[j][0] < db.min || db.min == null) db.min = d[j][0];
+                    if (d[j][0] > db.max || db.max == null) db.max = d[j][0];
+                }              
+                else {
+                    if (d[j][1] < db.min || db.min == null) db.min = d[j][1];
+                    if (d[j][1] > db.max || db.max == null) db.max = d[j][1];
+                }              
+            }
+        }
+        
+        this.renderer.init(this.rendererOptions);
+    };
+    
+    Axis.prototype.draw = function() {
+        return this.renderer.draw.call(this);
+    };
+    
+    Axis.prototype.set = function() {
+        this.renderer.set.call(this);
+    };
+    
+    Axis.prototype.pack = function(pos, offsets) {
+        if (this.show) this.renderer.pack.call(this, pos, offsets);
+    };
+
+
+    // Class: Legend
+    // (Private) Legend object.  Cannot be instantiated directly, but created
+    // by the Plot oject.  Legend properties can be set or overriden by the 
+    // options passed in from the user.
     function Legend() {
+        $.jqplot.ElemContainer.call(this);
         // Group: Properties
         
         // prop: show
         // prop: yoffset
         // offset from the inside edge of the plot in the y direction in pixels.
         this.yoffset = 12;
-        // prop: border
-        // css spec for the border around the legend box.
-        this.border = '1px solid #cccccc';
-        // prop: background
-        // css spec for the background of the legend box.
-        this.background = 'rgba(255,255,255,0.6)';
-        // prop: textColor
-        // css color spec for the legend text.
-        this.textColor = '';
-        // prop: fontFamily
-        // css font-family spec for the legend text.
-        this.fontFamily = ''; 
-        // prop: fontSize
-        // css font-size spec for the legend text.
-        this.fontSize = '0.75em';
-        // prop: rowSpacing
-        // css padding-top spec for the rows in the legend.
-        this.rowSpacing = '0.5em';
+        ///////////////////////////////
+        ///////////////////////////////
+        // make these options on the renderer.
+        // // prop: border
+        // // css spec for the border around the legend box.
+        // this.border = '1px solid #cccccc';
+        // // prop: background
+        // // css spec for the background of the legend box.
+        // this.background = 'rgba(255,255,255,0.6)';
+        // // prop: textColor
+        // // css color spec for the legend text.
+        // this.textColor = '';
+        // // prop: fontFamily
+        // // css font-family spec for the legend text.
+        // this.fontFamily = ''; 
+        // // prop: fontSize
+        // // css font-size spec for the legend text.
+        // this.fontSize = '0.75em';
+        // // prop: rowSpacing
+        // // css padding-top spec for the rows in the legend.
+        // this.rowSpacing = '0.5em';
         // prop: _elem
         // reference to the legend DOM element.
-        this._elem;
+        this.renderer = new $.jqplot.tableLegendRenderer();
+        this.rendererOptions = {};
         
-    }
+    };
     
-    /* 
-        Class: Title
-        (Private) Plot Title object.  Cannot be instantiated directly, but created
-        by the Plot oject.  Title properties can be set or overriden by the 
-        options passed in from the user.
-        
-        Parameters:
-            text - text of the title.
-    */
+    Legend.prototype = new $.jqplot.ElemContainer();
+    Legend.prototype.constructor = Legend;
+    
+
+    // Class: Title
+    // (Private) Plot Title object.  Cannot be instantiated directly, but created
+    // by the Plot oject.  Title properties can be set or overriden by the 
+    // options passed in from the user.
+    // 
+    // Parameters:
+    //     text - text of the title.
     function Title(text) {
+        $.jqplot.ElemContainer.call(this);
         // Group: Properties
         
         // prop: text
         // text of the title;
         this.text = text;
+        this.show = true;
         // prop: fontFamily
         // css font-family spec for the text.
         this.fontFamily = '';
         // prop: textAlign
         // css text-align spec for the text.
         this.textAlign = 'center';
-        // prop: _elem
-        // reference to the title DOM element.
-        this._elem;
-        // prop: _height
-        // height of the DOM element in pixels.
-        this._height = 0;
-        // prop: _width
-        // width of the DOM element in pixels.
-        this._width = 0;
         // prop: textColor
         // css color spec for the text.
         this.textColor = '';
-        
+        this.renderer = new $.jqplot.divTitleRenderer();
+        this.rendererOptions = {};   
+    };
+    
+    Title.prototype = new $.jqplot.ElemContainer();
+    Title.prototype.constructor = Title;
+    
+    Title.prototype.init = function() {
+        this.renderer.init(this.rendererOptions);
     }
     
+    Title.prototype.draw = function(width) {
+        return this.renderer.draw.call(this, width);
+    };
+    
+    Title.prototype.pack = function() {
+        this.renderer.pack.call(this);
+    };
+    
     /* 
         Class: Series
         (Private) An individual data series object.  Cannot be instantiated directly, but created
         options passed in from the user.
     */
     function Series() {
+        $.jqplot.ElemContainer.call(this);
         // Group: Properties
         
         // prop: show
         this.xaxis = 'xaxis';
         // prop: _xaxis
         // reference to the underlying x axis object associated with this series.
-        this._xaxis = new Axis(this.xaxis, this);
+        this._xaxis;
         // prop: yaxis
         // name of y axis to associate with this series.
         this.yaxis = 'yaxis';
         // prop: _yaxis
         // reference to the underlying y axis object associated with this series.
-        this._yaxis = new Axis(this.yaxis, this);
+        this._yaxis;
         // prop: renderer
         // Instance of a renderer which will draw the series.
         this.renderer = new $.jqplot.lineRenderer();
         // prop: label
         // Line label to use in legend.
         this.label = '';
+        // prop: color
+        // css color spec for the series
+        this.color = '#666666';
+        // prop: lineWidth
+        // width of the line in pixels.  May have different meanings depending on renderer.
+        this.lineWidth = 2.5;
+        // prop: shadow
+        // wether or not to draw a shadow on the line
+        this.shadow = true;
+        // prop: shadowAngle
+        // Shadow angle in degrees
+        this.shadowAngle = 45;
+        // prop: shadowOffset
+        // Shadow offset from line in pixels
+        this.shadowOffset = 1;
+        // prop: shadowDepth
+        // Number of times shadow is stroked, each stroke offset shadowOffset from the last.
+        this.shadowDepth = 3;
+        // prop: shadowAlpha
+        // Alpha channel transparency of shadow.  0 = transparent.
+        this.shadowAlpha = '0.07';
+        // prop: breakOnNull
+        // wether line segments should be be broken at null value.
+        // False will join point on either side of line.
+        this.breakOnNull = false;
+        // prop: marks
+        // 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();
+        // // prop: mode
+        // // 'scatter' or 'category'
+        // // 'scatter' gives an X-Y scatter line plot, 'category' gives equally spaced data line plot.
+        // this.mode = 'scatter'
+        // prop: showLine
+        // wether to actually draw the line or not.  Series will still be renderered, even if no line is drawn.
+        this.showLine = true;
     };
     
+    Series.prototype = new $.jqplot.ElemContainer();
+    Series.prototype.constructor = Series;
+    
+    Series.prototype.init = function() {
+        // weed out any null values in the data.
+        var d = this.data;
+        for (i=0; i<d.length; i++) {
+            if (d[i] == null || d[i][0] == null || d[i][1] == null) {
+                // For the time being, just delete null values
+                // could keep them if wanted to break lines on null.
+                d.splice(i,1);
+                continue;
+            }
+        }
+        this.renderer.init(this.rendererOptions);
+    }
+    
     /* 
         Class: Grid
         (Private) Object representing the grid on which the plot is drawn.  The grid in this
         Grid properties can be set or overriden by the options passed in from the user.
     */
     function Grid() {
+        $.jqplot.ElemContainer.call(this);
         // Group: Properties
         
         // prop: drawGridlines
         // prop: shadowAlpha
         // Alpha channel transparency of shadow.  0 = transparent.
         this.shadowAlpha = '0.07';
-        // prop: _width
-        // width of the grid area bounded by the border.
+        this._left;
+        this._top;
+        this._right;
+        this._bottom;
         this._width;
-        // prop: _height
-        // height of the grid area bounded by the border.
         this._height;
-        // prop: _top
-        // position of the top of the grid measures from the top left of the DOM container.
-        this._top;
-        // prop: _bottom
-        // position of the bottom of the grid measures from the top left of the DOM container.
-        this._bottom;
-        // prop: _left
-        // position of the left of the grid measures from the top left of the DOM container.
-        this._left;
-        // prop: _right
-        // position of the right of the grid measures from the top left of the DOM container.
-        this._right;
+
+        // prop: _axes
+        // reference to the plot axes
+        this._axes = [];
         // prop: renderer
         // Instance of a renderer which will actually render the grid.
         this.renderer = new $.jqplot.canvasGridRenderer();
-        
+        this.rendererOptions = {};
+        this._offsets = {top:null, bottom:null, left:null, right:null};
     };
+    
+    Grid.prototype = new $.jqplot.ElemContainer();
+    Grid.prototype.constructor = Grid;
+    
+    Grid.prototype.init = function() {
+        this.renderer.init.call(this, this.rendererOptions);
+    }
+    
+    Grid.prototype.createElement = function(offsets) {
+        this._offsets = offsets;
+        return this.renderer.createElement.call(this);
+    }
+    
+    Grid.prototype.draw = function() {
+        this.renderer.draw.call(this);
+    }
+    
+    function SeriesCanvas() {
+        $.jqplot.ElemContainer.call(this);
+    };
+    
+    SeriesCanvas.prototype = new $.jqplot.ElemContainer();
+    SeriesCanvas.prototype.constructor = SeriesCanvas;
 
     
     /* 
         this.axes = {xaxis: new Axis('xaxis'), yaxis: new Axis('yaxis'), x2axis: new Axis('x2axis'), y2axis: new Axis('y2axis')};
         this.grid = new Grid();
         this.legend = new Legend();
-        // this.title = {text:null, font:null};
-        // handle to the grid canvas drawing context.  Holds the axes, grid, and labels.
-        // Stuff that should be rendered only at initial plot drawing.
-        this.gctx = null;
-        // handle to the series  canvas drawing context.  Holds the rendered
-        // rendered series which may be manipulated through user interaction.
-        this.sctx = null;
+        this.seriesView = new $.jqplot.canvasSeriesView();
+        this.overlayView = new $.jqplot.canvasOverlayView();
+        // Can get these through the representative ojects.
+        // // handle to the grid canvas drawing context.  Holds the axes, grid, and labels.
+        // // Stuff that should be rendered only at initial plot drawing.
+        // this._gctx = null;
+        // // handle to the series  canvas drawing context.  Holds the rendered
+        // // rendered series which may be manipulated through user interaction.
+        // this._sctx = null;
         // handle to the overlay canvas drawing object.  Holds interactive content
         // like highlights that are rendered according to user interaction
-        this.octx = null;
+        this._octx = null;
         // width and height of the canvas
         this._width = null;
         this._height = null; 
+        this._plotDimensions = {height:null, width:null};
+        // default padding for the grid context
         this._gridOffsets = {top:10, right:10, bottom:10, left:10};
+        // for dual axes, wether to space ticks the same on both sides.
         this.equalXTicks = true;
         this.equalYTicks = true;
         // borrowed colors from Flot.
         // Initializes the jqPlot object, parsing the user options and processing the data.
         //
         // Parameter:
-        // target - ID of the DOM element the plot will render into.
-        // data - data series.
-        // options - user specified options object.    
+        //  target - ID of the DOM element the plot will render into.
+        //  data - data series.
+        //  options - user specified options object.    
         this.init = function(target, data, options) {
             this.targetId = target;
             this.target = $('#'+target);
-            // make sure the target is positioned by some means
             if (!this.target) throw "No plot target specified";
+            
+            // make sure the target is positioned by some means and set css
             if (this.target.css('position') == 'static') this.target.css('position', 'relative');
             this.target.css('color', this.textColor);
             this.target.css('font-family', this.fontFamily);
             this.target.css('font-size', this.fontSize);
+            
             this._height = parseFloat(this.target.css('height'));
             this._width = parseFloat(this.target.css('width'));
+            this._plotDimensions.height = this._height;
+            this._plotDimensions.width = this._width;
+            this.grid._plotDimensions = this._plotDimensions;
+            this.title._plotDimensions = this._plotDimensions;
             if (this._height <=0 || this._width <=0) throw "Canvas dimensions <=0";
+            
             // get a handle to the plot object from the target to help with events.
             $(target).data('jqplot', this);
+            
             this.data = data;
-            // if (data.length < 1 || data[0].length < 2) throw "Invalid Plot data";
+            
             this.parseOptions(options);
             
-            // set the dataBounds (min and max) for each axis
+            this.initializeSeries();
+            
+            this.initializeAxes();
+            
+            this.grid.init();
+            this.grid._axes = this.axes;
+        }
+        
+        this.initializeSeries = function() {
             for (var i=0; i<this.series.length; i++) {
-                if (this.series[i].show) this.series[i].renderer.processData.call(this.series[i]);
-                //this.series[i].renderer.processData.call(this.series[i]);
+                this.series[i]._plotDimensions = this._plotDimensions;
+               this.series[i].init();
             }
-        }
+        };
+        
+        this.initializeAxes = function() {
+            for (var name in this.axes) {
+                this.axes[name]._plotDimensions = this._plotDimensions;
+                this.axes[name].init();
+            }
+        };
+        
         
         this.getNextSeriesColor = function() {
             var c = this.seriesColors[this._seriesColorsIndex];
             for (var n in this.axes) {
                 var axis = this.axes[n];
                 $.extend(true, axis, this.options.axesDefaults, this.options.axes[n]);
-                switch (n) {
-                    case 'xaxis':
-                        //axis.style = {position:'absolute', left:'0px', bottom:'0px'};
-                        axis._width = this._width;
-                        axis.gridOffset = 'bottom';
-                        break;
-                    case 'x2axis':
-                        //axis.style = {position:'absolute', left:'0px', top:'0px'};
-                        axis._width = this._width;
-                        axis.gridOffset = 'top';
-                        break;
-                    case 'yaxis':
-                        //axis.style = {position:'absolute', left:'0px', top:'0px'};
-                        axis._height = this._height;
-                        axis.gridOffset = 'left';
-                        break;
-                    case 'y2axis':
-                        //axis.style = {position:'absolute', right:'0px', top:'0px'};
-                        axis._height = this._height;
-                        axis.gridOffset = 'right';
-                        break;
-                    default:
-                        break;
-                }
-                axis.renderer.init(axis.rendererOptions);
+                axis._plotWidth = this._width;
+                axis._plotHeight = this._height;
             }
             if (this.data.length == 0) {
                 this.data = [];
                     default:
                         break;
                 }
+                temp._xaxis._series.push(temp);
+                temp._yaxis._series.push(temp);
                 if (temp.show) {
                     temp._xaxis.show = true;
                     temp._yaxis.show = true;
                     temp.rendererOptions.color = this.getNextSeriesColor();
                 }
                 // temp.rendererOptions.show = temp.show;
-                temp.renderer.init(temp.rendererOptions);
                 // $.extend(true, temp.renderer, {color:this.seriesColors[i]}, this.rendererOptions);
                 this.series.push(temp);  
             }
             $.extend(true, this.grid, this.options.grid);
             if (typeof this.options.title == 'string') this.title.text = this.options.title;
             else if (typeof this.options.title == 'object') $.extend(true, this.title, this.options.title);
+            this.title._plotWidth = this._width;
             $.extend(true, this.legend, this.options.legend);
             
             for (var i=0; i<$.jqplot.postParseOptionsHooks.length; i++) {
         };
     
         // Function: draw
-        // Calls functions needed to draw the plot.
+        // Calls functions needed to draw the plot.  Draws the objects, but doesn't do 
+        // the final positioning on the Plot.  That is done by pack.
         this.draw = function(){