Permalink
Browse files

Merge branch 'axis-labels'

  • Loading branch information...
2 parents 1c25ef7 + a966dec commit 219db08d98492ecffc539c5a84e3301a11f030b2 @rfunduk rfunduk committed Jul 31, 2008
Showing with 72 additions and 10 deletions.
  1. +4 −0 API.txt
  2. +2 −2 examples/real-data.html
  3. +2 −1 examples/visitors.html
  4. +64 −7 jquery.flot.js
View
@@ -154,6 +154,7 @@ Customizing the axes
====================
xaxis, yaxis: {
+ label: null or string
mode: null or "time"
min: null or number
max: null or number
@@ -172,6 +173,9 @@ The two axes have the same kind of options. The "mode" option
determines how the data is interpreted, the default of null means as
decimal numbers. Use "time" for time series data, see the next section.
+The "label" option will set an axis label for the specified axis. The
+y-axis uses SVG for browsers that support it and alternate means otherwise.
+
The options "min"/"max" are the precise minimum/maximum value on the
scale. If you don't specify either of them, a value will automatically
be chosen based on the minimum/maximum data values.
View
@@ -83,8 +83,8 @@
if (data.length > 0)
$.plot($("#placeholder"), data, {
- yaxis: { min: 0 },
- xaxis: { tickDecimals: 0 }
+ yaxis: { min: 0, label: "Budget" },
+ xaxis: { tickDecimals: 0, label: "Year" }
});
}
View
@@ -49,7 +49,8 @@
}
var options = {
- xaxis: { mode: "time" },
+ xaxis: { mode: "time", label: "December - February" },
+ yaxis: { label: "Visitors" },
selection: { mode: "x" },
grid: { coloredAreas: weekendAreas }
};
View
@@ -3,16 +3,14 @@
*
* Released under the MIT license.
*/
-RIGHT_SIDE_BUFFER = 10;
-BOTTOM_SIDE_BUFFER = 5;
(function($) {
function Plot(target_, data_, options_) {
// data is on the form:
// [ series1, series2 ... ]
// where series is either just the data as [ [x1, y1], [x2, y2], ... ]
// or { data: [ [x1, y1], [x2, y2], ... ], label: "some label" }
-
+
var series = [];
var options = {
// the color theme used for graphs
@@ -29,6 +27,7 @@ BOTTOM_SIDE_BUFFER = 5;
backgroundOpacity: 0.85 // set to 0 to avoid background
},
xaxis: {
+ label: null,
showLabels: true,
mode: null, // null or "time"
min: null, // min. value to show, null means set automatically
@@ -47,6 +46,7 @@ BOTTOM_SIDE_BUFFER = 5;
timeformat: null // format string to use
},
yaxis: {
+ label: null,
showLabels: true,
autoscaleMargin: 0.02
},
@@ -83,6 +83,7 @@ BOTTOM_SIDE_BUFFER = 5;
showLines: 'both',
showBorder: true,
markers: [],
+ labelFontSize: 16, // default is 16px font size for axis labels
color: "#545454", // primary color used for outline and labels
backgroundColor: null, // null for transparent, else color
tickColor: "#dddddd", // color used for the ticks
@@ -114,7 +115,7 @@ BOTTOM_SIDE_BUFFER = 5;
shadowSize: 4,
sortData: true
};
-
+
var canvas = null, overlay = null, eventHolder = null,
ctx = null, octx = null,
target = target_,
@@ -126,7 +127,10 @@ BOTTOM_SIDE_BUFFER = 5;
hintDiv = null, hintBackground = null,
lastMarker = null,
// dedicated to storing data for buggy standard compliance cases
- workarounds = {};
+ workarounds = {},
+ // buffer constants
+ RIGHT_SIDE_BUFFER = 10,
+ BOTTOM_SIDE_BUFFER = 10;
this.setData = setData;
this.setupGrid = setupGrid;
@@ -160,6 +164,7 @@ BOTTOM_SIDE_BUFFER = 5;
// normalize the data given by the call to $.plot. If we're
// going to be monitoring mousemove's then sort the data
function sortData(x, y) {
+ if (!x || !y) return 0;
if (x[0] > y[0]) return 1;
else if( x[0] < y[0]) return -1;
else return 0;
@@ -374,8 +379,9 @@ BOTTOM_SIDE_BUFFER = 5;
setTicks(yaxis, options.yaxis);
setSpacing();
- insertLabels();
+ insertTickLabels();
insertLegend();
+ insertAxisLabels();
}
function setRange(axis, axisOptions) {
@@ -786,6 +792,7 @@ BOTTOM_SIDE_BUFFER = 5;
if (yaxis.labelWidth > 0 && options.xaxis.showLabels)
plotOffset.left += yaxis.labelWidth + options.grid.labelMargin;
+
plotWidth = canvasWidth - plotOffset.left - plotOffset.right - RIGHT_SIDE_BUFFER;
// set width for labels; to avoid measuring the widths of
@@ -815,6 +822,11 @@ BOTTOM_SIDE_BUFFER = 5;
if (xaxis.labelHeight > 0 && options.yaxis.showLabels)
plotOffset.bottom += xaxis.labelHeight + options.grid.labelMargin;
+
+ // add a bit of extra buffer on the bottom of the graph to account
+ // for the axis label, if there is one
+ if (options.xaxis.label)
+ plotOffset.bottom += BOTTOM_SIDE_BUFFER;
plotHeight = canvasHeight - plotOffset.bottom - BOTTOM_SIDE_BUFFER - plotOffset.top;
hozScale = plotWidth / (xaxis.max - xaxis.min);
@@ -930,7 +942,7 @@ BOTTOM_SIDE_BUFFER = 5;
}
}
- function insertLabels() {
+ function insertTickLabels() {
target.find(".tickLabels").remove();
var i, tick;
@@ -960,6 +972,51 @@ BOTTOM_SIDE_BUFFER = 5;
target.append(html);
}
+
+ function insertAxisLabels() {
+ if (options.xaxis.label) {
+ yLocation = plotOffset.top + plotHeight + (xaxis.labelHeight * 1.5);
+ xLocation = plotOffset.left;
+ target.find('#xaxislabel').remove();
+ target.append("<div id='xaxislabel' style='color:" +
+ options.grid.color + ";width:" + plotWidth +
+ "px;text-align:center;position:absolute;top:" +
+ yLocation + "px;left:" + xLocation + "px;'>" +
+ options.xaxis.label + "</div>");
+ }
+ if (options.yaxis.label) {
+ var element;
+ if ($.browser.msie) {
+ element = "<span class='yaxis axislabel' style='writing-mode: tb-rl;filter: flipV flipH;'>" + options.yaxis.label + "</span>";
+ }
+ else {
+ // we'll use svg instead
+ var element = document.createElement('object');
+ element.setAttribute('type', 'image/svg+xml');
+ xAxisHeight = $('#xaxislabel').height();
+ string = '<svg:svg baseProfile="full" height="' + plotHeight +
+ '" width="' + xAxisHeight * 1.5 +
+ '" xmlns:svg="http://www.w3.org/2000/svg" ' +
+ 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink=' +
+ '"http://www.w3.org/1999/xlink"><svg:g>';
+ string += '<svg:text text-anchor="middle" style="fill:#545454; ' +
+ 'stroke:none" x="' + options.grid.labelFontSize + '" y="' + plotHeight / 2 + '" ' +
+ 'transform="rotate(-90,' + options.grid.labelFontSize + ',' + plotHeight / 2 +
+ ')" font-size="' + options.grid.labelFontSize + '">' +
+ options.yaxis.label + '</svg:text></svg:g></svg:svg>';
+ element.setAttribute('data', 'data:image/svg+xml,' + string);
+ }
+
+ xLocation = plotOffset.left - (yaxis.labelWidth * 1.5) - options.grid.labelFontSize;
+ yLocation = plotOffset.top;
+ var yAxisLabel = $("<div id='yaxislabel' style='color:" +
+ options.grid.color + ";height:" + plotHeight +
+ "px;text-align:center;position:absolute;top:" +
+ yLocation + "px;left:" + xLocation + "px;'</div>");
+ yAxisLabel.append(element);
+ target.find('#yaxislabel').remove().end().append(yAxisLabel);
+ }
+ }
function drawSeries(series) {
if (series.lines.show || (!series.bars.show && !series.points.show && !series.deltas.show))

0 comments on commit 219db08

Please sign in to comment.