3 * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
7 /*global Dygraph:false */
9 Dygraph
.Plugins
.Axes
= (function() {
15 - Direct layout access
17 - Should include calculation of ticks, not just the drawing.
19 Options left to make axis-friendly.
24 These too. What is the difference between axisLablelWidth and {x,y}AxisLabelWidth?
31 * Draws the axes. This includes the labels on the x- and y-axes, as well
32 * as the tick marks on the axes.
33 * It does _not_ draw the grid lines which span the entire chart.
35 var axes
= function() {
40 axes
.prototype.toString
= function() {
44 axes
.prototype.activate
= function(g
) {
47 clearChart
: this.clearChart
,
48 willDrawChart
: this.willDrawChart
52 axes
.prototype.layout
= function(e
) {
55 if (g
.getOption('drawYAxis')) {
56 var w
= g
.getOption('yAxisLabelWidth') + 2 * g
.getOption('axisTickSize');
57 e
.reserveSpaceLeft(w
);
60 if (g
.getOption('drawXAxis')) {
62 // NOTE: I think this is probably broken now, since g.getOption() now
63 // hits the dictionary. (That is, g.getOption('xAxisHeight') now always
65 if (g
.getOption('xAxisHeight')) {
66 h
= g
.getOption('xAxisHeight');
68 h
= g
.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g
.getOption('axisTickSize');
70 e
.reserveSpaceBottom(h
);
73 if (g
.numAxes() == 2) {
74 // TODO(danvk): introduce a 'drawAxis' per-axis property.
75 if (g
.getOption('drawYAxis')) {
76 // TODO(danvk): per-axis setting.
77 var w
= g
.getOption('yAxisLabelWidth') + 2 * g
.getOption('axisTickSize');
78 e
.reserveSpaceRight(w
);
80 } else if (g
.numAxes() > 2) {
81 g
.error("Only two y-axes are supported at this time. (Trying " +
82 "to use " + g
.numAxes() + ")");
86 axes
.prototype.detachLabels
= function() {
87 function removeArray(ary
) {
88 for (var i
= 0; i
< ary
.length
; i
++) {
90 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
94 removeArray(this.xlabels_
);
95 removeArray(this.ylabels_
);
100 axes
.prototype.clearChart
= function(e
) {
104 axes
.prototype.willDrawChart
= function(e
) {
106 if (!g
.getOption('drawXAxis') && !g
.getOption('drawYAxis')) return;
108 // Round pixels to half-integer boundaries for crisper drawing.
109 function halfUp(x
) { return Math
.round(x
) + 0.5; }
110 function halfDown(y
){ return Math
.round(y
) - 0.5; }
112 var context
= e
.drawingContext
;
113 var containerDiv
= e
.canvas
.parentNode
;
114 var canvasWidth
= e
.canvas
.width
;
115 var canvasHeight
= e
.canvas
.height
;
117 var label
, x
, y
, tick
, i
;
119 var makeLabelStyle
= function(axis
) {
121 position
: "absolute",
122 fontSize
: g
.getOptionForAxis('axisLabelFontSize', axis
) + "px",
124 color
: g
.getOptionForAxis('axisLabelColor', axis
),
125 width
: g
.getOption('axisLabelWidth') + "px",
126 // height: g.getOptionForAxis('axisLabelFontSize', 'x') + 2 + "px",
127 lineHeight
: "normal", // Something other than "normal" line-height screws up label positioning.
133 x
: makeLabelStyle('x'),
134 y
: makeLabelStyle('y'),
135 y2
: makeLabelStyle('y2')
138 var makeDiv
= function(txt
, axis
, prec_axis
) {
140 * This seems to be called with the following three sets of axis/prec_axis:
145 var div
= document
.createElement("div");
146 var labelStyle
= labelStyles
[prec_axis
== 'y2' ? 'y2' : axis
];
147 for (var name
in labelStyle
) {
148 if (labelStyle
.hasOwnProperty(name
)) {
149 div
.style
[name
] = labelStyle
[name
];
152 var inner_div
= document
.createElement("div");
153 inner_div
.className
= 'dygraph-axis-label' +
154 ' dygraph-axis-label-' + axis
+
155 (prec_axis
? ' dygraph-axis-label-' + prec_axis
: '');
156 inner_div
.innerHTML
= txt
;
157 div
.appendChild(inner_div
);
164 var layout
= g
.layout_
;
165 var area
= e
.dygraph
.plotter_
.area
;
167 if (g
.getOption('drawYAxis')) {
168 if (layout
.yticks
&& layout
.yticks
.length
> 0) {
169 var num_axes
= g
.numAxes();
170 for (i
= 0; i
< layout
.yticks
.length
; i
++) {
171 tick
= layout
.yticks
[i
];
172 if (typeof(tick
) == "function") return;
175 var prec_axis
= 'y1';
176 if (tick
[0] == 1) { // right-side y-axis
181 var fontSize
= g
.getOptionForAxis('axisLabelFontSize', prec_axis
);
182 y
= area
.y
+ tick
[1] * area
.h
;
184 /* Tick marks are currently clipped, so don't bother drawing them.
186 context.moveTo(halfUp(x), halfDown(y));
187 context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
192 label
= makeDiv(tick
[2], 'y', num_axes
== 2 ? prec_axis
: null);
193 var top
= (y
- fontSize
/ 2);
194 if (top
< 0) top
= 0;
196 if (top
+ fontSize
+ 3 > canvasHeight
) {
197 label
.style
.bottom
= "0px";
199 label
.style
.top
= top
+ "px";
202 label
.style
.left
= (area
.x
- g
.getOption('yAxisLabelWidth') - g
.getOption('axisTickSize')) + "px";
203 label
.style
.textAlign
= "right";
204 } else if (tick
[0] == 1) {
205 label
.style
.left
= (area
.x
+ area
.w
+
206 g
.getOption('axisTickSize')) + "px";
207 label
.style
.textAlign
= "left";
209 label
.style
.width
= g
.getOption('yAxisLabelWidth') + "px";
210 containerDiv
.appendChild(label
);
211 this.ylabels_
.push(label
);
214 // The lowest tick on the y-axis often overlaps with the leftmost
215 // tick on the x-axis. Shift the bottom tick up a little bit to
216 // compensate if necessary.
217 var bottomTick
= this.ylabels_
[0];
218 // Interested in the y2 axis also?
219 var fontSize
= g
.getOptionForAxis('axisLabelFontSize', "y");
220 var bottom
= parseInt(bottomTick
.style
.top
, 10) + fontSize
;
221 if (bottom
> canvasHeight
- fontSize
) {
222 bottomTick
.style
.top
= (parseInt(bottomTick
.style
.top
, 10) -
223 fontSize
/ 2) + "px";
227 // draw a vertical line on the left to separate the chart from the labels.
229 if (g
.getOption('drawAxesAtZero')) {
230 var r
= g
.toPercentXCoord(0);
231 if (r
> 1 || r
< 0 || isNaN(r
)) r
= 0;
232 axisX
= halfUp(area
.x
+ r
* area
.w
);
234 axisX
= halfUp(area
.x
);
237 context
.strokeStyle
= g
.getOptionForAxis('axisLineColor', 'y');
238 context
.lineWidth
= g
.getOptionForAxis('axisLineWidth', 'y');
241 context
.moveTo(axisX
, halfDown(area
.y
));
242 context
.lineTo(axisX
, halfDown(area
.y
+ area
.h
));
246 // if there's a secondary y-axis, draw a vertical line for that, too.
247 if (g
.numAxes() == 2) {
248 context
.strokeStyle
= g
.getOptionForAxis('axisLineColor', 'y2');
249 context
.lineWidth
= g
.getOptionForAxis('axisLineWidth', 'y2');
251 context
.moveTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
));
252 context
.lineTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
+ area
.h
));
258 if (g
.getOption('drawXAxis')) {
260 for (i
= 0; i
< layout
.xticks
.length
; i
++) {
261 tick
= layout
.xticks
[i
];
262 x
= area
.x
+ tick
[0] * area
.w
;
265 /* Tick marks are currently clipped, so don't bother drawing them.
267 context.moveTo(halfUp(x), halfDown(y));
268 context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
273 label
= makeDiv(tick
[1], 'x');
274 label
.style
.textAlign
= "center";
275 label
.style
.top
= (y
+ g
.getOption('axisTickSize')) + 'px';
277 var left
= (x
- g
.getOption('axisLabelWidth')/2);
278 if (left
+ g
.getOption('axisLabelWidth') > canvasWidth
) {
279 left
= canvasWidth
- g
.getOption('xAxisLabelWidth');
280 label
.style
.textAlign
= "right";
284 label
.style
.textAlign
= "left";
287 label
.style
.left
= left
+ "px";
288 label
.style
.width
= g
.getOption('xAxisLabelWidth') + "px";
289 containerDiv
.appendChild(label
);
290 this.xlabels_
.push(label
);
294 context
.strokeStyle
= g
.getOptionForAxis('axisLineColor', 'x');
295 context
.lineWidth
= g
.getOptionForAxis('axisLineWidth', 'x');
298 if (g
.getOption('drawAxesAtZero')) {
299 var r
= g
.toPercentYCoord(0, 0);
300 if (r
> 1 || r
< 0) r
= 1;
301 axisY
= halfDown(area
.y
+ r
* area
.h
);
303 axisY
= halfDown(area
.y
+ area
.h
);
305 context
.moveTo(halfUp(area
.x
), axisY
);
306 context
.lineTo(halfUp(area
.x
+ area
.w
), axisY
);