3 * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
7 Dygraph
.Plugins
.Axes
= (function() {
14 - Direct layout access
16 - Should include calculation of ticks, not just the drawing.
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.
25 var axes
= function() {
30 axes
.prototype.toString
= function() {
34 axes
.prototype.activate
= function(g
) {
37 clearChart
: this.clearChart
,
38 willDrawChart
: this.willDrawChart
42 axes
.prototype.layout
= function(e
) {
45 if (g
.getOption('drawYAxis')) {
46 var w
= g
.getOption('yAxisLabelWidth') + 2 * g
.getOption('axisTickSize');
47 var y_axis_rect
= e
.reserveSpaceLeft(w
);
50 if (g
.getOption('drawXAxis')) {
52 if (g
.getOption('xAxisHeight')) {
53 h
= g
.getOption('xAxisHeight');
55 h
= g
.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g
.getOption('axisTickSize');
57 var x_axis_rect
= e
.reserveSpaceBottom(h
);
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() + ")");
70 axes
.prototype.detachLabels
= function() {
71 function removeArray(ary
) {
72 for (var i
= 0; i
< ary
.length
; i
++) {
74 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
78 removeArray(this.xlabels_
);
79 removeArray(this.ylabels_
);
84 axes
.prototype.clearChart
= function(e
) {
89 axes
.prototype.willDrawChart
= function(e
) {
91 if (!g
.getOption('drawXAxis') && !g
.getOption('drawYAxis')) return;
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; }
97 var context
= e
.drawingContext
;
98 var containerDiv
= e
.canvas
.parentNode
;
99 var canvasWidth
= e
.canvas
.width
;
100 var canvasHeight
= e
.canvas
.height
;
102 var label
, x
, y
, tick
, i
;
104 var makeLabelStyle
= function(axis
) {
106 position
: "absolute",
107 fontSize
: g
.getOptionForAxis('axisLabelFontSize', axis
) + "px",
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.
118 x
: makeLabelStyle('x'),
119 y
: makeLabelStyle('y'),
120 y2
: makeLabelStyle('y2'),
123 var makeDiv
= function(txt
, axis
, prec_axis
) {
125 * This seems to be called with the following three sets of axis/perc_axis:
130 var div
= document
.createElement("div");
131 var labelStyle
= labelStyles
[prec_axis
== 'y2' ? 'y2' : axis
];
132 for (var name
in labelStyle
) {
133 if (labelStyle
.hasOwnProperty(name
)) {
134 div
.style
[name
] = labelStyle
[name
];
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
);
148 context
.strokeStyle
= g
.getOption('axisLineColor');
149 context
.lineWidth
= g
.getOption('axisLineWidth');
151 var layout
= g
.layout_
;
152 var area
= e
.dygraph
.plotter_
.area
;
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;
162 var prec_axis
= 'y1';
163 if (tick
[0] == 1) { // right-side y-axis
168 var fontSize
= g
.getOptionForAxis('axisLabelFontSize', prec_axis
);
169 y
= area
.y
+ tick
[1] * area
.h
;
171 /* Tick marks are currently clipped, so don't bother drawing them.
173 context.moveTo(halfUp(x), halfDown(y));
174 context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
179 label
= makeDiv(tick
[2], 'y', num_axes
== 2 ? prec_axis
: null);
180 var top
= (y
- fontSize
/ 2);
181 if (top
< 0) top
= 0;
183 if (top
+ fontSize
+ 3 > canvasHeight
) {
184 label
.style
.bottom
= "0px";
186 label
.style
.top
= top
+ "px";
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";
196 label
.style
.width
= g
.getOption('yAxisLabelWidth') + "px";
197 containerDiv
.appendChild(label
);
198 this.ylabels_
.push(label
);
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];
205 // Interested in the y2 axis also?
206 var fontSize
= g
.getOptionForAxis('axisLabelFontSize', "y");
207 var bottom
= parseInt(bottomTick
.style
.top
, 10) + fontSize
;
208 if (bottom
> canvasHeight
- fontSize
) {
209 bottomTick
.style
.top
= (parseInt(bottomTick
.style
.top
, 10) -
210 fontSize
/ 2) + "px";
214 // draw a vertical line on the left to separate the chart from the labels.
216 if (g
.getOption('drawAxesAtZero')) {
217 var r
= g
.toPercentXCoord(0);
218 if (r
> 1 || r
< 0) r
= 0;
219 axisX
= halfUp(area
.x
+ r
* area
.w
);
221 axisX
= halfUp(area
.x
);
224 context
.moveTo(axisX
, halfDown(area
.y
));
225 context
.lineTo(axisX
, halfDown(area
.y
+ area
.h
));
229 // if there's a secondary y-axis, draw a vertical line for that, too.
230 if (g
.numAxes() == 2) {
232 context
.moveTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
));
233 context
.lineTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
+ area
.h
));
239 if (g
.getOption('drawXAxis')) {
241 for (i
= 0; i
< layout
.xticks
.length
; i
++) {
242 tick
= layout
.xticks
[i
];
243 x
= area
.x
+ tick
[0] * area
.w
;
246 /* Tick marks are currently clipped, so don't bother drawing them.
248 context.moveTo(halfUp(x), halfDown(y));
249 context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
254 label
= makeDiv(tick
[1], 'x');
255 label
.style
.textAlign
= "center";
256 label
.style
.top
= (y
+ g
.getOption('axisTickSize')) + 'px';
258 var left
= (x
- g
.getOption('axisLabelWidth')/2);
259 if (left
+ g
.getOption('axisLabelWidth') > canvasWidth
) {
260 left
= canvasWidth
- g
.getOption('xAxisLabelWidth');
261 label
.style
.textAlign
= "right";
265 label
.style
.textAlign
= "left";
268 label
.style
.left
= left
+ "px";
269 label
.style
.width
= g
.getOption('xAxisLabelWidth') + "px";
270 containerDiv
.appendChild(label
);
271 this.xlabels_
.push(label
);
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
);
282 axisY
= halfDown(area
.y
+ area
.h
);
284 context
.moveTo(halfUp(area
.x
), axisY
);
285 context
.lineTo(halfUp(area
.x
+ area
.w
), axisY
);