Commits

cleonello  committed e5116e1

Working out various bugs with theming not inheriting or picking up theme info correctly.

  • Participants
  • Parent commits edd2f59

Comments (0)

Files changed (6)

File examples/theming.html

 
 <html lang="en">
 <head>
+  <!-- Use Compatibility mode in IE -->
+  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Theming Test</title>
   <!--[if IE]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
 
     ticks = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "Dallas"];
 
-    plot1 = $.jqplot('chart1',[l2],{
-       title: 'Line Chart',
-       highlighter: {
-           show:true
-       },
-       cursor: {
-           show: true,
-           zoom: true
-       },
-       axes: {
-           xaxis: {
-               label: 'Sample'
-           }
-       }
-    });
-    
-    plot1b = $.jqplot('chart1b',[l2, l3, l4],{
-       stackSeries: true,
-       showMarker: false,
-       seriesDefaults: {
-           fill: true
-       }
-    });
+    // plot1 = $.jqplot('chart1',[l2],{
+    //    title: 'Line Chart',
+    //    highlighter: {
+    //        show:true
+    //    },
+    //    cursor: {
+    //        show: true,
+    //        zoom: true
+    //    },
+    //    axes: {
+    //        xaxis: {
+    //            label: 'Sample'
+    //        }
+    //    }
+    // });
+    // 
+    // plot1b = $.jqplot('chart1b',[l2, l3, l4],{
+    //    stackSeries: true,
+    //    showMarker: false,
+    //    seriesDefaults: {
+    //        fill: true
+    //    }
+    // });
 
     plot2 = $.jqplot('chart2',[pop1980, pop1990, pop2000, pop2008],{
        title: 'City Population',
        }
     });
     
