Added support for specifying tick label sizes

git-svn-id: https://flot.googlecode.com/svn/trunk@62 1e0a6537-2640-0410-bfb7-f154510ff394

API.txt

@@ -152,6 +152,9 @@ Customizing the axes
     min: null or number
     max: null or number
     autoscaleMargin: null or number
+    labelWidth: null or number
+    labelHeight: null or number
+
     ticks: null or number or ticks array or (fn: range -> ticks array)
     tickSize: number or array
     minTickSize: number or array
@@ -175,6 +178,10 @@ specified, the plot will furthermore extend the axis end-point to the
 nearest whole tick. The default value is "null" for the x axis and
 0.02 for the y axis which seems appropriate for most cases.
 
+"labelWidth" and "labelHeight" specifies the maximum size of the tick
+labels in pixels. They're useful in case you need to align several
+plots.
+
 The rest of the options deal with the ticks.
 
 If you don't specify any ticks, a tick generator algorithm will make

NEWS.txt

 Flot x.x
 --------
 
+Added support for specifying the size of tick labels (axis.labelWidth,
+axis.labelHeight). Useful for specifying a max label size to keep
+multiple plots aligned.
+
 Fixed a bug in calculating spacing around the plot (reported by timothytoe).
 
 

jquery.flot.js

@@ -33,6 +33,8 @@
                 autoscaleMargin: null, // margin in % to add if auto-setting min/max
                 ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
                 tickFormatter: null, // fn: number -> string
+                labelWidth: null, // size of tick labels in pixels
+                labelHeight: null,
                 
                 // mode specific options
                 tickDecimals: null, // no. of decimals, null means auto
@@ -85,7 +87,6 @@
             target = target_,
             xaxis = {}, yaxis = {},
             plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
-            yLabelMaxWidth = 0, yLabelMaxHeight = 0, xLabelBoxWidth = 0,
             canvasWidth = 0, canvasHeight = 0,
             plotWidth = 0, plotHeight = 0,
             hozScale = 0, vertScale = 0,
@@ -621,6 +622,10 @@
                 axis.tickFormatter = function (v, axis) { return "" + axisOptions.tickFormatter(v, axis); };
             else
                 axis.tickFormatter = formatter;
+            if (axisOptions.labelWidth != null)
+                axis.labelWidth = axisOptions.labelWidth;
+            if (axisOptions.labelHeight != null)
+                axis.labelHeight = axisOptions.labelHeight;
         }
         
         function extendXRangeIfNeededByBar() {
@@ -679,22 +684,31 @@
         }
         
         function setSpacing() {
-            // calculate y label dimensions
             var i, labels = [], l;
-            for (i = 0; i < yaxis.ticks.length; ++i) {
-                l = yaxis.ticks[i].label;
-                if (l)
-                    labels.push('<div class="tickLabel">' + l + '</div>');
-            }
+            if (yaxis.labelWidth == null || yaxis.labelHeight == null) {
+                // calculate y label dimensions
+                for (i = 0; i < yaxis.ticks.length; ++i) {
+                    l = yaxis.ticks[i].label;
+                    if (l)
+                        labels.push('<div class="tickLabel">' + l + '</div>');
+                }
+                
+                if (labels.length > 0) {
+                    var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller">'
+                                     + labels.join("") + '</div>').appendTo(target);
+                    if (yaxis.labelWidth == null)
+                        yaxis.labelWidth = dummyDiv.width();
+                    if (yaxis.labelHeight == null)
+                        yaxis.labelHeight = dummyDiv.find("div").height();
+                    dummyDiv.remove();
+                }
 
-            if (labels.length > 0) {
-                var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller">'
-                                 + labels.join("") + '</div>').appendTo(target);
-                yLabelMaxWidth = dummyDiv.width();
-                yLabelMaxHeight = dummyDiv.find("div").height();
-                dummyDiv.remove();
+                if (yaxis.labelWidth == null)
+                    yaxis.labelWidth = 0;
+                if (yaxis.labelHeight == null)
+                    yaxis.labelHeight = 0;
             }
