Skip to content

Commit

Permalink
Added support for specifying tick label sizes
Browse files Browse the repository at this point in the history 
git-svn-id: http://flot.googlecode.com/svn/trunk@62 1e0a6537-2640-0410-bfb7-f154510ff394
  • Loading branch information
olau@iola.dk committed Mar 10, 2008
1 parent 57fa8a7 commit e78121a
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 37 deletions.
7 changes: 7 additions & 0 deletions API.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
4 changes: 4 additions & 0 deletions NEWS.txt
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
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).


Expand Down
91 changes: 54 additions & 37 deletions jquery.flot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -853,15 +870,15 @@
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
for (i = 0; i < yaxis.ticks.length; ++i) {
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>';
Expand Down

0 comments on commit e78121a

Please sign in to comment.