Commits

Anonymous committed 01a1c45

Better handling of labels when highlighting bubbles.

Comments (0)

Files changed (3)

examples/bubblechart.html

 <script language="javascript" type="text/javascript">
 $(document).ready(function(){
       $.jqplot.config.enablePlugins = true;
+      
+var makes = ['Acura', 'Alfa Romeo', 'AM General', 'Aston Martin Lagonda Ltd.', 'Audi', 'BMW', 'Bugatti', 'Buick', 'Cadillac', 'Chevrolet', 'Citroen', 'DaimlerChrysler Corporation', 'Daewoo Motor Co.', 'Delorean Motor Company', 'Dodge', 'Ferrari', 'Fiat', 'Ford Motor Company', 'General Motors', 'GMC', 'Holden', 'Honda', 'Hummer', 'Hyundai', 'Infiniti', 'Isuzu', 'Jaguar Cars', 'Jeep', 'Jensen Motors', 'Kia', 'Laforza', 'Lamborghini', 'Lancia', 'Land Rover', 'Lincoln', 'Lotus Cars', 'Lexus', 'Maserati', 'Mazda', 'Mercedes-Benz', 'Mercury', 'MG', 'Minelli', 'The Mini Cooper', 'Mistubishi', 'Morgan Motor Co.', 'Mosler Automotive', 'Nissan', 'NUMMI ', 'Oldsmobile', 'Opel', 'Packard', 'Panoz', 'Peugeot', 'Pontiac', 'Porsche', 'Proton', 'PSA Peugeot Citroen', 'Renault', 'Rolls-Royce', 'Rover Cars', 'Saab', 'Saturn', 'Shelby American', 'Skoda', 'Spectre Cars', 'Studebaker Motor Company', 'Subaru', 'Suzuki', 'Th!nk', 'Toyota', 'Toyota Motor Manufacturing - Georgetown, KY', 'TVR', 'Vauxhall', 'Volkswagen', 'Volvo', 'Zimmer Motor Cars'];
+
+var arr = []
+for (var i=0; i<12; i++) {
+    arr.push([Math.random() * 50, Math.random() * 150, Math.random() * 1200, makes[i]]);
+}
+
 
    s1 = [[0.6, 2.6, 12, 'Ford'], [0.5, 3, 16, 'GM'], [1.3, 2, 17, 'VW'], [1.2, 1.2, 13, 'Mini'], [2.7, 1.5, 5], [1.7, 1.2, 4], [1.6, 2.9, 3], [0.3, 0.6, 2], [1.3, 2.2, 10, 'Franklin'], [1.1, 1.3, 13, 'Nissan'], [1, 1, 12, 'Chrysler'], [2, 2.5, 11, 'Audi']];
    // s1 = [[0.6, 2.6, 12, 'Ford'], [0.5, 3, 16, 'GM'], [1.1, 1.3, 10, 'Nissan'], [1, 1, 20, 'Chrysler']];
    // s1 = [[23, 42, 1983], [12, 13, 4324, {label:'Ford', color:'indianred'}], [20, 58, 3900], [32, 29, 3425], [44, 55, 878]];
 
-   plot1 = $.jqplot('chart1',[s1],{
+   plot1 = $.jqplot('chart1',[arr],{
        sortData: false,
        title: 'Bubble Test',
        seriesDefaults:{
            renderer: $.jqplot.BubbleRenderer,
            rendererOptions: {
-               varyBubbleColors: true,
-               // autoscaleCoefficient: 0,
-               // autoscaleMultiplier: 0.7,
+               // autoscaleCoefficient: -.1,
+               autoscaleMultiplier: 0.7,
                // autoscaleBubbles: false,
-               highlightMouseDown: false
+               // highlightMouseDown: false
+               // varyBubbleColors: false
            },
+           highlightMouseDown: true,
            shadow: true,
-           // bubbleAlpha: 0.7,
-           shadowAlpha: 0.07
+           bubbleAlpha: 0.7,
+           shadowAlpha: 0.05
        },
        axesDefaults: {
            // pad: 1.4

src/jquery.jqplot.css

 
 div.jqplot-bubble-label {
     font-size: 0.8em;
-    background: rgba(85%, 85%, 85%, 0.5);
+    background: rgba(90%, 90%, 90%, 0.15);
     padding-left: 2px;
     padding-right: 2px;
     color: rgb(20%, 20%, 20%);
 }
+
+div.jqplot-bubble-label.jqplot-bubble-label-highlight {
+    background: rgba(90%, 90%, 90%, 0.7);
+}

src/plugins/jqplot.bubbleRenderer.js

         // the seriesColors array.  False to set each bubble to the color
         // specified on this series.  This has no effect if a css background color
         // option is specified in the renderer css options.
-        this.varyBubbleColors = false;
+        this.varyBubbleColors = true;
         // prop: autoScaleBubbles
         // True to scale the bubble radius based on plot size.
         // False will use the radius value as provided as a raw pixel value for
             }
         }
         
+        if (!this.varyBubbleColors) {
+            this.seriesColors = [this.color];
+        }
+        
         this.colorGenerator = new $.jqplot.ColorGenerator(this.seriesColors);
         
         // set highlight colors if none provided
                     newrgb[j] = (sum > 570) ?  newrgb[j] * 0.8 : newrgb[j] + 0.3 * (255 - newrgb[j]);
                     newrgb[j] = parseInt(newrgb[j], 10);
                 }
-                this.highlightColors.push('rgba('+newrgb[0]+','+newrgb[1]+','+newrgb[2]+', 0.6)');
+                this.highlightColors.push('rgba('+newrgb[0]+','+newrgb[1]+','+newrgb[2]+', 0.7)');
             }
         }
         
         }
         var opts = (options != undefined) ? options : {};
         var shadow = (opts.shadow != undefined) ? opts.shadow : this.shadow;
-        var colorGenerator = (this.varyBubbleColors && this.seriesColors.length) ? new $.jqplot.ColorGenerator(this.seriesColors) : null;
         this.canvas._elem.empty();
         for (var i=0; i<this.radii.length; i++) {
             var idx = this.radii[i][0];
                 }
             }
             