-
+                
             var maxOutset = options.grid.borderWidth / 2;
             if (options.points.show)
                 maxOutset = Math.max(maxOutset, options.points.radius + options.points.lineWidth/2);
@@ -705,34 +719,37 @@
 
             plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = maxOutset;
 
-            if (yLabelMaxWidth > 0)
-                plotOffset.left += yLabelMaxWidth + options.grid.labelMargin;
+            if (yaxis.labelWidth > 0)
+                plotOffset.left += yaxis.labelWidth + options.grid.labelMargin;
             plotWidth = canvasWidth - plotOffset.left - plotOffset.right;
 
             // set width for labels; to avoid measuring the widths of
             // the labels, we construct fixed-size boxes and put the
             // labels inside them, the fixed-size boxes are easy to
             // mid-align
-            xLabelBoxWidth = plotWidth / 6;
-            
-            // measure x label heights
-            labels = [];
-            for (i = 0; i < xaxis.ticks.length; ++i) {
-                l = xaxis.ticks[i].label;
-                if (l)
-                    labels.push('<span class="tickLabel" width="' + xLabelBoxWidth + '">' + l + '</span>');
-            }
-
-            var xLabelMaxHeight = 0;
-            if (labels.length > 0) {
-                var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller">'
-                                 + labels.join("") + '</div>').appendTo(target);
-                xLabelMaxHeight = dummyDiv.height();
-                dummyDiv.remove();
+            if (xaxis.labelWidth == null)
+                xaxis.labelWidth = plotWidth / 6;
+
+            if (xaxis.labelHeight == null) {
+                // measure x label heights
+                labels = [];
+                for (i = 0; i < xaxis.ticks.length; ++i) {
+                    l = xaxis.ticks[i].label;
+                    if (l)
+                        labels.push('<span class="tickLabel" width="' + xaxis.labelWidth + '">' + l + '</span>');
+                }
+                
+                xaxis.labelHeight = 0;
+                if (labels.length > 0) {
+                    var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller">'
+                                     + labels.join("") + '</div>').appendTo(target);
+                    xaxis.labelHeight = dummyDiv.height();
+                    dummyDiv.remove();
+                }
             }
-
-            if (xLabelMaxHeight > 0)
-                plotOffset.bottom += xLabelMaxHeight + options.grid.labelMargin;
+                
+            if (xaxis.labelHeight > 0)
+                plotOffset.bottom += xaxis.labelHeight + options.grid.labelMargin;
             
             plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top;
             hozScale = plotWidth / (xaxis.max - xaxis.min);
@@ -853,7 +870,7 @@
                 tick = xaxis.ticks[i];
                 if (!tick.label || tick.v < xaxis.min || tick.v > xaxis.max)
                     continue;
-                html += '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + options.grid.labelMargin) + 'px;left:' + (plotOffset.left + tHoz(tick.v) - xLabelBoxWidth/2) + 'px;width:' + xLabelBoxWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
+                html += '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + options.grid.labelMargin) + 'px;left:' + (plotOffset.left + tHoz(tick.v) - xaxis.labelWidth/2) + 'px;width:' + xaxis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
             }
             
             // do the y-axis
@@ -861,7 +878,7 @@
                 tick = yaxis.ticks[i];
                 if (!tick.label || tick.v < yaxis.min || tick.v > yaxis.max)
                     continue;
-                html += '<div style="position:absolute;top:' + (plotOffset.top + tVert(tick.v) - yLabelMaxHeight/2) + 'px;left:0;width:' + yLabelMaxWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>";
+                html += '<div style="position:absolute;top:' + (plotOffset.top + tVert(tick.v) - yaxis.labelHeight/2) + 'px;left:0;width:' + yaxis.labelWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>";
             }
 
             html += '</div>';