Commits

Anonymous committed 22d923f

Improved highlighting. Fixes to bubble canvas for IE rendering. More examples.

  • Participants
  • Parent commits 01a1c45

Comments (0)

Files changed (4)

examples/bubblechart.html

 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]]);
+console.log(makes.length);
+var l = 3 + Math.ceil(Math.random()*(makes.length-20));
+for (var i=0; i<7; i++) {
+    arr.push([Math.round(Math.random() * 50), Math.round(Math.random() * 150), Math.round(400 + Math.random() * 900), makes[i]]);
 }
 
+// console.log(arr);
+
 
    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']];
        seriesDefaults:{
            renderer: $.jqplot.BubbleRenderer,
            rendererOptions: {
-               // autoscaleCoefficient: -.1,
-               autoscaleMultiplier: 0.7,
+               autoscalePointsFactor: -.15,
+               // autoscaleMultiplier: 0.7,
                // autoscaleBubbles: false,
                // highlightMouseDown: false
                // varyBubbleColors: false
+               bubbleAlpha: 0.6,
+               highlightAlpha: 0.8
            },
            highlightMouseDown: true,
            shadow: true,
-           bubbleAlpha: 0.7,
            shadowAlpha: 0.05
        },
        axesDefaults: {
   </head>
   <body>
 <?php include "nav.inc"; ?>
-<div id="chart1" class="plot" style="width:500px;height:300px;"></div>
+<div id="chart1" class="plot" style="width:600px;height:400px;"></div>
   </body>
 </html>

src/jqplot.core.js

                     case $.jqplot.BubbleRenderer:
                         x = gridpos.x;
                         y = gridpos.y;
+                        var ret = null;
                         
                         if (s.show) {
                             for (var j=0; j<s.gridData.length; j++) {
                                 d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) * (y-p[1]) );
                                 if (d <= p[2] && (d <= d0 || d0 == null)) {
                                    d0 = d;
-                                   return {seriesIndex: i, pointIndex:j, gridData:p, data:s.data[j]};
+                                   ret = {seriesIndex: i, pointIndex:j, gridData:p, data:s.data[j]};
                                 }
                             }
+                            if (ret != null) return ret;
                         }
                         break;
                         

src/jquery.jqplot.css

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

src/plugins/jqplot.bubbleRenderer.js

         // Multiplier applied to the bubble autoscaling factor if autoscaleBubbles is true.
         this.autoscaleMultiplier = 1.0;
         // prop: autoscaleCoefficient
-        // Coefficient for the exponent of the autoscaling equation.
-        // This how the number of bubbles in the series affects the scale of the bubbles.
-        // This should be a negative number.  The smaller the coefficient, the more the bubbles
-        // will shrink as more points are added to the series. A value of 0 disables bubble scaling
-        // based on number of points in the series.
-        this.autoscaleCoefficient = 0;
+        // Factor which decreases bubble size based on how many bubbles on on the chart.
+        // 0 means no adjustment for number of bubbles.  Negative values will decrease
+        // size of bubbles as more bubbles are added.  Values between 0 and -0.2
+        // should work well.
+        this.autoscalePointsFactor = -0.07;
         // prop: escapeHtml
         // True to escape html in bubble label text.
         this.escapeHtml = true;
         this.highlightColors = [];
         // prop: bubbleAlpha
         // Alpha transparency to apply to all bubbles in this series.
-        this.bubbleAlpha;
+        this.bubbleAlpha = 1.0;
+        // prop: highlightAlpha
+        // Alpha transparency to apply when highlighting bubble.
+        // Set to value of bubbleAlpha by default.
+        this.highlightAlpha = null;
         // prop: bubbleGradients
         // True to color the bubbles with gradient fills instead of flat colors.
         this.bubbleGradients = false;
         
         $.extend(true, this, options);
         
+        if (this.highlightAlpha == null) {
+            this.highlightAlpha = this.bubbleAlpha;
+            if (this.bubbleGradients) {
+                this.highlightAlpha = 0.35;
+            }
+        }
+        
+        this.autoscaleMultiplier = this.autoscaleMultiplier * Math.pow(this.data.length, this.autoscalePointsFactor);
+        
         // index of the currenty highlighted point, if any
         this._highlightedPoint = null;
         
                 }
             }
             
-            if (color && this.bubbleAlpha != null) {
+            if (color && this.bubbleAlpha < 1.0) {
                 comps = $.jqplot.getColorComponents(color);
                 color = 'rgba('+comps[0]+', '+comps[1]+', '+comps[2]+', '+this.bubbleAlpha+')';
             }
                     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.7)');
