Commits

cleonello  committed e86f5e8

worked out few more kinks with highlight colors and funnel vertices on redraw.

  • Participants
  • Parent commits e5116e1

Comments (0)

Files changed (5)

File examples/theming.html

 
     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'
-    //        }
-    //     },
-    //    seriesDefaults: {
-    //        renderer: $.jqplot.FunnelRenderer
-    //    }
-    // });
-    // 
+    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,
     //        }
     //    }
     // });
-    // 
-    // plot5 = $.jqplot('chart5',[l3],{
-    //    title: 'Pie Chart',
-    //    seriesDefaults: {
-    //        renderer: $.jqplot.PieRenderer
-    //    }
-    // });
+        
+        plot5 = $.jqplot('chart5',[l1],{
+           title: 'Pie Chart',
+           seriesDefaults: {
+               renderer: $.jqplot.PieRenderer
+           },
+           legend: {
+               show: true
+           }
+        });
     // 
     // plot6 = $.jqplot('chart6',[l2, l3],{
     //    title: 'Donut Chart',
     //    }
     // });
     // 
-    // 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);
+    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
+            }
+        },
+        axes: {
+            xaxis: {
+                label: {
+                    fontFamily: '"Comic Sans MS", cursive',
+                    textColor: '#C7CC4E'
+                }
+            }
+        }
+    };
+    
+    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 = {
+        title: {
+            fontFamily: 'Times New Roman',
+            textColor: 'black'
+        },
         axesStyles: {
            borderWidth: 0,
            ticks: {
             borderColor: 'black'
         },
         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'}
+            {color: 'red', highlightColors: ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white', 'yellow']},
+            // {color: 'red', highlightColors: []},
+            {color: 'green', highlightColors: []},
+            {color: 'blue', highlightColors: []},
+            {color: 'yellow', highlightColors: 'rgb(255, 245, 185)'}
         ],
         legend: {
             background: 'white',
     
     plot2.themeEngine.add(oldstyle);
     
+    temp = {
+        seriesStyles: {
+            seriesColors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
+            highlightColors: ['lightpink', 'lightsalmon', 'lightyellow', 'lightgreen', 'lightblue', 'mediumslateblue']
+        },
+        legend: {
+            fontSize: '8pt'
+        },
+        title: {
+            fontSize: '18pt'
+        },
+        grid: {
+            backgroundColor: 'rgb(211, 233, 195)'
+        }
+    };
+    
+    uma = new $.jqplot.Theme('uma', temp);
+    plot3.themeEngine.add(uma);
+    plot5.themeEngine.add(uma);
+    // uma = plot3.themeEngine.newTheme('uma', temp);
+    
 });
 
 function switchTheme(plot, theme) {

File src/jqplot.core.js

     
     // extract the r, g, b, a color components out of a css color spec.
     $.jqplot.getColorComponents = function(s) {
+        // check to see if a color keyword.
+        s = $.jqplot.colorKeywordMap[s] || s;
         var rgb = $.jqplot.normalize2rgb(s);
         var pat = /rgba?\( *([0-9]{1,3}\.?[0-9]*%?) *, *([0-9]{1,3}\.?[0-9]*%?) *, *([0-9]{1,3}\.?[0-9]*%?) *,? *([0-9.]* *)?\)/;
         var m = rgb.match(pat);
         ret[3] = parseFloat(m[4]) ? parseFloat(m[4]) : 1.0;
         return ret;
     };
+    
+    $.jqplot.colorKeywordMap = {aliceblue: 'rgb(240, 248, 255)', antiquewhite: 'rgb(250, 235, 215)', aqua: 'rgb( 0, 255, 255)', aquamarine: 'rgb(127, 255, 212)', azure: 'rgb(240, 255, 255)', beige: 'rgb(245, 245, 220)', bisque: 'rgb(255, 228, 196)', black: 'rgb( 0, 0, 0)', blanchedalmond: 'rgb(255, 235, 205)', blue: 'rgb( 0, 0, 255)', blueviolet: 'rgb(138, 43, 226)', brown: 'rgb(165, 42, 42)', burlywood: 'rgb(222, 184, 135)', cadetblue: 'rgb( 95, 158, 160)', chartreuse: 'rgb(127, 255, 0)', chocolate: 'rgb(210, 105, 30)', coral: 'rgb(255, 127, 80)', cornflowerblue: 'rgb(100, 149, 237)', cornsilk: 'rgb(255, 248, 220)', crimson: 'rgb(220, 20, 60)', cyan: 'rgb( 0, 255, 255)', darkblue: 'rgb( 0, 0, 139)', darkcyan: 'rgb( 0, 139, 139)', darkgoldenrod: 'rgb(184, 134, 11)', darkgray: 'rgb(169, 169, 169)', darkgreen: 'rgb( 0, 100, 0)', darkgrey: 'rgb(169, 169, 169)', darkkhaki: 'rgb(189, 183, 107)', darkmagenta: 'rgb(139, 0, 139)', darkolivegreen: 'rgb( 85, 107, 47)', darkorange: 'rgb(255, 140, 0)', darkorchid: 'rgb(153, 50, 204)', darkred: 'rgb(139, 0, 0)', darksalmon: 'rgb(233, 150, 122)', darkseagreen: 'rgb(143, 188, 143)', darkslateblue: 'rgb( 72, 61, 139)', darkslategray: 'rgb( 47, 79, 79)', darkslategrey: 'rgb( 47, 79, 79)', darkturquoise: 'rgb( 0, 206, 209)', darkviolet: 'rgb(148, 0, 211)', deeppink: 'rgb(255, 20, 147)', deepskyblue: 'rgb( 0, 191, 255)', dimgray: 'rgb(105, 105, 105)', dimgrey: 'rgb(105, 105, 105)', dodgerblue: 'rgb( 30, 144, 255)', firebrick: 'rgb(178, 34, 34)', floralwhite: 'rgb(255, 250, 240)', forestgreen: 'rgb( 34, 139, 34)', fuchsia: 'rgb(255, 0, 255)', gainsboro: 'rgb(220, 220, 220)', ghostwhite: 'rgb(248, 248, 255)', gold: 'rgb(255, 215, 0)', goldenrod: 'rgb(218, 165, 32)', gray: 'rgb(128, 128, 128)', grey: 'rgb(128, 128, 128)', green: 'rgb( 0, 128, 0)', greenyellow: 'rgb(173, 255, 47)', honeydew: 'rgb(240, 255, 240)', hotpink: 'rgb(255, 105, 180)', indianred: 'rgb(205, 92, 92)', indigo: 'rgb( 75, 0, 130)', ivory: 'rgb(255, 255, 240)', khaki: 'rgb(240, 230, 140)', lavender: 'rgb(230, 230, 250)', lavenderblush: 'rgb(255, 240, 245)', lawngreen: 'rgb(124, 252, 0)', lemonchiffon: 'rgb(255, 250, 205)', lightblue: 'rgb(173, 216, 230)', lightcoral: 'rgb(240, 128, 128)', lightcyan: 'rgb(224, 255, 255)', lightgoldenrodyellow: 'rgb(250, 250, 210)', lightgray: 'rgb(211, 211, 211)', lightgreen: 'rgb(144, 238, 144)', lightgrey: 'rgb(211, 211, 211)', lightpink: 'rgb(255, 182, 193)', lightsalmon: 'rgb(255, 160, 122)', lightseagreen: 'rgb( 32, 178, 170)', lightskyblue: 'rgb(135, 206, 250)', lightslategray: 'rgb(119, 136, 153)', lightslategrey: 'rgb(119, 136, 153)', lightsteelblue: 'rgb(176, 196, 222)', lightyellow: 'rgb(255, 255, 224)', lime: 'rgb( 0, 255, 0)', limegreen: 'rgb( 50, 205, 50)', linen: 'rgb(250, 240, 230)', magenta: 'rgb(255, 0, 255)', maroon: 'rgb(128, 0, 0)', mediumaquamarine: 'rgb(102, 205, 170)', mediumblue: 'rgb( 0, 0, 205)', mediumorchid: 'rgb(186, 85, 211)', mediumpurple: 'rgb(147, 112, 219)', mediumseagreen: 'rgb( 60, 179, 113)', mediumslateblue: 'rgb(123, 104, 238)', mediumspringgreen: 'rgb( 0, 250, 154)', mediumturquoise: 'rgb( 72, 209, 204)', mediumvioletred: 'rgb(199, 21, 133)', midnightblue: 'rgb( 25, 25, 112)', mintcream: 'rgb(245, 255, 250)', mistyrose: 'rgb(255, 228, 225)', moccasin: 'rgb(255, 228, 181)', navajowhite: 'rgb(255, 222, 173)', navy: 'rgb( 0, 0, 128)', oldlace: 'rgb(253, 245, 230)', olive: 'rgb(128, 128, 0)', olivedrab: 'rgb(107, 142, 35)', orange: 'rgb(255, 165, 0)', orangered: 'rgb(255, 69, 0)', orchid: 'rgb(218, 112, 214)', palegoldenrod: 'rgb(238, 232, 170)', palegreen: 'rgb(152, 251, 152)', paleturquoise: 'rgb(175, 238, 238)', palevioletred: 'rgb(219, 112, 147)', papayawhip: 'rgb(255, 239, 213)', peachpuff: 'rgb(255, 218, 185)', peru: 'rgb(205, 133, 63)', pink: 'rgb(255, 192, 203)', plum: 'rgb(221, 160, 221)', powderblue: 'rgb(176, 224, 230)', purple: 'rgb(128, 0, 128)', red: 'rgb(255, 0, 0)', rosybrown: 'rgb(188, 143, 143)', royalblue: 'rgb( 65, 105, 225)', saddlebrown: 'rgb(139, 69, 19)', salmon: 'rgb(250, 128, 114)', sandybrown: 'rgb(244, 164, 96)', seagreen: 'rgb( 46, 139, 87)', seashell: 'rgb(255, 245, 238)', sienna: 'rgb(160, 82, 45)', silver: 'rgb(192, 192, 192)', skyblue: 'rgb(135, 206, 235)', slateblue: 'rgb(106, 90, 205)', slategray: 'rgb(112, 128, 144)', slategrey: 'rgb(112, 128, 144)', snow: 'rgb(255, 250, 250)', springgreen: 'rgb( 0, 255, 127)', steelblue: 'rgb( 70, 130, 180)', tan: 'rgb(210, 180, 140)', teal: 'rgb( 0, 128, 128)', thistle: 'rgb(216, 191, 216)', tomato: 'rgb(255, 99, 71)', turquoise: 'rgb( 64, 224, 208)', violet: 'rgb(238, 130, 238)', wheat: 'rgb(245, 222, 179)', white: 'rgb(255, 255, 255)', whitesmoke: 'rgb(245, 245, 245)', yellow: 'rgb(255, 255, 0)', yellowgreen: 'rgb(154, 205, 50)'};
         
     // Convienence function that won't hang IE.
     $.jqplot.log = function() {

File src/jqplot.themeEngine.js

                     }
                 }
             }
