Commits

Anonymous committed 41c05c5

Working through themeing. Now supporting canvas fonts on ticks.

Comments (0)

Files changed (6)

examples/theming.html

   <title>Theming Test</title>
   <!--[if IE]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
   
+  <!-- <link rel="stylesheet" type="text/css" href="../src/themes/jqplot.brass.css" /> -->
   <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.funnelRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
   <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
   <!-- END: load jqplot -->
 
 <style type="text/css">
     l4 = [12, 6, 13, 11, 2];
     l5 = [4, -3, 3, 6, 2, -2];
 
-    pop1980 = [7071639, 2968528, 3005072, 1595138, 789704, 1688210, 785940, 904599]
-    pop1990 = [7322564, 3485398, 2783726, 1630553, 983403, 1585577, 935933, 1006877]
-    pop2000 = [8008654, 3694644, 2896051, 1974152, 1322025, 1517550, 1160005, 1188603]
-    pop2008 = [8363710, 3833995, 2853114, 2242193, 1567924, 1447395, 1351305, 1279910]
+    pop1980 = [7071639, 2968528, 3005072, 1595138, 789704, 1688210, 785940, 904599];
+    pop1990 = [7322564, 3485398, 2783726, 1630553, 983403, 1585577, 935933, 1006877];
+    pop2000 = [8008654, 3694644, 2896051, 1974152, 1322025, 1517550, 1160005, 1188603];
+    pop2008 = [8363710, 3833995, 2853114, 2242193, 1567924, 1447395, 1351305, 1279910];
 
-    ticks = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "Dallas"]      
+    ticks = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "Dallas"];
 
     plot1 = $.jqplot('chart1',[l2],{
        title: 'Line Chart',
        cursor: {
            show: true,
            zoom: true
+       },
+       axes: {
+           xaxis: {
+               label: 'Sample'
+           }
        }
     });
     
            fill: true
        }
     });
