1. stringfellow
  2. jqplot

Commits

cleonello  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.

  • Participants
  • Parent commits 79738c2
  • Branches default

Comments (0)

Files changed (3)

File examples/barTest.js

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

File examples/meterGauge.html

View file
     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'
            }
        }
    });

File src/plugins/jqplot.meterGaugeRenderer.js

View file
         // 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