+                this.highlightColors.push('rgba('+newrgb[0]+','+newrgb[1]+','+newrgb[2]+', '+this.highlightAlpha+')');
             }
         }
         
         if (this.autoscaleBubbles) {
             for (var i=0; i<l; i++) {
                 val = radii[i]/maxr;
-                r = this.autoscaleMultiplier * dim / 6 * Math.pow(l*3, this.autoscaleCoefficient);
+                r = this.autoscaleMultiplier * dim / 6;
                 this.gridData[i][2] = r * val;
             }
         }
         if (this.autoscaleBubbles) {
             for (var i=0; i<l; i++) {
                 val = radii[i]/maxr;
-                r = this.autoscaleMultiplier * dim / 6 * Math.pow(l*3, this.autoscaleCoefficient);
+                r = this.autoscaleMultiplier * dim / 6;
                 gd[i][2] = r * val;
             }
         }
                 depth = 1 + Math.ceil(gd[2]/15);
                 canvasRadius += offset*depth;
             }
-            this.bubbleCanvases[idx] = el = new $.jqplot.BubbleCanvas(gd[0], gd[1], canvasRadius);
-            var ctx = el._ctx;
+            this.bubbleCanvases[idx] = new $.jqplot.BubbleCanvas();
+            this.canvas._elem.append(this.bubbleCanvases[idx].createElement(gd[0], gd[1], canvasRadius));
+            this.bubbleCanvases[idx].setContext();
+            var ctx = this.bubbleCanvases[idx]._ctx;
             var x = ctx.canvas.width/2;
             var y = ctx.canvas.height/2;
             if (this.shadow) {
                 this.renderer.shadowRenderer.draw(ctx, [x, y, gd[2], 0, 2*Math.PI], {offset: offset, depth: depth});
             }
-            el.draw(gd[2], color, this.bubbleGradients, this.shadowAngle/180*Math.PI);
-            this.canvas._elem.append(el._elem);
+            this.bubbleCanvases[idx].draw(gd[2], color, this.bubbleGradients, this.shadowAngle/180*Math.PI);
             
             // now draw label.
             if (t) {
         return this._ctx;
     };
     
-    $.jqplot.BubbleCanvas = function(x, y, r, rr, color) {
+    $.jqplot.BubbleCanvas = function() {
         $.jqplot.ElemContainer.call(this);
         this._ctx;
-        var el;
-        if (x != null && y != null && r != null) {
-            el = this.createElement(x, y, r);
-            if (!this._ctx) this._ctx = this.setContext();
-        }
     };
     
     $.jqplot.BubbleCanvas.prototype = new $.jqplot.ElemContainer();
         var x = ctx.canvas.width/2;
         var y = ctx.canvas.height/2;
         ctx.save();
-        if (gradients) {
+        if (gradients && !$.browser.msie) {
             r = r*1.04;
             var comps = $.jqplot.getColorComponents(color);
             var colorinner = 'rgba('+Math.round(comps[0]+0.8*(255-comps[0]))+', '+Math.round(comps[1]+0.8*(255-comps[1]))+', '+Math.round(comps[2]+0.8*(255-comps[2]))+', '+comps[3]+')';
             var radgrad = ctx.createRadialGradient(xinner, yinner, rinner, x, y, r);
             radgrad.addColorStop(0, colorinner);
             radgrad.addColorStop(0.93, color);
-            radgrad.addColorStop(0.96, 'rgba(0, 0, 0, 0)');
-            radgrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
+            radgrad.addColorStop(0.96, colorend);
+            radgrad.addColorStop(1, colorend);
             // radgrad.addColorStop(.98, colorend);
             ctx.fillStyle = radgrad;
             ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height);
         }
         else {
             ctx.fillStyle = color;
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1;
             ctx.beginPath();
             var ang = 2*Math.PI
-            ctx.arc(x, y, r, 0, ang, true);
+            ctx.arc(x, y, r, 0, ang, 0);
             ctx.closePath();
             ctx.fill();
         }
         // var dim = (this.name == 'xaxis' || this.name == 'x2axis') ? this._plotDimensions.width : this._plotDimensions.height;
         var dim = Math.min(this._plotDimensions.width, this._plotDimensions.height);
         
-        var minfact = minRatio * minMult/4 * span;
-        var maxfact = maxRatio * maxMult/4 * span;
+        var minfact = minRatio * minMult/3 * span;
+        var maxfact = maxRatio * maxMult/3 * span;
         db.max += maxfact;
         db.min -= minfact;
     };
             r = s.gridData[pidx][2];
         ctx.save();
         ctx.fillStyle = color;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
         ctx.beginPath();
-        ctx.arc(x, y, r, 0, 2*Math.PI, true);
+        ctx.arc(x, y, r, 0, 2*Math.PI, 0);
         ctx.closePath();
         ctx.fill();
         ctx.restore();        
         
         if (setopts) {
             options.axesDefaults.renderer = $.jqplot.BubbleAxisRenderer;
+            options.sortData = false;
         }
     }