-    
-    plot1c = $.jqplot('chart1c',[l5],{
-       stackSeries: true,
-       showMarker: false,
-       seriesDefaults: {
-           fill: true,
-           fillToZero: true,
-           rendererOptions: {
-               highlightMouseDown: true
-           }
-       }
-    });
 
     plot2 = $.jqplot('chart2',[pop1980, pop1990, pop2000, pop2008],{
        title: 'City Population',
        ],
        axes: {
            xaxis: {
+               label: 'City',
                renderer: $.jqplot.CategoryAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
+               labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                ticks: ticks,
                tickOptions: {
                    angle: -30
 
     e1 = plot1.themeEngine;
     brass = e1.copy('default', 'brass');
-    brass.target.fontFamily = 'Georgia, "Times New Roman"';
     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 = {
-        target: {
-            fontFamily: '"Comic Sans MS", cursive',
-            fontSize: '11pt',
-            color: "#907CEC"
-        },
         grid: {
             backgroundColor: "#593D2B"
         },
             fontFamily: '"Comic Sans MS", cursive',
             fontSize: '15pt'
         },
-        series: [
-            {
-                color: "#DBBCAF",
-                lineWidth: 8,
-                markerOptions: {
-                    show: false
-                }
+        seriesStyles: {
+            color: "#DBBCAF",
+            lineWidth: 8,
+            markerOptions: {
+                show: false
             }
-        ]
+        }
     };
+    
     chocolate = plot1.themeEngine.copy('default', 'chocolate', temp);
     
-
+    temp = {
+        axesStyles: {
+           borderWidth: 4,
+           ticks: {
+               fontSize: '14pt',
+               fontFamily: '"Times New Roman"'
+           } 
+        }
+    };
+    
+    old = plot2.themeEngine.newTheme('old', temp);
+    
 });
 
 function switchTheme(plot, theme) {
 <?php include "nav.inc"; ?>
 <div id="chart1" class="plot" style="width:400px;height:260px;"></div>
 <div id="chart1b" class="plot" style="width:400px;height:260px;"></div>
-<div id="chart1c" class="plot" style="width:400px;height:260px;"></div>
 <div id="chart2" class="plot" style="width:760px;height:360px;"></div>
 <div id="chart3" class="plot" style="width:400px;height:320px;"></div>
 <div id="chart4" class="plot" style="width:400px;height:260px;"></div>

src/jqplot.linearAxisRenderer.js

             var dim=0;
             var temp;
             
+            if (this._elem) {
+                this._elem.empty();
+            }
+            
             this._elem = $('<div class="jqplot-axis jqplot-'+this.name+'" style="position:absolute;"></div>');
             
             if (this.name == 'xaxis' || this.name == 'x2axis') {

src/jqplot.themeEngine.js

         for (n in th.target) {
             th.target[n] = this.target.css(n);
         }
-        if (this.title.show) {
+        if (this.title.show && this.title._elem) {
             for (n in th.title) {
                 th.title[n] = this.title._elem.css(n);
             }
         if (th.grid.backgroundColor == null && this.grid.background != null) {
             th.grid.backgroundColor = this.grid.background;
         }
-        if (this.legend.show) {
+        if (this.legend.show && this.legend._elem) {
             for (n in th.legend) {
                 th.legend[n] = this.legend._elem.css(n);
             }
         }
         var s;
+        
         for (i=0; i<this.series.length; i++) {
             s = this.series[i];
             if (s.renderer.constructor == $.jqplot.LineRenderer) {
                 th.series[i][n] = s[n];
             }
         }
-        this.themeEngine.add(th);
+        var a, ax, axis1;
+        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) {
+                    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);
+                }
+            }
+        }
+        this.themeEngine._add(th);
         this.themeEngine.activeTheme  = this.themeEngine.themes[th._name];
-        
     };
     
     $.jqplot.ThemeEngine.prototype.get = function(name) {
     
     // change active theme to theme named 'name'.
     $.jqplot.ThemeEngine.prototype.activate = function(plot, name) {
+        // sometimes need to redraw whole plot.
+        var redrawPlot = false;
         if (!name && this.activeTheme && this.activeTheme._name) {
             name = this.activeTheme._name;
         }
         else {
             var th = this.themes[name];
             this.activeTheme = th;
+            var val;
+            for (axname in th.axes) {
+                var axis = plot.axes[axname];
+                if (axis.show) {
+                    var thax = th.axes[axname];
+                    val = (th.axesStyles.borderColor != null) ? th.axesStyles.borderColor : thax.borderColor;
+                    if (val != null) {
+                        axis.borderColor = val;
+                        redrawPlot = true;
+                    }
+                    val = (th.axesStyles.borderWidth != null) ? th.axesStyles.borderWidth : thax.borderWidth;
+                    if (val != null) {
+                        axis.borderWidth = val;
+                        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]
+                            }
+                            if (val != null) {
+                                if (axis.tickRenderer == $.jqplot.CanvasAxisTickRenderer) {
+                                    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;
+                                }
+                            }
+                        }
+
+                    }
+                }
+            }
+            
+            
             for (var n in th.grid) {
-                plot.grid[n] = th.grid[n];
+                if (th.grid[n] != null) {
+                    plot.grid[n] = th.grid[n];
+                }
             }
-            plot.grid.draw();
+            if (!redrawPlot) {
+                plot.grid.draw();
+            }
             for (n in th.target) {
-                plot.target.css(n, th.target[n]);
+                if (th.target[n] != null) {
+                    plot.target.css(n, th.target[n]);
+                }
             }
             if (plot.legend.show) { 
                 for (n in th.legend) {
-                    plot.legend._elem.css(n, th.legend[n]);
+                    if (th.legend[n] != null) {
+                        plot.legend._elem.css(n, th.legend[n]);
+                    }
                 }
             }
             if (plot.title.show) {
                 for (n in th.title) {
-                    plot.title._elem.css(n, th.title[n]);
+                    if (th.title[n] != null) {
+                        plot.title._elem.css(n, th.title[n]);
+                    }
                 }
             }
             var i;
             for (i=0; i<th.series.length; i++) {
                 for (n in th.series[i]) {
-                    plot.series[i][n] = th.series[i][n];
+                    val = (th.seriesStyles[n] != null) ? th.seriesStyles[n] : th.series[i][n];
+                    if (val != null) {
+                        plot.series[i][n] = val;
+                    }
                 }
-                plot.drawSeries(th.series[i], i);
+                if (!redrawPlot) {
+                    plot.drawSeries(th.series[i], i);
+                }
+            }
+            
+            if (redrawPlot) {
+                plot.target.empty();
+                plot.draw();
             }
         }
         
     };
     