-            if (ax._label && ax._label._elem) {
+            if (ax._label && ax._label.show) {
                 for (nn in a.label) {
                     // a.label[nn] = ax._label._elem.css(nn);
-                    if (ax._label.hasOwnProperty(nn)) {
+                    if (ax._label[nn]) {
                         a.label[nn] = ax._label[nn];
                     }
                     else if (ax._label._elem){
-                        a.label[nn] = ax._label._elem.css(nn);
+                        if (nn == 'textColor') {
+                            a.label[nn] = ax._label._elem.css('color');
+                        }
+                        else {
+                            a.label[nn] = ax._label._elem.css(nn);
+                        }
                     }
                 }
             }
             borderWidth: null,
             shadow: null
         };
-        this.axesStyles = {};
+        this.axesStyles = {label:{}, ticks:{}};
         this.axes = {};
         if (typeof(obj) == 'string') {
             this._name = obj;

File src/plugins/jqplot.barRenderer.js

         }
         return [nvals, nseries];
     };
-    
 
     function computeHighlightColors (colors) {
         var ret = [];

File src/plugins/jqplot.funnelRenderer.js

         var offx = 0;
         var offy = 0;
         var trans = 1;
+        this._areas = [];
         // var colorGenerator = new this.colorGenerator(this.seriesColors);
         if (options.legendInfo && options.legendInfo.placement == 'inside') {
             var li = options.legendInfo;