-    plot3 = $.jqplot('chart3',[l1],{
-       title: 'Global City Index',
-       legend: {
-           show: true,
-           rendererOptions: {
-               // numberColumns: 2,
-               fontSize: '10pt',
+    // plot3 = $.jqplot('chart3',[l1],{
+    //    title: 'Global City Index',
+    //    legend: {
+    //        show: true,
+    //        rendererOptions: {
+    //            // numberColumns: 2,
+    //            fontSize: '10pt'
+    //        }
+    //     },
+    //    seriesDefaults: {
+    //        renderer: $.jqplot.FunnelRenderer
+    //    }
+    // });
+    // 
+    // plot4 = $.jqplot('chart4',[l2, l3],{
+    //    title: 'Stacked Bar Chart',
+    //    stackSeries: true,
+    //    legend: {
+    //        show: true,
+    //        location: 'nw'
+    //    },
+    //    seriesDefaults: {
+    //        renderer: $.jqplot.BarRenderer
+    //    },
+    //    axes: {
+    //        xaxis: {
+    //            renderer: $.jqplot.CategoryAxisRenderer
+    //        }
+    //    }
+    // });
+    // 
+    // plot5 = $.jqplot('chart5',[l3],{
+    //    title: 'Pie Chart',
+    //    seriesDefaults: {
+    //        renderer: $.jqplot.PieRenderer
+    //    }
+    // });
+    // 
+    // plot6 = $.jqplot('chart6',[l2, l3],{
+    //    title: 'Donut Chart',
+    //    seriesDefaults: {
+    //        renderer: $.jqplot.DonutRenderer,
+    //        rendererOptions: {
+    //            ringMargin: 4
+    //        }
+    //    }
+    // });
+    // 
+    // e1 = plot1.themeEngine;
+    // brass = e1.copy('Default', 'brass');
+    // brass.title.fontFamily = 'Copperplate, Impact';
+    // brass.grid.backgroundColor = "rgb(216, 198, 114)";
+    // brass.grid.drawGridlines = false;
+    // brass.series[0].lineWidth = 6.5;
+    // brass.series[0].markerOptions.show = false;
+    // // brass.axes.xaxis.ticks.fontFamily = "Copperplate, Impact";
+    // brass.axesStyles.label.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
+    // brass.axesStyles.ticks.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
+    // brass.axesStyles.label.fontSize = '14pt';
+    // 
+    // temp = {
+    //     grid: {
+    //         backgroundColor: "#593D2B",
+    //         gridLineColor: '#E8E8E8',
+    //         gridLineWidth: 3
+    //     },
+    //     title: {
+    //         fontFamily: '"Comic Sans MS", cursive',
+    //         fontSize: '18pt',
+    //         textColor: '#C7CC4E'
+    //     },
+    //     seriesStyles: {
+    //         color: "#DBBCAF",
+    //         lineWidth: 8,
+    //         markerOptions: {
+    //             show: false
+    //         }
+    //     }
+    // };
+    // 
+    // chocolate = plot1.themeEngine.copy('Default', 'chocolate', temp);
+    // 
+    // temp = {
+    //     series: [
+    //         {color: 'rgba(216, 159, 60, 0.4)'},
+    //         {color: 'rgba(159, 216, 60, 0.4)'},
+    //         {color: 'rgba(60, 159, 216, 0.4)'},
+    //     ],
+    //     grid: {
+    //         backgroundColor: '#DEA493'
+    //     }
+    // }
+    // 
+    // gabe = plot1b.themeEngine.newTheme('gabe', temp);
+    
+    temp = {
+        axesStyles: {
+           borderWidth: 0,
+           ticks: {
+               fontSize: '12pt',
+               fontFamily: "'Times New Roman'",
+               textColor: 'black'
+           },
+           label: {
+               fontFamily: "'Times New Roman'",
+               textColor: 'black'
            }
         },
-       seriesDefaults: {
-           renderer: $.jqplot.FunnelRenderer
-       }
-    });
-    
-    plot4 = $.jqplot('chart4',[l2, l3],{
-       title: 'Stacked Bar Chart',
-       stackSeries: true,
-       legend: {
-           show: true,
-           location: 'nw'
-       },
-       seriesDefaults: {
-           renderer: $.jqplot.BarRenderer
-       },
-       axes: {
-           xaxis: {
-               renderer: $.jqplot.CategoryAxisRenderer
-           }
-       }
-    });
-    
-    plot5 = $.jqplot('chart5',[l3],{
-       title: 'Pie Chart',
-       seriesDefaults: {
-           renderer: $.jqplot.PieRenderer
-       }
-    });
-    
-    plot6 = $.jqplot('chart6',[l2, l3],{
-       title: 'Donut Chart',
-       seriesDefaults: {
-           renderer: $.jqplot.DonutRenderer,
-           rendererOptions: {
-               ringMargin: 4
-           }
-       }
-    });
-
-    e1 = plot1.themeEngine;
-    brass = e1.copy('default', 'brass');
-    brass.title.fontFamily = 'Georgia, "Times New Roman"';
-    brass.grid.backgroundColor = "rgb(216, 198, 114)";
-    brass.grid.drawGridlines = false;
-    brass.series[0].lineWidth = 6.5;
-    brass.series[0].markerOptions.show = false;
-    brass.axes.xaxis.ticks.fontFamily = "Impact";
-    
-    temp = {
         grid: {
-            backgroundColor: "#593D2B"
+            backgroundColor: 'white',
+            borderWidth: 0,
+            gridLineColor: 'black',
+            gridLineWidth: 2,
+            borderColor: 'black'
         },
-        title: {
-            fontFamily: '"Comic Sans MS", cursive',
-            fontSize: '15pt'
-        },
-        seriesStyles: {
-            color: "#DBBCAF",
-            lineWidth: 8,
-            markerOptions: {
-                show: false
-            }
+        series: [
+            {color: 'red', highlightColors: ['pink', 'pink', 'pink', 'pink', 'pink', 'pink', 'pink', 'pink']},
+            {color: 'green', highlightColors: ['silver', 'silver', 'silver', 'silver', 'silver', 'silver', 'silver', 'silver']},
+            {color: 'blue'},
+            {color: 'yellow'}
+        ],
+        legend: {
+            background: 'white',
+            textColor: 'black',
+            fontFamily: 'Times New Roman',
+            border: '1px solid black'
         }
     };
     
-    chocolate = plot1.themeEngine.copy('default', 'chocolate', temp);
+    // old = plot2.themeEngine.newTheme('1995', temp);
     
-    temp = {
-        axesStyles: {
-           borderWidth: 4,
-           ticks: {
-               fontSize: '12pt',
-               fontFamily: '"Times New Roman"'
-           } 
-        },
-        // seriesColors = ['red', 'green', 'blue', 'yellow', 'purple'],
-        series: [
-            {color: 'red'},
-            {color: 'green'},
-            {color: 'blue'},
-            {color: 'yellow'}
-        ]
-    };
+    oldstyle = new $.jqplot.Theme('oldstyle', temp);
     
-    old = plot2.themeEngine.newTheme('old', temp);
+    plot2.themeEngine.add(oldstyle);
     
 });
 

File src/jqplot.axisLabelRenderer.js

         // prop: label
         // The text or html for the label.
         this.label = '';
+        this.fontFamily = null;
+        this.fontSize = null;
+        this.textColor = null;
         this._elem;
         // prop: escapeHTML
         // true to escape HTML entities in the label.
         else {
             this._elem.text(this.label);
         }
+        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;
     };

File src/jqplot.divTitleRenderer.js

             // don't trust that a stylesheet is present, set the position.
             var styletext = '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+';' : 'text-align:center;';
             styletext += (color) ? 'color:'+color+';' : '';
             styletext += (this.paddingBottom) ? 'padding-bottom:'+this.paddingBottom+';' : '';
             this._elem = $('<div class="jqplot-title" style="'+styletext+'">'+this.text+'</div>');
+            if (this.fontFamily) {
+                this._elem.css('font-family', this.fontFamily);
+            }
         }
         
         return this._elem;