-    $.jqplot.ThemeEngine.prototype.add = function(theme, name) {
+    $.jqplot.ThemeEngine.prototype._add = function(theme, name) {
         if (name) {
             theme._name = name;
         }
+        if (!theme._name) {
+            theme._name = Date.parse(new Date());
+        }
         if (!this.themes.hasOwnProperty(theme._name)) {
             this.themes[theme._name] = theme;
         }
     
     // delete the names theme, return true on success, false on failure.
     $.jqplot.ThemeEngine.prototype.remove = function(name) {
+        if (name == 'default') return false;
         return delete this.themes[name];
     };
     
-    // create and return a copy of the current active theme.
-    $.jqplot.ThemeEngine.prototype.newTheme = function(name) {
+    // create a copy of the default theme and return it theme.
+    $.jqplot.ThemeEngine.prototype.newTheme = function(name, obj) {
+        if (typeof(name) == 'object') {
+            obj = obj || name;
+            name = null;
+        }
         name = name || Date.parse(new Date());
         // var th = new $.jqplot.Theme(name);
-        var th = $.extend(true, {}, this.activeTheme);
-        th._name = name;
-        this.add(th);
-        return th;      
+        var th = this.copy(this.themes.default._name, name);
+        merge(th, obj);
+        return th;
     };
     
+    // function clone(obj){
+    //     if(obj == null || typeof(obj) != 'object'){
+    //         return obj;
+    //     }
+    // 
+    //     var temp = new obj.constructor(); // changed (twice)
+    //     for(var key in obj){
+    //         temp[key] = clone(obj[key]);
+    //     }   
+    //     return temp;
+    // }
+    
+    function clone(obj) {
+        return eval(obj.toSource());
+    }
+    
+    $.jqplot.clone = clone;
+    
+    function merge(obj1, obj2) {
+        if (obj2 ==  null || typeof(obj2) != 'object') {
+            return;
+        }
+        if (typeof(obj1) != 'object'){
+            obj1 = {};
+        }
+        for (var key in obj2) {
+            if (typeof(obj2[key]) == 'object') {
+                if (!obj1[key]) {
+                    obj1[key] = {};
+                }
+                merge(obj1[key], obj2[key]);
+            }
+            else {
+                obj1[key] = obj2[key];
+            }
+        }
+    }
+    
+    $.jqplot.merge = merge;
+    
     $.jqplot.ThemeEngine.prototype.rename = function (oldName, newName) {
         if (this.themes.hasOwnProperty(newName)) {
-            throw new Error ("New name already in use.");
+            throw new Error ("jqplot.ThemeEngine Error: New name already in use.");
         }
         else if (this.themes.hasOwnProperty(oldName)) {
             var th = this.copy (oldName, newName);
     };
     
     $.jqplot.ThemeEngine.prototype.copy = function (sourceName, targetName, obj) {
-        if (this.themes.hasOwnProperty(sourceName) && !this.themes.hasOwnProperty(targetName)) {
-            // var th = new $.jqplot.Theme(targetName);
-            var th = $.extend(true, {}, this.themes[sourceName], obj);
-            th._name = targetName;
-            this.add(th);
-            return th;
+        if (!this.themes.hasOwnProperty(sourceName)) {
+            var s = "jqplot.ThemeEngine Error: Source name invalid";
+            throw new Error(s);
+        }
+        if (this.themes.hasOwnProperty(targetName)) {
+            var s = "jqplot.ThemeEngine Error: Target name invalid";
+            throw new Error(s);
         }
         else {
-            throw new Error("jqplot.ThemeEngine Error: Source or target name invalid");
+            var th = eval(this.themes[sourceName].toSource());
+            th._name = targetName;
+            merge (th, obj);
+            this._add(th);
+            return th;
         }
     };
     
         this._name = '';
         this.autoHighlightColors = true;
         this.target = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null,
             backgroundColor: null
         };
         this.legend = {
             fontWeight: null,
             paddingBottom: null
         };
+        this.seriesStyles = {};
         this.series = [];
         this.grid = {
             drawGridlines: null,
             borderWidth: null,
             shadow: null
         };
-        this.axesTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.xaxisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.yaxisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.x2axisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y2axisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y3axisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y4axisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y5axisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y6axisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y7axisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y8axissTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y9axisTicks = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.axisLabels = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.xaxisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.yaxisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.x2axisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y2axisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y3axisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y4axisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y5axisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y6axisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y7axisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y8axisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        this.y9axisLabel = {
-            color: null,
-            fontFamily: null,
-            fontSize: null,
-            fontWeight: null
-        };
-        
+        this.axesStyles = {};
+        this.axes = {};
         if (typeof(obj) == 'string') {
             this._name = obj;
         }
         else if(typeof(obj) == 'object') {
-            $.extend(true, this, obj);
+            $.jqplot.merge(this, obj);
         }
     };
     
+    var AxisProperties = function() {
+        this.borderColor = null;
+        this.borderWidth = null;
+        this.ticks = new AxisTicks();
+        this.label = new AxisLabel();
+    }
+    
+    var AxisTicks = function() {
+        this.show = null;
+        this.showGridline = null;
+        this.showLabel = null;
+        this.showMark = null;
+        this.size = null;
+        this.color = null;
+        this.whiteSpace = null;
+        this.fontSize = null;
+        this.fontFamily = null;
+        this.fontWeight = null;
+    }
+    
+    var AxisLabel = function() {
+        this.color = null;
+        this.whiteSpace = null;
+        this.fontSize = null;
+        this.fontFamily = null;
+        this.fontWeight = null;
+    }
+    
     var LineSeriesProperties = function() {
         this.color=null;
         this.lineWidth=null;

src/jquery.jqplot.css

 
 td.jqplot-table-legend > div {
     border: 1px solid #cccccc;
-    padding:0.2em;
+    padding:1px;
 }
 
 div.jqplot-table-legend-swatch {
     width:0px;
     height:0px;
-    border-top-width: 0.35em;
-    border-bottom-width: 0.35em;
-    border-left-width: 0.6em;
-    border-right-width: 0.6em;
+    border-top-width: 5px;
+    border-bottom-width: 5px;
+    border-left-width: 6px;
+    border-right-width: 6px;
     border-top-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;

src/plugins/jqplot.canvasAxisTickRenderer.js

         this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif';
         // prop: fontSize
         // CSS spec for font size.
-        this.fontSize = '11px';
+        this.fontSize = '10pt';
         // prop: fontWeight
         // CSS spec for fontWeight
         this.fontWeight = 'normal';
         // true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
         // If true, tick label will be drawn with canvas tag native support for fonts.
         // If false, tick 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 

src/plugins/jqplot.categoryAxisRenderer.js

             // position it and the labels correctly on the plot.
             var dim=0;
             var temp;
+            // Added for theming.
+            if (this._elem) {
+                this._elem.empty();
+            }
             
-            this._elem = $('<div class="jqplot-axis jqplot-'+this.name+'" style="position:absolute;"></div>');
+            this._elem = this._elem || $('<div class="jqplot-axis jqplot-'+this.name+'" style="position:absolute;"></div>');
             
             if (this.name == 'xaxis' || this.name == 'x2axis') {
                 this._elem.width(this._plotDimensions.width);