Commits

Anonymous committed 81a478b

Fixed bar example for proper handling of mouse down. Added labelPosition option to meter gauge to put label on bottom or inside of gauge.

Comments (0)

Files changed (3)

examples/barTest.js

         captureRightClick: true,
         seriesDefaults:{
             renderer:$.jqplot.BarRenderer,
-            highlightMouseDown: true
+            rendererOptions: {
+                highlightMouseDown: true    
+            }
         },
         legend: {
             show: true,

examples/meterGauge.html

     margin-right: auto;
 }
 
+#chart0 .jqplot-meterGauge-label {
+    font-size: 10pt;
+}
+
 #chart1 .jqplot-meterGauge-tick {
     font-size: 6pt;
 }
     font-size: 10pt;
 }
 
-#chart4 .jqplot-meterGauge-tick, chart4 .jqplot-meterGauge-label {
+#chart4 .jqplot-meterGauge-tick, #chart4 .jqplot-meterGauge-label {
     font-size: 12pt;
 }
 </style>
 
    plot0 = $.jqplot('chart0',[s1],{
        title: 'Network Speed',
+       // title: {
+       //     text: 'Network Speed',
+       //     location: 'n'
+       // },
        seriesDefaults: {
            renderer: $.jqplot.MeterGaugeRenderer,
            rendererOptions: {
-               label: 'MB/s'
+               label: 'MB/s',
+               labelPosition: 'bottom'
            }
        }
    });

src/plugins/jqplot.meterGaugeRenderer.js

         // prop: labelHeightAdjust
         // Number of Pixels to offset the label up (-) or down (+) from its default position.
         this.labelHeightAdjust = 0;
+        // prop: labelPosition
+        // Where to position the label, either 'inside' or 'bottom'.
+        this.labelPosition = 'inside';
         // prop: intervals
         // Array of ranges to be drawn around the gauge.
         // Array of form:
             this.semiCircular = (this.span <= 180) ? true : false;
         }
         this._tickPoints = [];
+        // reference to label element.
+        this._labelElm = null;
         
         // start the gauge at the beginning of the span
         this.startAngle = (90 + (360 - this.span)/2) * Math.PI/180;
             }
         }
         
+        
+            
+        // pre-draw so can get it's dimensions.
+        if (this.label) {
+            this._labelElem = $('<div class="jqplot-meterGauge-label" style="position:absolute;">'+this.label+'</div>');
+            this.canvas._elem.after(this._labelElem);
+        }
+        
         var shadow = (opts.shadow != undefined) ? opts.shadow : this.shadow;
         var showLine = (opts.showLine != undefined) ? opts.showLine : this.showLine;
         var fill = (opts.fill != undefined) ? opts.fill : this.fill;
         var ch = ctx.canvas.height;
         var w = cw - offx - 2 * this.padding;
         var h = ch - offy - 2 * this.padding;
+        if (this.labelPosition == 'bottom') {
+            h -= this._labelElem.outerHeight(true);
+        }
         var mindim = Math.min(w,h);
         var d = mindim;
             
             }
         }
         
+        if (this._labelElem && this.labelPosition == 'bottom') {
+            this._center[1] -= this._labelElem.outerHeight(true);
+        }
+        
         this._radius = this.diameter/2;
         
         this.tickSpacing = 6000/this.diameter;
                 outerea = this.outerEndAngle = ea + overAngle,
                 hubsa = this.hubStartAngle = sa - Math.atan(this.innerPad/this.hubRadius*2),
                 hubea = this.hubEndAngle = ea + Math.atan(this.innerPad/this.hubRadius*2);
-            // draw outer ring
+
             ctx.save();            
             
             ctx.translate(this._center[0], this._center[1]);
             }
             
             // draw the gauge label
-            if (this.label) {
+            if (this.label && this.labelPosition == 'inside') {
                 var l = this._center[0] + this.canvas._offsets.left;
                 var tp = this.tickPadding * (1 - 1/(this.diameter/80+1));
                 var t = 0.5*(this._center[1] + this.canvas._offsets.top - this.hubRadius) + 0.5*(this._center[1] + this.canvas._offsets.top - this.tickOuterRadius + this.tickLength + tp) + this.labelHeightAdjust;
-                var elem = $('<div class="jqplot-meterGauge-label" style="position:absolute;">'+this.label+'</div>');
-                this.canvas._elem.after(elem);
-                l -= elem.outerWidth(true)/2;
-                t -= elem.outerHeight(true)/2;
-                elem.css({left:l, top:t});
+                // this._labelElem = $('<div class="jqplot-meterGauge-label" style="position:absolute;">'+this.label+'</div>');
+                // this.canvas._elem.after(this._labelElem);
+                l -= this._labelElem.outerWidth(true)/2;
+                t -= this._labelElem.outerHeight(true)/2;
+                this._labelElem.css({left:l, top:t});
+            }
+            
+            else if (this.label && this.labelPosition == 'bottom') {
+                var l = this._center[0] + this.canvas._offsets.left - this._labelElem.outerWidth(true)/2;
+                var t = this._center[1] + this.canvas._offsets.top + this.innerPad + 2*this.padding;
+                this._labelElem.css({left:l, top:t});
+                
             }
             
             // draw the intervals