#2431 jqplot update

git-svn-id: http://dev.piwik.org/svn/trunk@4898 59fd770c-687e-43c8-a1e3-f5a4ff64c105

6 files changed, 302 insertions, 178 deletions

diff --git a/libs/jqplot/jqplot.axisTickRenderer.js b/libs/jqplot/jqplot.axisTickRenderer.js
index 70bbe749ce..b198112719 100644
--- a/libs/jqplot/jqplot.axisTickRenderer.js
+++ b/libs/jqplot/jqplot.axisTickRenderer.js
@@ -122,15 +122,11 @@
             this._elem = null;
         }
 
-
-        var elem = document.createElement('div');
-        this._elem = $(elem);
+        this._elem = $(document.createElement('div'));
         this._elem.addClass("jqplot-"+this.axis+"-tick");
         this._elem.text(this.label);
         this._elem.css(style);
 
-
-        // elem = $('<div '+style+' class="jqplot-'+this.axis+'-tick">'+this.label+'</div>');
         for (var s in this._styles) {
             this._elem.css(s, this._styles[s]);
         }
@@ -147,8 +143,6 @@
 			this._elem.addClass('jqplot-breakTick');
 		}
         
-        elem = null;
-        
         return this._elem;
     };
         
diff --git a/libs/jqplot/jqplot.core.js b/libs/jqplot/jqplot.core.js
index 8978db5fb9..98cc66b24c 100755
--- a/libs/jqplot/jqplot.core.js
+++ b/libs/jqplot/jqplot.core.js
@@ -115,30 +115,30 @@
       }
     };
     
-    // Memory Leaks patch : garbage collector
-    $.gcInit = function() {
-      var gc = $("<div id='gc_jqPlotSalsaGarbage' style='display:none;visibility:hidden;'></div>");
-      $("body").append(gc);
-      $._gc = gc;
-    };
+    // // Memory Leaks patch : garbage collector
+    // $.gcInit = function() {
+    //   var gc = $("<div id='gc_jqPlotSalsaGarbage' style='display:none;visibility:hidden;'></div>");
+    //   $("body").append(gc);
+    //   $._gc = gc;
+    // };
 
-    $.gcCollect = function(elem) {
-      $._gc.append(elem);
-    };
-    
-    $.gcClear = function() {
-      if ($.browser.msie) {
-        $._gc.children().each(function() {
-          this.outerHTML = "";
-        });
-      }
+    // $.gcCollect = function(elem) {
+    //   $._gc.append(elem);
+    // };
+    
+    // $.gcClear = function() {
+    //   if ($.browser.msie) {
+    //     $._gc.children().each(function() {
+    //       this.outerHTML = "";
+    //     });
+    //   }
       
-      $._gc.empty();
-    };
+    //   $._gc.empty();
+    // };
     