+            // color = (this.varyBubbleColors) ? this.colorGenerator.get(idx) : this.color;
             color = this.colorGenerator.get(idx);
             
             // If we're drawing a shadow, expand the canvas dimensions to accomodate.
     };
     
     function highlight (plot, sidx, pidx) {
+        plot.plugins.bubbleRenderer.highlightLabelCanvas.empty();
         var s = plot.series[sidx];
         var canvas = plot.plugins.bubbleRenderer.highlightCanvas;
         var ctx = canvas._ctx;
         // bring label to front
         if (s.labels[pidx]) {
             plot.plugins.bubbleRenderer.highlightLabel = s.labels[pidx].clone();
-            plot.plugins.bubbleRenderer.highlightCanvas._elem.after(plot.plugins.bubbleRenderer.highlightLabel);
+            plot.plugins.bubbleRenderer.highlightLabel.appendTo(plot.plugins.bubbleRenderer.highlightLabelCanvas);
+            plot.plugins.bubbleRenderer.highlightLabel.addClass('jqplot-bubble-label-highlight');
         }
     }
     
     function unhighlight (plot) {
         var canvas = plot.plugins.bubbleRenderer.highlightCanvas;
         var sidx = plot.plugins.bubbleRenderer.highlightedSeriesIndex;
-        if (plot.plugins.bubbleRenderer.highlightLabel != null) {
-            plot.plugins.bubbleRenderer.highlightLabel.remove();
-            plot.plugins.bubbleRenderer.highlightLabel = null;
-        }
+        plot.plugins.bubbleRenderer.highlightLabelCanvas.empty();
         canvas._ctx.clearRect(0,0, canvas._ctx.canvas.width, canvas._ctx.canvas.height);
         for (var i=0; i<plot.series.length; i++) {
             plot.series[i]._highlightedPoint = null;
         var top = this._gridPadding.top;
         var left = this._gridPadding.left;
         var width = this._plotDimensions.width - this._gridPadding.left - this._gridPadding.right;
-            var height = this._plotDimensions.height - this._gridPadding.top - this._gridPadding.bottom;
+        var height = this._plotDimensions.height - this._gridPadding.top - this._gridPadding.bottom;
+        this.plugins.bubbleRenderer.highlightLabelCanvas.css({top:top, left:left, width:width+'px', height:height+'px'});
 
         this.eventCanvas._elem.before(this.plugins.bubbleRenderer.highlightCanvas.createElement(this._gridPadding, 'jqplot-bubbleRenderer-highlight-canvas', this._plotDimensions));
+        this.eventCanvas._elem.before(this.plugins.bubbleRenderer.highlightLabelCanvas);
         
         var hctx = this.plugins.bubbleRenderer.highlightCanvas.setContext();
     }