File src/jqplot.themeEngine.js

     
     // called with scope of plot
     $.jqplot.ThemeEngine.prototype.init = function() {
-        // get the default theme from the current plot settings.
-        var th = new $.jqplot.Theme({_name:'default'});
+        // get the Default theme from the current plot settings.
+        var th = new $.jqplot.Theme({_name:'Default'});
         var n, i;
+        
         for (n in th.target) {
-            th.target[n] = this.target.css(n);
-        }
-        if (this.title.show && this.title._elem) {
-            for (n in th.title) {
-                th.title[n] = this.title._elem.css(n);
+            if (n == "textColor") {
+                th.target[n] = this.target.css('color');
+            }
+            else {
+                th.target[n] = this.target.css(n);
             }
         }
         
-        // n = ['drawGridlines', 'gridlineColor', 'gridlineWidth', 'backgroundColor', 'borderColor', 'borderWidth', 'shadow'];
-        // for (i=0; i<n.length; i++) {
-        //     th.grid[n[i]] = this.grid[n[i]];
-        // }
+        if (this.title.show && this.title._elem) {
+            for (n in th.title) {
+                if (n == "textColor") {
+                    th.title[n] = this.title._elem.css('color');
+                }
+                else {
+                    th.title[n] = this.title._elem.css(n);
+                }
+            }
+        }
         
         for (n in th.grid) {
             th.grid[n] = this.grid[n];
         }
         if (this.legend.show && this.legend._elem) {
             for (n in th.legend) {
-                th.legend[n] = this.legend._elem.css(n);
+                if (n == 'textColor') {
+                    th.legend[n] = this.legend._elem.css('color');
+                }
+                else {
+                    th.legend[n] = this.legend._elem.css(n);
+                }
             }
         }
         var s;
                 th.series[i][n] = s[n];
             }
         }