-    $(document).ready(function() {
-      $.gcInit();
-    });
+    // $(document).ready(function() {
+    //   $.gcInit();
+    // });
 
     /**
      * Class: $.jqplot
@@ -217,75 +217,82 @@
     // Should help solve problem of canvases not being freed and
     // problem of waiting forever for firefox to decide to free memory.
     $.jqplot.CanvasManager = function() {
-		// canvases are managed globally so that they can be reused
-		// across plots after they have been freed
-		if (typeof $.jqplot.CanvasManager.canvases == 'undefined') {
-			$.jqplot.CanvasManager.canvases = [];
-			$.jqplot.CanvasManager.free = [];
-		}
-		
-		var myCanvases = [];
+        // canvases are managed globally so that they can be reused
+        // across plots after they have been freed
+        if (typeof $.jqplot.CanvasManager.canvases == 'undefined') {
+            $.jqplot.CanvasManager.canvases = [];
+            $.jqplot.CanvasManager.free = [];
+        }
+        
+        var myCanvases = [];
         
         this.getCanvas = function() {
-			var canvas;
+            var canvas;
             var makeNew = true;
-			
-			if (!$.jqplot.use_excanvas) {
-				for (var i = 0, l = $.jqplot.CanvasManager.canvases.length; i < l; i++) {
-					if ($.jqplot.CanvasManager.free[i] === true) {
-						makeNew = false;
-						canvas = $.jqplot.CanvasManager.canvases[i];
-						$.jqplot.CanvasManager.free[i] = false;
-						myCanvases.push(i);
-						break;
-					}
-				}
-			}
+            
+            if (!$.jqplot.use_excanvas) {
+                for (var i = 0, l = $.jqplot.CanvasManager.canvases.length; i < l; i++) {
+                    if ($.jqplot.CanvasManager.free[i] === true) {
+                        makeNew = false;
+                        canvas = $.jqplot.CanvasManager.canvases[i];
+                        // $(canvas).removeClass('jqplot-canvasManager-free').addClass('jqplot-canvasManager-inuse');
+                        $.jqplot.CanvasManager.free[i] = false;
+                        myCanvases.push(i);
+                        break;
+                    }
+                }
+            }
 
             if (makeNew) {
                 canvas = document.createElement('canvas');
-				myCanvases.push($.jqplot.CanvasManager.canvases.length);
-				$.jqplot.CanvasManager.canvases.push(canvas);
+                myCanvases.push($.jqplot.CanvasManager.canvases.length);
+                $.jqplot.CanvasManager.canvases.push(canvas);
                 $.jqplot.CanvasManager.free.push(false);
             }   
             
             return canvas;
         };
-		
-		// this method has to be used after settings the dimesions
-		// on the element returned by getCanvas()
-		this.initCanvas = function(canvas) {
-			if ($.jqplot.use_excanvas) {
-				return window.G_vmlCanvasManager.initElement(canvas);
-			}
-			return canvas;
-		}
+        
+        // this method has to be used after settings the dimesions
+        // on the element returned by getCanvas()
+        this.initCanvas = function(canvas) {
+            if ($.jqplot.use_excanvas) {
+                return window.G_vmlCanvasManager.initElement(canvas);
+            }
+            return canvas;
+        };
 
         this.freeAllCanvases = function() {
-			for (var i = 0; i < myCanvases.length; i++) {
-				this.freeCanvas(myCanvases[i]);
+            for (var i = 0, l=myCanvases.length; i < l; i++) {
+                this.freeCanvas(myCanvases[i]);
             }
-			myCanvases = [];
+            myCanvases = [];
         };
 
         this.freeCanvas = function(idx) {
-			if ($.jqplot.use_excanvas) {
-				// excanvas can't be reused, but properly unset
-				window.G_vmlCanvasManager.uninitElement($.jqplot.CanvasManager.canvases[idx]);
-				$.jqplot.CanvasManager.canvases[idx] = null;
-			} else {
-				var canvas = $.jqplot.CanvasManager.canvases[idx];
-				canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
-				$(canvas).unbind().removeAttr('class').removeAttr('style')
-						.removeAttr('width').removeAttr('height');
-				$.jqplot.CanvasManager.free[idx] = true;
-			}
+            if ($.jqplot.use_excanvas) {
+                // excanvas can't be reused, but properly unset
+                window.G_vmlCanvasManager.uninitElement($.jqplot.CanvasManager.canvases[idx]);
+                $.jqplot.CanvasManager.canvases[idx] = null;
+            } 
+            else {
+                var canvas = $.jqplot.CanvasManager.canvases[idx];
+                canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+                $(canvas).unbind().removeAttr('class').removeAttr('style');
+                // Style attributes seemed to be still hanging around.  wierd.  Some ticks
+                // still retained a left: 0px attribute after reusing a canvas.
+                $(canvas).css({left: '', top: '', position: ''});
+                // setting size to 0 may save memory of unused canvases?
+                canvas.width = 0;
+                canvas.height = 0;
+                $.jqplot.CanvasManager.free[idx] = true;
+            }
         };
-		
+        
     };
 
             
-    // Convienence function that won't hang IE of FF without FireBug.
+    // Convienence function that won't hang IE or FF without FireBug.
     $.jqplot.log = function() {
         if (window.console) {
             console.log.apply(console, arguments);
@@ -327,16 +334,16 @@
     // http://www.modernizr.com
     
     $.jqplot.support_canvas = function() {
-		if (typeof $.jqplot.support_canvas.result == 'undefined') {
-			$.jqplot.support_canvas.result = !!document.createElement('canvas').getContext; 
-		}
+        if (typeof $.jqplot.support_canvas.result == 'undefined') {
+            $.jqplot.support_canvas.result = !!document.createElement('canvas').getContext; 
+        }
         return $.jqplot.support_canvas.result;
     };
             
     $.jqplot.support_canvas_text = function() {
-		if (typeof $.jqplot.support_canvas_text.result == 'undefined') {
-			$.jqplot.support_canvas_text.result = !!(document.createElement('canvas').getContext && typeof document.createElement('canvas').getContext('2d').fillText == 'function'); 
-		}
+        if (typeof $.jqplot.support_canvas_text.result == 'undefined') {
+            $.jqplot.support_canvas_text.result = !!(document.createElement('canvas').getContext && typeof document.createElement('canvas').getContext('2d').fillText == 'function'); 
+        }
         return $.jqplot.support_canvas_text.result;
     };
     
@@ -1514,7 +1521,7 @@
         // }
 
         elem = plot.canvasManager.getCanvas();
-		
+        
         // if new plotDimensions supplied, use them.
         if (plotDimensions != null) {
             this._plotDimensions = plotDimensions;
@@ -1527,8 +1534,8 @@
         
         this._elem.addClass(klass);
         
-		elem = plot.canvasManager.initCanvas(elem);
-		
+        elem = plot.canvasManager.initCanvas(elem);
+        
         elem = null;
         return this._elem;
     };
@@ -2399,13 +2406,13 @@
                 this.postParseOptionsHooks.hooks[i].call(this, options);
             }
         };
-		
-		// method: destroy
-		// Releases all resources occupied by the plot
-		this.destroy = function() {
-			this.canvasManager.freeAllCanvases();
-			this.target[0].innerHTML = '';
-		};
+        
+        // method: destroy
+        // Releases all resources occupied by the plot
+        this.destroy = function() {
+            this.canvasManager.freeAllCanvases();
+            this.target[0].innerHTML = '';
+        };
         
         // method: replot
         // Does a reinitialization of the plot followed by
@@ -2428,21 +2435,21 @@
             if (clear) {
                 this.canvasManager.freeAllCanvases();
                 // Memory Leaks patch
-                this.target.find("table.jqplot-table-legend,table.jqplot-legend").each( function() {
-                    $(this).unbind();
+                // this.target.find("table.jqplot-table-legend,table.jqplot-legend").each( function() {
+                //     $(this).unbind();
 
-                    $(this).find(".jqplot-seriesToggle").each( function() {
-                        $(this).unbind();
-                    });
-                    $.gcCollect(this);
-                });
+                //     $(this).find(".jqplot-seriesToggle").each( function() {
+                //         $(this).unbind();
+                //     });
+                //     $.gcCollect(this);
+                // });
                 
-                this.target.find(".jqplot-title").each( function() {
-                    $(this).unbind();
-                    $.gcCollect(this);
-                });
+                // this.target.find(".jqplot-title").each( function() {
+                //     $(this).unbind();
+                //     $.gcCollect(this);
+                // });
                 
-                $.gcClear();
+                // $.gcClear();
 
                 this.eventCanvas._elem.unbind();
                 this.target.unbind();
diff --git a/libs/jqplot/jqplot.linearAxisRenderer.js b/libs/jqplot/jqplot.linearAxisRenderer.js
index c050e17722..525103ba47 100644
--- a/libs/jqplot/jqplot.linearAxisRenderer.js
+++ b/libs/jqplot/jqplot.linearAxisRenderer.js
@@ -100,11 +100,9 @@
                 this._elem = null;
             }
             
-            var elem = document.createElement('div');
-            this._elem = $(elem);
+            this._elem = $(document.createElement('div'));
             this._elem.addClass('jqplot-axis jqplot-'+this.name);
             this._elem.css('posiiton', 'absolute');
-            elem = null;
 
             
             if (this.name == 'xaxis' || this.name == 'x2axis') {
@@ -118,8 +116,9 @@
             this.labelOptions.axis = this.name;
             this._label = new this.labelRenderer(this.labelOptions);
             if (this._label.show) {
-                elem = this._label.draw(ctx, plot);
+                var elem = this._label.draw(ctx, plot);
                 elem.appendTo(this._elem);
+                elem = null;
             }
     
             var t = this._ticks;
@@ -132,7 +131,6 @@
             }
             tick = null;
             t = null;
-            elem = null;
         }
         return this._elem;
     };
diff --git a/libs/jqplot/jqplot.tableLegendRenderer.js b/libs/jqplot/jqplot.tableLegendRenderer.js
index 946ab57a61..3dd8991c8c 100644
--- a/libs/jqplot/jqplot.tableLegendRenderer.js
+++ b/libs/jqplot/jqplot.tableLegendRenderer.js
@@ -39,30 +39,59 @@
     };
         
     $.jqplot.TableLegendRenderer.prototype.addrow = function (label, color, pad, reverse) {
-        var rs = (pad) ? this.rowSpacing : '0';
-        var tr,
-        	elem;
+        var rs = (pad) ? this.rowSpacing+'px' : '0px';
+        var tr;
+        var td;
+        var elem;
+        var div0;
+        var div1;
+        elem = document.createElement('tr');
+        tr = $(elem);
+        tr.addClass('jqplot-table-legend');
+        elem = null;
+
         if (reverse){
-            tr = $('<tr class="jqplot-table-legend"></tr>').prependTo(this._elem);
+            tr.prependTo(this._elem);
         }
+
         else{
-            tr = $('<tr class="jqplot-table-legend"></tr>').appendTo(this._elem);
+            tr.appendTo(this._elem);
         }
+
         if (this.showSwatches) {
-            $('<td class="jqplot-table-legend" style="text-align:center;padding-top:'+rs+';">'+
-            '<div><div class="jqplot-table-legend-swatch" style="background-color:'+color+';border-color:'+color+';"></div>'+
-            '</div></td>').appendTo(tr);
+            td = $(document.createElement('td'));
+            td.addClass('jqplot-table-legend');
+            td.css({textAlign: 'center', paddingTop: rs});
+
+            div0 = $(document.createElement('div'));
+            div1 = $(document.createElement('div'));
+            div1.addClass('jqplot-table-legend-swatch');
+            div1.css({backgroundColor: color, borderColor: color});
+
+            tr.append(td.append(div0.append(div1)));
+
+            // $('<td class="jqplot-table-legend" style="text-align:center;padding-top:'+rs+';">'+
+            // '<div><div class="jqplot-table-legend-swatch" style="background-color:'+color+';border-color:'+color+';"></div>'+
+            // '</div></td>').appendTo(tr);
         }
         if (this.showLabels) {
-            elem = $('<td class="jqplot-table-legend" style="padding-top:'+rs+';"></td>');
-            elem.appendTo(tr);
+            td = $(document.createElement('td'));
+            td.addClass('jqplot-table-legend');
+            td.css('paddingTop', rs);
+            tr.append(td);
+
+            // elem = $('<td class="jqplot-table-legend" style="padding-top:'+rs+';"></td>');
+            // elem.appendTo(tr);
             if (this.escapeHtml) {
-                elem.text(label);
+                td.text(label);
             }
             else {
-                elem.html(label);
+                td.html(label);
             }
         }
+        td = null;
+        div0 = null;
+        div1 = null;
         tr = null;
         elem = null;
     };
diff --git a/libs/jqplot/plugins/jqplot.canvasAxisTickRenderer.js b/libs/jqplot/plugins/jqplot.canvasAxisTickRenderer.js
index 4d840a0e70..81c6756eeb 100644
--- a/libs/jqplot/plugins/jqplot.canvasAxisTickRenderer.js
+++ b/libs/jqplot/plugins/jqplot.canvasAxisTickRenderer.js
@@ -222,6 +222,7 @@
         this._textRenderer.setText(this.label, ctx);
         var w = this.getWidth(ctx);
         var h = this.getHeight(ctx);
+        // canvases seem to need to have width and heigh attributes directly set.
         elem.width = w;
         elem.height = h;
         elem.style.width = w;
diff --git a/libs/jqplot/plugins/jqplot.pieRenderer.js b/libs/jqplot/plugins/jqplot.pieRenderer.js
index f0f1d0b351..141059bd6c 100755
--- a/libs/jqplot/plugins/jqplot.pieRenderer.js
+++ b/libs/jqplot/plugins/jqplot.pieRenderer.js
@@ -155,6 +155,11 @@
         }
         
         $.extend(true, this, options);
+
+        if (this.sliceMargin < 0) {
+            this.sliceMargin = 0;
+        }
+
         this._diameter = null;
         this._radius = null;
         // array of [start,end] angles arrays, one for each slice.  In radians.
@@ -245,10 +250,30 @@
         }
         return td;
     };
+
+    function calcRadiusAdjustment(ang) {
+        return Math.sin((ang - (ang-Math.PI) / 8 / Math.PI )/2.0);
+    }
+
+    function calcRPrime(ang1, ang2, sliceMargin, fill, lineWidth) {
+        var rprime = 0;
+        var ang = ang2 - ang1;
+        var absang = Math.abs(ang);
+        var sm = sliceMargin;
+        if (fill == false) {
+            sm += lineWidth;
+        }
+
+        if (sm > 0 && absang > 0.01 && absang < 6.282) {
+            rprime = parseFloat(sm) / 2.0 / calcRadiusAdjustment(ang);
+        }
+
+        return rprime;
+    }
     
     $.jqplot.PieRenderer.prototype.drawSlice = function (ctx, ang1, ang2, color, isShadow) {
         if (this._drawData) {
-            var r = this._diameter / 2.0;
+            var r = this._radius;
             var fill = this.fill;
             var lineWidth = this.lineWidth;
             var sm = this.sliceMargin;
@@ -257,36 +282,42 @@
             }
             ctx.save();
             ctx.translate(this._center[0], this._center[1]);
-            var rprime = 0;
-            if (Math.abs(ang2-ang1) > 0) {
-                rprime = parseFloat(sm) / 2.0 / Math.sin((ang2 - ang1)/2.0);
-            }
+            
+            var rprime = calcRPrime(ang1, ang2, this.sliceMargin, this.fill, this.lineWidth);
+
             var transx = rprime * Math.cos((ang1 + ang2) / 2.0);
             var transy = rprime * Math.sin((ang1 + ang2) / 2.0);
+
             if ((ang2 - ang1) <= Math.PI) {
                 r -= rprime;  
             }
             else {
                 r += rprime;
             }
+
             ctx.translate(transx, transy);
             
             if (isShadow) {
-                for (var i=0; i<this.shadowDepth; i++) {
+                for (var i=0, l=this.shadowDepth; i<l; i++) {
                     ctx.save();
                     ctx.translate(this.shadowOffset*Math.cos(this.shadowAngle/180*Math.PI), this.shadowOffset*Math.sin(this.shadowAngle/180*Math.PI));
                     doDraw(r);
                 }
+                for (var i=0, l=this.shadowDepth; i<l; i++) {
+                    ctx.restore();
+                }
             }
     
             else {
                 doDraw(r);
             }
+            ctx.restore();
         }
     
         function doDraw (rad) {
             // Fix for IE and Chrome that can't seem to draw circles correctly.
             // ang2 should always be <= 2 pi since that is the way the data is converted.
+            // 2Pi = 6.2831853, Pi = 3.1415927
              if (ang2 > 6.282 + this.startAngle) {
                 ang2 = 6.282 + this.startAngle;
                 if (ang1 > ang2) {
@@ -314,14 +345,6 @@
                 ctx.stroke();
             }
         }
-        
-        if (isShadow) {
-            for (var i=0; i<this.shadowDepth; i++) {
-                ctx.restore();
-            }
-        }
-        
-        ctx.restore();
     };
     
     // called with scope of series
@@ -370,7 +393,6 @@
         }
         
         var shadow = (opts.shadow != undefined) ? opts.shadow : this.shadow;
-        var showLine = (opts.showLine != undefined) ? opts.showLine : this.showLine;
         var fill = (opts.fill != undefined) ? opts.fill : this.fill;
         var cw = ctx.canvas.width;
         var ch = ctx.canvas.height;
@@ -378,38 +400,67 @@
         var h = ch - offy - 2 * this.padding;
         var mindim = Math.min(w,h);
         var d = mindim;
-        // this._diameter = this.diameter || d;
-        this._diameter = this.diameter  || d; // - this.sliceMargin;
-
-        var r = this._radius = this._diameter/2;
-        var sa = this.startAngle / 180 * Math.PI;
-        this._center = [(cw - trans * offx)/2 + trans * offx, (ch - trans*offy)/2 + trans * offy];
         
         // Fixes issue #272.  Thanks hugwijst!
         // reset slice angles array.
         this._sliceAngles = [];
+
+        var sm = this.sliceMargin;
+        if (this.fill == false) {
+            sm += this.lineWidth;
+        }
         
+        var rprime;
+        var maxrprime = 0;
+
+        var ang, ang1, ang2, shadowColor;
+        var sa = this.startAngle / 180 * Math.PI;
+
+        // have to pre-draw shadows, so loop throgh here and calculate some values also.
+        for (var i=0, l=gd.length; i<l; i++) {
+            ang1 = (i == 0) ? sa : gd[i-1][1] + sa;
+            ang2 = gd[i][1] + sa;
+
+            this._sliceAngles.push([ang1, ang2]);
+
+            rprime = calcRPrime(ang1, ang2, this.sliceMargin, this.fill, this.lineWidth);
+
+            if (Math.abs(ang2-ang1) > Math.PI) {
+                maxrprime = Math.max(rprime, maxrprime);  
+            }
+        }
+
+        if (this.diameter != null && this.diameter > 0) {
+            this._diameter = this.diameter - 2*maxrprime;
+        }
+        else {
+            this._diameter = d - 2*maxrprime;
+        }
+
+        // Need to check for undersized pie.  This can happen if
+        // plot area too small and legend is too big.
+        if (this._diameter < 6) {
+            $.jqplot.log('Diameter of pie too small, not rendering.');
+            return;
+        }
+
+        var r = this._radius = this._diameter/2;
+
+        this._center = [(cw - trans * offx)/2 + trans * offx + maxrprime * Math.cos(sa), (ch - trans*offy)/2 + trans * offy + maxrprime * Math.sin(sa)];
+
         if (this.shadow) {
-            var shadowColor = 'rgba(0,0,0,'+this.shadowAlpha+')';
-            for (var i=0; i<gd.length; i++) {
-                var ang1 = (i == 0) ? sa : gd[i-1][1] + sa;
-                // Adjust ang1 and ang2 for sliceMargin
-                // ang1 += this.sliceMargin/180*Math.PI;
-                this.renderer.drawSlice.call (this, ctx, ang1, gd[i][1]+sa, shadowColor, true);
+            for (var i=0, l=gd.length; i<l; i++) {
+                shadowColor = 'rgba(0,0,0,'+this.shadowAlpha+')';
+                this.renderer.drawSlice.call (this, ctx, this._sliceAngles[i][0], this._sliceAngles[i][1], shadowColor, true);
             }
-            
         }
+        
         for (var i=0; i<gd.length; i++) {
-            var ang1 = (i == 0) ? sa : gd[i-1][1] + sa;
-            // Adjust ang1 and ang2 for sliceMargin
-            // ang1 += this.sliceMargin/180*Math.PI;
-            var ang2 = gd[i][1] + sa;
-            this._sliceAngles.push([ang1, ang2]);
                       
-            this.renderer.drawSlice.call (this, ctx, ang1, ang2, colorGenerator.next(), false);
+            this.renderer.drawSlice.call (this, ctx, this._sliceAngles[i][0], this._sliceAngles[i][1], colorGenerator.next(), false);
         
             if (this.showDataLabels && gd[i][2]*100 >= this.dataLabelThreshold) {
-                var fstr, avgang = (ang1+ang2)/2, label;
+                var fstr, avgang = (this._sliceAngles[i][0] + this._sliceAngles[i][1])/2, label;
             
                 if (this.dataLabels == 'label') {
                     fstr = this.dataLabelFormatString || '%s';
@@ -446,8 +497,7 @@
                 y = Math.round(y);
                 labelelem.css({left: x, top: y});
             }
-        }
-               
+        }            
     };
     
     $.jqplot.PieAxisRenderer = function() {
@@ -511,17 +561,42 @@
         var legend = this;
         if (this.show) {
             var series = this._series;
-            var ss = 'position:absolute;';
-            ss += (this.background) ? 'background:'+this.background+';' : '';
-            ss += (this.border) ? 'border:'+this.border+';' : '';
-            ss += (this.fontSize) ? 'font-size:'+this.fontSize+';' : '';
-            ss += (this.fontFamily) ? 'font-family:'+this.fontFamily+';' : '';
-            ss += (this.textColor) ? 'color:'+this.textColor+';' : '';
-            ss += (this.marginTop != null) ? 'margin-top:'+this.marginTop+';' : '';
-            ss += (this.marginBottom != null) ? 'margin-bottom:'+this.marginBottom+';' : '';
-            ss += (this.marginLeft != null) ? 'margin-left:'+this.marginLeft+';' : '';
-            ss += (this.marginRight != null) ? 'margin-right:'+this.marginRight+';' : '';
-            this._elem = $('<table class="jqplot-table-legend" style="'+ss+'"></table>');
+
+
+            this._elem = $(document.createElement('table'));
+            this._elem.addClass('jqplot-table-legend');
+
+            var ss = {position:'absolute'};
+            if (this.background) {
+                ss['background'] = this.background;
+            }
+            if (this.border) {
+                ss['border'] = this.border;
+            }
+            if (this.fontSize) {
+                ss['fontSize'] = this.fontSize;
+            }
+            if (this.fontFamily) {
+                ss['fontFamily'] = this.fontFamily;
+            }
+            if (this.textColor) {
+                ss['textColor'] = this.textColor;
+            }
+            if (this.marginTop != null) {
+                ss['marginTop'] = this.marginTop;
+            }
+            if (this.marginBottom != null) {
+                ss['marginBottom'] = this.marginBottom;
+            }
+            if (this.marginLeft != null) {
+                ss['marginLeft'] = this.marginLeft;
+            }
+            if (this.marginRight != null) {
+                ss['marginRight'] = this.marginRight;
+            }
+
+            this._elem.css(ss);
+
             // Pie charts legends don't go by number of series, but by number of data points
             // in the series.  Refactor things here for that.
             
@@ -552,16 +627,24 @@
                     nc = 1;
                 }
                 
-                var i, j, tr, td1, td2, lt, rs, color;
-                var idx = 0;    
+                var i, j;
+                var tr, td1, td2; 
+                var lt, rs, color;
+                var idx = 0; 
+                var div0, div1;   
                 
                 for (i=0; i<nr; i++) {
+                    tr = $(document.createElement('tr'));
+                    tr.addClass('jqplot-table-legend');
+                    
                     if (reverse){
-                        tr = $('<tr class="jqplot-table-legend"></tr>').prependTo(this._elem);
+                        tr.prependTo(this._elem);
                     }
+                    
                     else{
-                        tr = $('<tr class="jqplot-table-legend"></tr>').appendTo(this._elem);
+                        tr.appendTo(this._elem);
                     }
+                    
                     for (j=0; j<nc; j++) {
                         if (idx < pd.length){
                             lt = this.labels[idx] || pd[idx][0].toString();
@@ -583,11 +666,23 @@
                                 }
                             }
                             rs = (pad) ? this.rowSpacing : '0';
-                
-                            td1 = $('<td class="jqplot-table-legend" style="text-align:center;padding-top:'+rs+';">'+
-                                '<div><div class="jqplot-table-legend-swatch" style="border-color:'+color+';"></div>'+
-                                '</div></td>');
-                            td2 = $('<td class="jqplot-table-legend" style="padding-top:'+rs+';"></td>');
+
+
+
+                            td1 = $(document.createElement('td'));
+                            td1.addClass('jqplot-table-legend');
+                            td1.css({textAlign: 'center', paddingTop: rs});
+
+                            div0 = $(document.createElement('div'));
+                            div1 = $(document.createElement('div'));
+                            div1.addClass('jqplot-table-legend-swatch');
+                            div1.css({backgroundColor: color, borderColor: color});
+                            td1.append(div0.append(div1));
+
+                            td2 = $(document.createElement('td'));
+                            td2.addClass('jqplot-table-legend');
+                            td2.css('paddingTop', rs);
+
                             if (this.escapeHtml){
                                 td2.text(lt);
                             }