axisLabelFontSize can now be configured per-axis.
[dygraphs.git] / plugins / axes.js
CommitLineData
f8540c66
DV
1/**
2 * @license
3 * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
5 */
6
7Dygraph.Plugins.Axes = (function() {
8
13f8b047
DV
9"use strict";
10
f8540c66
DV
11/*
12
13Bits of jankiness:
14- Direct layout access
15- Direct area access
16- Should include calculation of ticks, not just the drawing.
17
18*/
19
20/**
21 * Draws the axes. This includes the labels on the x- and y-axes, as well
22 * as the tick marks on the axes.
23 * It does _not_ draw the grid lines which span the entire chart.
24 */
25var axes = function() {
26 this.xlabels_ = [];
27 this.ylabels_ = [];
28};
29
30axes.prototype.toString = function() {
31 return "Axes Plugin";
32};
33
34axes.prototype.activate = function(g) {
35 return {
36 layout: this.layout,
37 clearChart: this.clearChart,
98eb4713 38 willDrawChart: this.willDrawChart
f8540c66
DV
39 };
40};
41
42axes.prototype.layout = function(e) {
43 var g = e.dygraph;
44
45 if (g.getOption('drawYAxis')) {
46 var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize');
47 var y_axis_rect = e.reserveSpaceLeft(w);
48 }
49
50 if (g.getOption('drawXAxis')) {
51 var h;
52 if (g.getOption('xAxisHeight')) {
53 h = g.getOption('xAxisHeight');
54 } else {
48dc3815 55 h = g.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g.getOption('axisTickSize');
f8540c66
DV
56 }
57 var x_axis_rect = e.reserveSpaceBottom(h);
58 }
59
60 if (g.numAxes() == 2) {
61 // TODO(danvk): per-axis setting.
62 var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize');
63 var y2_axis_rect = e.reserveSpaceRight(w);
64 } else if (g.numAxes() > 2) {
65 g.error("Only two y-axes are supported at this time. (Trying " +
66 "to use " + g.numAxes() + ")");
67 }
68};
69
70axes.prototype.detachLabels = function() {
71 function removeArray(ary) {
72 for (var i = 0; i < ary.length; i++) {
73 var el = ary[i];
74 if (el.parentNode) el.parentNode.removeChild(el);
75 }
76 }
77
78 removeArray(this.xlabels_);
79 removeArray(this.ylabels_);
80 this.xlabels_ = [];
81 this.ylabels_ = [];
82};
83
84axes.prototype.clearChart = function(e) {
85 var g = e.dygraph;
86 this.detachLabels();
42a9ebb8 87};
f8540c66 88
98eb4713 89axes.prototype.willDrawChart = function(e) {
f8540c66
DV
90 var g = e.dygraph;
91 if (!g.getOption('drawXAxis') && !g.getOption('drawYAxis')) return;
92
93 // Round pixels to half-integer boundaries for crisper drawing.
94 function halfUp(x) { return Math.round(x) + 0.5; }
95 function halfDown(y){ return Math.round(y) - 0.5; }
96
97 var context = e.drawingContext;
98 var containerDiv = e.canvas.parentNode;
beeabac2
DV
99 var canvasWidth = e.canvas.width;
100 var canvasHeight = e.canvas.height;
f8540c66
DV
101
102 var label, x, y, tick, i;
103
48dc3815
RK
104 var makeLabelStyle = function(axis) {
105 return {
106 position: "absolute",
107 fontSize: g.getOptionForAxis('axisLabelFontSize', axis) + "px",
108 zIndex: 10,
109 color: g.getOption('axisLabelColor'),
110 width: g.getOption('axisLabelWidth') + "px",
111 // height: g.getOptionForAxis('axisLabelFontSize', 'x') + 2 + "px",
112 lineHeight: "normal", // Something other than "normal" line-height screws up label positioning.
113 overflow: "hidden"
114 };
115 }
116
117 var labelStyles = {
118 x : makeLabelStyle('x'),
119 y : makeLabelStyle('y'),
120 y2 : makeLabelStyle('y2'),
f8540c66 121 };
48dc3815 122
f8540c66 123 var makeDiv = function(txt, axis, prec_axis) {
48dc3815
RK
124 /*
125 * This seems to be called with the following three sets of axis/perc_axis:
126 * x: undefined
127 * y: y1
128 * y: y2
129 */
f8540c66 130 var div = document.createElement("div");
48dc3815 131 var labelStyle = labelStyles[prec_axis == 'y2' ? 'y2' : axis];
f8540c66
DV
132 for (var name in labelStyle) {
133 if (labelStyle.hasOwnProperty(name)) {
134 div.style[name] = labelStyle[name];
135 }
136 }
137 var inner_div = document.createElement("div");
138 inner_div.className = 'dygraph-axis-label' +
139 ' dygraph-axis-label-' + axis +
140 (prec_axis ? ' dygraph-axis-label-' + prec_axis : '');
141 inner_div.innerHTML = txt;
142 div.appendChild(inner_div);
143 return div;
144 };
145
146 // axis lines
147 context.save();
148 context.strokeStyle = g.getOption('axisLineColor');
149 context.lineWidth = g.getOption('axisLineWidth');
150
151 var layout = g.layout_;
152 var area = e.dygraph.plotter_.area;
153
154 if (g.getOption('drawYAxis')) {
155 if (layout.yticks && layout.yticks.length > 0) {
156 var num_axes = g.numAxes();
157 for (i = 0; i < layout.yticks.length; i++) {
158 tick = layout.yticks[i];
159 if (typeof(tick) == "function") return;
160 x = area.x;
161 var sgn = 1;
162 var prec_axis = 'y1';
163 if (tick[0] == 1) { // right-side y-axis
164 x = area.x + area.w;
165 sgn = -1;
166 prec_axis = 'y2';
167 }
48dc3815 168 var fontSize = g.getOptionForAxis('axisLabelFontSize', prec_axis);
f8540c66
DV
169 y = area.y + tick[1] * area.h;
170
171 /* Tick marks are currently clipped, so don't bother drawing them.
172 context.beginPath();
173 context.moveTo(halfUp(x), halfDown(y));
174 context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
175 context.closePath();
176 context.stroke();
177 */
178
179 label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null);
48dc3815 180 var top = (y - fontSize / 2);
f8540c66
DV
181 if (top < 0) top = 0;
182
48dc3815 183 if (top + fontSize + 3 > canvasHeight) {
f8540c66
DV
184 label.style.bottom = "0px";
185 } else {
186 label.style.top = top + "px";
187 }
188 if (tick[0] === 0) {
189 label.style.left = (area.x - g.getOption('yAxisLabelWidth') - g.getOption('axisTickSize')) + "px";
190 label.style.textAlign = "right";
191 } else if (tick[0] == 1) {
192 label.style.left = (area.x + area.w +
193 g.getOption('axisTickSize')) + "px";
194 label.style.textAlign = "left";
195 }
196 label.style.width = g.getOption('yAxisLabelWidth') + "px";
197 containerDiv.appendChild(label);
198 this.ylabels_.push(label);
199 }
200
201 // The lowest tick on the y-axis often overlaps with the leftmost
202 // tick on the x-axis. Shift the bottom tick up a little bit to
203 // compensate if necessary.
204 var bottomTick = this.ylabels_[0];
48dc3815
RK
205 // Interested in the y2 axis also?
206 var fontSize = g.getOptionForAxis('axisLabelFontSize', "y");
f8540c66 207 var bottom = parseInt(bottomTick.style.top, 10) + fontSize;
beeabac2 208 if (bottom > canvasHeight - fontSize) {
f8540c66
DV
209 bottomTick.style.top = (parseInt(bottomTick.style.top, 10) -
210 fontSize / 2) + "px";
211 }
212 }
213
214 // draw a vertical line on the left to separate the chart from the labels.
215 var axisX;
216 if (g.getOption('drawAxesAtZero')) {
beeabac2 217 var r = g.toPercentXCoord(0);
f8540c66
DV
218 if (r > 1 || r < 0) r = 0;
219 axisX = halfUp(area.x + r * area.w);
220 } else {
221 axisX = halfUp(area.x);
222 }
223 context.beginPath();
224 context.moveTo(axisX, halfDown(area.y));
225 context.lineTo(axisX, halfDown(area.y + area.h));
226 context.closePath();
227 context.stroke();
228
229 // if there's a secondary y-axis, draw a vertical line for that, too.
230 if (g.numAxes() == 2) {
231 context.beginPath();
232 context.moveTo(halfDown(area.x + area.w), halfDown(area.y));
233 context.lineTo(halfDown(area.x + area.w), halfDown(area.y + area.h));
234 context.closePath();
235 context.stroke();
236 }
237 }
238
239 if (g.getOption('drawXAxis')) {
240 if (layout.xticks) {
241 for (i = 0; i < layout.xticks.length; i++) {
242 tick = layout.xticks[i];
243 x = area.x + tick[0] * area.w;
244 y = area.y + area.h;
245
246 /* Tick marks are currently clipped, so don't bother drawing them.
247 context.beginPath();
248 context.moveTo(halfUp(x), halfDown(y));
249 context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
250 context.closePath();
251 context.stroke();
252 */
253
254 label = makeDiv(tick[1], 'x');
255 label.style.textAlign = "center";
256 label.style.top = (y + g.getOption('axisTickSize')) + 'px';
257
258 var left = (x - g.getOption('axisLabelWidth')/2);
beeabac2
DV
259 if (left + g.getOption('axisLabelWidth') > canvasWidth) {
260 left = canvasWidth - g.getOption('xAxisLabelWidth');
f8540c66
DV
261 label.style.textAlign = "right";
262 }
263 if (left < 0) {
264 left = 0;
265 label.style.textAlign = "left";
266 }
267
268 label.style.left = left + "px";
269 label.style.width = g.getOption('xAxisLabelWidth') + "px";
270 containerDiv.appendChild(label);
271 this.xlabels_.push(label);
272 }
273 }
274
275 context.beginPath();
276 var axisY;
277 if (g.getOption('drawAxesAtZero')) {
278 var r = g.toPercentYCoord(0, 0);
279 if (r > 1 || r < 0) r = 1;
280 axisY = halfDown(area.y + r * area.h);
281 } else {
282 axisY = halfDown(area.y + area.h);
283 }
284 context.moveTo(halfUp(area.x), axisY);
285 context.lineTo(halfUp(area.x + area.w), axisY);
286 context.closePath();
287 context.stroke();
288 }
289
290 context.restore();
42a9ebb8 291};
f8540c66
DV
292
293return axes;
294})();