Commits

cleonello  committed f1e6d95

Working on autoscaling of bubbles and axes.

  • Participants
  • Parent commits 5c8d111

Comments (0)

Files changed (3)

File examples/bubblechart.html

 $(document).ready(function(){
       $.jqplot.config.enablePlugins = true;
 
-   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']];
+   s1 = [[0.6, 2.6, 12, 'Ford'], [0.5, 3, 16, 'GM'], [1.3, 2.2, 7], [1.2, 1.2, 5], [2.7, 1.5, 3], [1.7, 1.2, 3], [1.6, 2.9, 17], [0.3, 0.6, 11], [1.3, 2.2, 7], [1.1, 1.3, 10, 'Nissan'], [1, 1, 20, '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']];
 
    plot1 = $.jqplot('chart1',[s1],{
        sortData: false,
        seriesDefaults:{
            renderer: $.jqplot.BubbleRenderer,
            rendererOptions: {
-               varyBubbleColors: true
+               varyBubbleColors: true,
+               autoscaleCoefficient: 0,
+               autoscaleMultiplier: 0.7,
+               autoscaleBubbles: true
            },
            shadow: true,
            bubbleAlpha: 0.7,
            shadowAlpha: 0.04
+       },
+       axesDefaults: {
+           // pad: 1.4
        }
    });
    
   </head>
   <body>
 <?php include "nav.inc"; ?>
-<div id="chart1" class="plot" style="width:400px;height:300px;"></div>
+<div id="chart1" class="plot" style="width:500px;height:300px;"></div>
   </body>
 </html>

File src/jquery.jqplot.css

 
 div.jqplot-bubble-label {
     font-size: 0.8em;
+    background: rgba(85%, 85%, 85%, 0.6);
 }

File src/plugins/jqplot.bubbleRenderer.js

         // False will use the radius value as provided as a raw pixel value for
         // bubble radius.
         this.autoscaleBubbles = true;
-        // prop: autoscaleFactor
-        // Scaling factor applied if autoscaleBubbles is true to make the bubbles smaller or larger.
-        this.autoscaleFactor = 1.0;
+        // prop: autoscaleMultiplier
+        // 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;
         // prop: escapeHtml
         // True to escape html in bubble label text.
         this.escapeHtml = true;
         if (this.autoscaleBubbles) {
             for (var i=0; i<l; i++) {
                 val = radii[i]/maxr;
-                r = this.autoscaleFactor * dim/ 3 / Math.pow(l, 0.5);
+                r = this.autoscaleMultiplier * dim / 6 * Math.pow(l*3, this.autoscaleCoefficient);
                 this.gridData[i][2] = r * val;
             }
         }
         if (this.autoscaleBubbles) {
             for (var i=0; i<l; i++) {
                 val = radii[i]/maxr;
-                r = this.autoscaleFactor * dim / 3 / Math.pow(l, 0.5);
+                r = this.autoscaleMultiplier * dim / 6 * Math.pow(l*3, this.autoscaleCoefficient);
                 gd[i][2] = r * val;
             }
         }
         var span = db.max - db.min;
         var dim = (this.name == 'xaxis' || this.name == 'x2axis') ? this._plotDimensions.width : this._plotDimensions.height;
         var adjust = [];
-        // var fact = Math.pow(dim, 0.6)/20;
-        var fact = 50/Math.sqrt(dim/10);
-        var fact = 0.2 * Math.pow(dim, 0.2);
-        var fact = .001;
         var fact = 1.3*Math.pow(Math.E, -.002928*dim);
 
         for (var i=0; i<this._series.length; i++) {
                 var r, val, maxr = arrayMax(radii);
                 var l = s.data.length;
                 for (var j=0; j<l; j++) {
-                    val = radii[j]/maxr;
-                    ad[j] = s.autoscaleFactor / Math.sqrt(l) * val * span * fact;
+                    ad[j] = s.autoscaleMultiplier / 300 * Math.pow(dim, 0.6) * Math.pow(l*3, s.autoscaleCoefficient) * Math.pow(span, 2.3);
                 }
             }
+            
         }