Anonymous avatar Anonymous committed 5c8d111

Added bubble chart labels, shadow styling, and bubbleAlpha option to make all bubbles transparent.

Comments (0)

Files changed (3)

examples/bubblechart.html

 $(document).ready(function(){
       $.jqplot.config.enablePlugins = true;
 
-   s1 = [[0.6, 2.6, 12], [0.5, 3, 16], [1.1, 1.3, 10], [1, 1, 20], [2, 2.5, 11]];
+   s1 = [[0.6, 2.6, 12, 'Ford'], [0.5, 3, 16, 'GM'], [1.1, 1.3, 10, 'Nissan'], [1, 1, 20, 'Chrysler'], [2, 2.5, 11, 'Audi']];
 
    plot1 = $.jqplot('chart1',[s1],{
        sortData: false,
            rendererOptions: {
                varyBubbleColors: true
            },
-           shadow: true
+           shadow: true,
+           bubbleAlpha: 0.7,
+           shadowAlpha: 0.04
        }
    });
    

src/jquery.jqplot.css

     top: 46%;
     display: inline-block;
 }
+
+div.jqplot-bubble-label {
+    font-size: 0.8em;
+}

src/plugins/jqplot.bubbleRenderer.js

         // prop: autoscaleFactor
         // Scaling factor applied if autoscaleBubbles is true to make the bubbles smaller or larger.
         this.autoscaleFactor = 1.0;
+        // prop: escapeHtml
+        // True to escape html in bubble label text.
+        this.escapeHtml = true;
         // array of [point index, radius] which will be sorted in descending order to plot 
         // largest points below smaller points.
         this.radii = [];
+        // prop: bubbleAlpha
+        // Alpha transparency to apply to all bubbles in this series.
+        this.bubbleAlpha;
         $.extend(true, this, options);
+        
+        var sopts = {fill:true, isarc:true, angle:this.shadowAngle, alpha:this.shadowAlpha, closePath:true};
+        
+        this.renderer.shadowRenderer.init(sopts);
+        
         this.canvas = new $.jqplot.DivCanvas();
         this.canvas._plotDimensions = this._plotDimensions;
-        
-        this.renderer.shadowRenderer.isarc = true;
-        this.renderer.shadowRenderer.fill = true;
-        this.renderer.shadowRenderer.closePath = true;
-        this.renderer.shadowRenderer.fillStyle = 'rgba(0, 0, 0, 0.1)';
-        this.renderer.shadowRenderer.offset = 1.5;
-        
-        // plot.postSeriesInitHooks.addOnce(postInit);
     };
     
     // Need to get the radius values into the grid data so can adjust the 
             var idx = this.radii[i][0];
             var t=null;
             var color = null;
-            var el = null;
+            var el = tel = null;
             var d = this.data[idx];
             var gd = this.gridData[idx];
             if (d[3]) {
                     color = this.color;
                 }
             }
+            
+            if (this.bubbleAlpha != null) {
+                comps = $.jqplot.getColorComponents(color);
+                color = 'rgba('+comps[0]+', '+comps[1]+', '+comps[2]+', '+this.bubbleAlpha+')';
+            }
+            
+            // If we're drawing a shadow, expand the canvas dimensions to accomodate.
             var canvasRadius = gd[2];
             var offset, depth;
             if (this.shadow) {
             }
             el.draw(gd[2], color);
             this.canvas._elem.append(el._elem);
+            
+            // now draw label.
+            if (t) {
+                tel = $('<div style="position:absolute;" class="jqplot-bubble-label"></div>');
+                if (this.escapeHtml) {
+                    tel.text(t);
+                }
+                else {
+                    tel.html(t);
+                }
+                this.canvas._elem.append(tel);
+                var h = $(tel).outerHeight();
+                var w = $(tel).outerWidth();
+                var top = gd[1] - 0.5*h;
+                var left = gd[0] - 0.5*w;
+                tel.css({top: top, left: left});
+            }
         }
     };
     
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.