-        var a, ax, axis1;
+        var a, ax;
         for (n in this.axes) {
-            axis1 = axis1 || n;
             ax = this.axes[n];
             a = th.axes[n] = new AxisProperties();
             a.borderColor = ax.borderColor;
             a.borderWidth = ax.borderWidth;
             if (ax._ticks && ax._ticks[0]) {
-                if (ax._ticks[0].constructor == $.jqplot.AxisTickRenderer || true) {
-                    for (nn in a.ticks) {
-                        if (ax._ticks[0].hasOwnProperty(nn)) {
-                            a.ticks[nn] = ax._ticks[0][nn];
-                        }
-                        else if (ax._ticks[0]._elem){
-                            a.ticks[nn] = ax._ticks[0]._elem.css(nn);
-                        }
+                for (nn in a.ticks) {
+                    if (ax._ticks[0].hasOwnProperty(nn)) {
+                        a.ticks[nn] = ax._ticks[0][nn];
+                    }
+                    else if (ax._ticks[0]._elem){
+                        a.ticks[nn] = ax._ticks[0]._elem.css(nn);
                     }
                 }
             }
             if (ax._label && ax._label._elem) {
                 for (nn in a.label) {
-                    a.label[nn] = ax._label._elem.css(nn);
+                    // a.label[nn] = ax._label._elem.css(nn);
+                    if (ax._label.hasOwnProperty(nn)) {
+                        a.label[nn] = ax._label[nn];
+                    }
+                    else if (ax._label._elem){
+                        a.label[nn] = ax._label._elem.css(nn);
+                    }
                 }
             }
         }
-        this.themeEngine._add(th);
+        this.themeEngine.add(th);
         this.themeEngine.activeTheme  = this.themeEngine.themes[th._name];
     };
     
         else {
             var th = this.themes[name];
             this.activeTheme = th;
-            var val;
-            for (axname in th.axes) {
+            var val, checkBorderColor = false, checkBorderWidth = false;
+            var arr = ['xaxis', 'x2axis', 'yaxis', 'y2axis'];
+            
+            for (i=0; i<arr.length; i++) {
+                var ax = arr[i];
+                if (th.axesStyles.borderColor != null) {
+                    plot.axes[ax].borderColor = th.axesStyles.borderColor;
+                }
+                if (th.axesStyles.borderWidth != null) {
+                    plot.axes[ax].borderWidth = th.axesStyles.borderWidth;
+                }
+            }
+            
+            for (axname in plot.axes) {
                 var axis = plot.axes[axname];
                 if (axis.show) {
-                    var thax = th.axes[axname];
+                    var thaxis = th.axes[axname] || {};
+                    var thaxstyle = th.axesStyles;
+                    var thax = $.jqplot.extend(true, {}, thaxis, thaxstyle);
                     val = (th.axesStyles.borderColor != null) ? th.axesStyles.borderColor : thax.borderColor;
-                    if (val != null) {
-                        axis.borderColor = val;
+                    if (thax.borderColor != null) {
+                        axis.borderColor = thax.borderColor;
                         redrawPlot = true;
                     }
                     val = (th.axesStyles.borderWidth != null) ? th.axesStyles.borderWidth : thax.borderWidth;
-                    if (val != null) {
-                        axis.borderWidth = val;
+                    if (thax.borderWidth != null) {
+                        axis.borderWidth = thax.borderWidth;
                         redrawPlot = true;
                     }
                     if (axis._ticks && axis._ticks[0]) {
-
                         for (nn in thax.ticks) {
-                            val = null;
-                            if (th.axesStyles.ticks && th.axesStyles.ticks[nn] != null) {
-                                val = th.axesStyles.ticks[nn];
-                            }
-                            else if (thax.ticks[nn] != null){
-                                val = thax.ticks[nn]
-                            }
+                            // val = null;
+                            // if (th.axesStyles.ticks && th.axesStyles.ticks[nn] != null) {
+                            //     val = th.axesStyles.ticks[nn];
+                            // }
+                            // else if (thax.ticks[nn] != null){
+                            //     val = thax.ticks[nn]
+                            // }
+                            val = thax.ticks[nn];
                             if (val != null) {
-                                if (axis.tickRenderer == $.jqplot.CanvasAxisTickRenderer || true) {
-                                    axis.tickOptions[nn] = val;
-                                    axis._ticks = [];
-                                    redrawPlot = true;
-                                }
-                                else if (axis._ticks[0]._elem){
-                                    for (var i=0; i<axis._ticks.length; i++) {
-                                        axis._ticks[i]._elem.css(nn, val);
-                                    }
-                                    redrawPlot = false;
-                                }
+                                axis.tickOptions[nn] = val;
+                                axis._ticks = [];
+                                redrawPlot = true;
                             }
                         }
-
                     }
+                    if (axis._label && axis._label.show) {
+                        for (nn in thax.label) {
+                            // val = null;
+                            // if (th.axesStyles.label && th.axesStyles.label[nn] != null) {
+                            //     val = th.axesStyles.label[nn];
+                            // }
+                            // else if (thax.label && thax.label[nn] != null){
+                            //     val = thax.label[nn]
+                            // }
+                            val = thax.label[nn];
+                            if (val != null) {
+                                axis.labelOptions[nn] = val;
+                                redrawPlot = true;
+                            }
+                        }
+                    }
+                    
                 }
-            }
-            
+            }            
             
             for (var n in th.grid) {
                 if (th.grid[n] != null) {
             if (!redrawPlot) {
                 plot.grid.draw();
             }
-            for (n in th.target) {
-                if (th.target[n] != null) {
-                    plot.target.css(n, th.target[n]);
-                }
-            }
+            
             if (plot.legend.show) { 
                 for (n in th.legend) {
                     if (th.legend[n] != null) {
-                        plot.legend._elem.css(n, th.legend[n]);
+                        plot.legend[n] = th.legend[n];
                     }
                 }
             }
             if (plot.title.show) {
                 for (n in th.title) {
                     if (th.title[n] != null) {
-                        plot.title._elem.css(n, th.title[n]);
+                        plot.title[n] = th.title[n];
                     }
                 }
             }
             
-            // if (redrawPlot) {
-            //     plot.target.empty();
-            //     plot.draw();
-            // }
-            
             var i;
             for (i=0; i<th.series.length; i++) {
                 var opts = {};
                             plot.series[i][n] = val;
                         }
                         redrawPlot = true;
-                        // redrawSeries = true;
                     }
                 }
-                // if (redrawSeries) {
-                //     console.log('redrawing series ', i)
-                //     plot.drawSeries(opts, i);
-                // }
             }
             
             if (redrawPlot) {
                 plot.target.empty();
                 plot.draw();
             }
+            
+            for (n in th.target) {
+                if (th.target[n] != null) {
+                    plot.target.css(n, th.target[n]);
+                }
+            }
         }
         
     };
     
-    $.jqplot.ThemeEngine.prototype._add = function(theme, name) {
+    $.jqplot.ThemeEngine.prototype.add = function(theme, name) {
         if (name) {
             theme._name = name;
         }
     
     // delete the names theme, return true on success, false on failure.
     $.jqplot.ThemeEngine.prototype.remove = function(name) {
-        if (name == 'default') return false;
+        if (name == 'Default') return false;
         return delete this.themes[name];
     };
     
-    // create a copy of the default theme and return it theme.
+        // create a copy of the Default theme merging it with supplied options and return it.
     $.jqplot.ThemeEngine.prototype.newTheme = function(name, obj) {
         if (typeof(name) == 'object') {
             obj = obj || name;
             name = null;
         }
-        name = name || Date.parse(new Date());
+        if (obj && obj._name) {
+            name = obj._name;
+        }
+        else {
+            name = name || Date.parse(new Date());
+        }
         // var th = new $.jqplot.Theme(name);
-        var th = this.copy(this.themes.default._name, name);
-        merge(th, obj);
+        var th = this.copy(this.themes['Default']._name, name);
+        $.jqplot.extend(th, obj);
         return th;
     };
     
-    function clone(obj) {
-        return eval(obj.toSource());
+    // function clone(obj) {
+    //     return eval(obj.toSource());
+    // }
+    
+    function clone(obj){
+        if(obj == null || typeof(obj) != 'object'){
+            return obj;
+        }
+    
+        var temp = new obj.constructor();
+        for(var key in obj){
+            temp[key] = clone(obj[key]);
+        }   
+        return temp;
     }
     
     $.jqplot.clone = clone;
         if (obj2 ==  null || typeof(obj2) != 'object') {
             return;
         }
-        if (typeof(obj1) != 'object'){
-            obj1 = {};
-        }
+        // if (obj1 == null){
+        //     console.log('obj1 is null');
+        //     obj1 = clone(obj2);
+        //     return;
+        // }
         for (var key in obj2) {
-            if (typeof(obj2[key]) == 'object') {
-                if (!obj1[key]) {
+            if (key == 'highlightColors') {
+                obj1[key] = clone(obj2[key]);
+            }
+            if (obj2[key] != null && typeof(obj2[key]) == 'object') {
+                if (!obj1.hasOwnProperty(key)) {
                     obj1[key] = {};
                 }
                 merge(obj1[key], obj2[key]);
         }
     }
     
+    $.jqplot.merge = merge;
+    
+        // Use the jQuery 1.3.2 extend function since behaviour in jQuery 1.4 seems problematic
+    $.jqplot.extend = function() {
+    	// copy reference to target object
+    	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;
+
+    	// Handle a deep copy situation
+    	if ( typeof target === "boolean" ) {
+    		deep = target;
+    		target = arguments[1] || {};
+    		// skip the boolean and the target
+    		i = 2;
+    	}
+
+    	// Handle case when target is a string or something (possible in deep copy)
+    	if ( typeof target !== "object" && !toString.call(target) === "[object Function]" )
+    		target = {};
+
+    	for ( ; i < length; i++ )
+    		// Only deal with non-null/undefined values
+    		if ( (options = arguments[ i ]) != null )
+    			// Extend the base object
+    			for ( var name in options ) {
+    				var src = target[ name ], copy = options[ name ];
+
+    				// Prevent never-ending loop
+    				if ( target === copy )
+    					continue;
+
+    				// Recurse if we're merging object values
+    				if ( deep && copy && typeof copy === "object" && !copy.nodeType )
+    					target[ name ] = $.jqplot.extend( deep, 
+    						// Never move original objects, clone them
+    						src || ( copy.length != null ? [ ] : { } )
+    					, copy );
+
+    				// Don't bring in undefined values
+    				else if ( copy !== undefined )
+    					target[ name ] = copy;
+    			}
+
+    	// Return the modified object
+    	return target;
+    };
+    
     $.jqplot.ThemeEngine.prototype.rename = function (oldName, newName) {
         if (this.themes.hasOwnProperty(newName)) {
             throw new Error ("jqplot.ThemeEngine Error: New name already in use.");
             throw new Error(s);
         }
         else {
-            var th = eval(this.themes[sourceName].toSource());
+            var th = clone(this.themes[sourceName]);
             th._name = targetName;
-            merge (th, obj);
-            this._add(th);
+            $.jqplot.extend(true, th, obj);
+            this.add(th);
             return th;
         }
     };
     
-    $.jqplot.Theme = function(obj) {
-        this._name = '';
+    $.jqplot.Theme = function(name, obj) {
+        if (typeof(name) == 'object') {
+            obj = obj || name;
+            name = null;
+        }
+        name = name || Date.parse(new Date());
+        this._name = name;
         this.autoHighlightColors = true;
         this.target = {
             backgroundColor: null
         };
         this.legend = {
-            color: null,
+            textColor: null,
             fontFamily: null,
             fontSize: null,
-            fontWeight: null,
-            borderLeftWidth: null,
-            borderRightWidth: null,
-            borderTopWidth: null,
-            borderBottomWidth: null,
-            borderLeftColor: null,
-            borderRightColor: null,
-            borderTopColor: null,
-            borderBottomColor: null,
-            backgroundColor: null
+            border: null,
+            background: null
         };
         this.title = {
-            color: null,
+            textColor: null,
             fontFamily: null,
             fontSize: null,
-            fontWeight: null,
-            paddingBottom: null
+            textAlign: null
         };
         this.seriesStyles = {};
         this.series = [];
             this._name = obj;
         }
         else if(typeof(obj) == 'object') {
-            merge(this, obj);
+            $.jqplot.extend(true, this, obj);
         }
     };
     
         this.showLabel = null;
         this.showMark = null;
         this.size = null;
-        this.color = null;
+        this.textColor = null;
         this.whiteSpace = null;
         this.fontSize = null;
         this.fontFamily = null;
     }
     
     var AxisLabel = function() {
-        this.color = null;
+        this.textColor = null;
         this.whiteSpace = null;
         this.fontSize = null;
         this.fontFamily = null;
         this.barPadding=null;
         this.barMargin=null;
         this.barWidth=null;
+        this.highlightColors=null;
     };
     
     var PieSeriesProperties = function() {
         this.shadow=null;
         this.startAngle=null;
         this.lineWidth=null;
+        this.highlightColors=null;
     };
     
     var DonutSeriesProperties = function() {
         this.innerDiameter=null;
         this.thickness=null;
         this.ringMargin=null;
+        this.highlightColors=null;
     };
     
     var FunnelSeriesProperties = function() {
         this.padding=null;
         this.sectionMargin=null;
         this.seriesColors=null;
+        this.highlightColors=null;
     };
     
     var MeterSeriesProperties = function() {

File src/plugins/jqplot.barRenderer.js

         // This will be disabled if highlightMouseOver is true.
         this.highlightMouseDown = false;
         // prop: highlightColors
-        // an array of colors to use when highlighting a slice.
+        // an array of colors to use when highlighting a bar.
         this.highlightColors = [];
         
         // if user has passed in highlightMouseDown option and not set highlightMouseOver, disable highlightMouseOver
         var pointx, pointy, nvals, nseries, pos;
         // clear out data colors.
         this._dataColors = [];
+        this._barPoints = [];
         
         if (this.barWidth == null) {
             this.renderer.setBarWidth.call(this);
         if (this.highlightColors.length == 0) {
             this.highlightColors = computeHighlightColors(this._dataColors);
         }
+        
+        else if (typeof(this.highlightColors) == 'string') {
+            var temp = this.highlightColors;
+            this.highlightColors = [];
+            for (var i=0; i<this._dataColors.length; i++) {
+                this.highlightColors.push(temp);
+            }
+        }
+        
     };
     
      

File src/plugins/jqplot.canvasAxisLabelRenderer.js

         // true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
         // If true, label will be drawn with canvas tag native support for fonts.
         // If false, label will be drawn with Hershey font metrics.
-        this.enableFontSupport = false;
+        this.enableFontSupport = true;
         // prop: pt2px
         // Point to pixel scaling factor, used for computing height of bounding box
         // around a label.  The labels text renderer has a default setting of 1.4, which 
         }
         
         if (this.enableFontSupport) {
-            if ($.browser.safari) {
-                var p = $.browser.version.split('.');
-                for (var i=0; i<p.length; i++) { p[i] = Number(p[i]); }
-                if (p[0] > 528 || (p[0] == 528 && p[1] >= 16)) {
-                    this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts); 
-                }
-            }
-            else if ($.browser.mozilla) {
-                var p = $.browser.version.split(".");
-                if (p[0] > 1 || (p[0] == 1 &&  p[1] >= 9 && p[2] > 0) ) {
-                    this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
-                }
-                else {
-                    this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);
-                }
+            
+            function support_canvas_text() {
+                return !!(document.createElement('canvas').getContext && typeof document.createElement('canvas').getContext('2d').fillText == 'function');
             }
             
-            // TODO: test and enable this
-            // else if ($.browser.msie) {
-            //     this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts); 
-            // }
+            if (support_canvas_text()) {
+                this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
+            }
             
             else {
                 this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);