3 * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
7 Dygraph
.Plugins
.Axes
= (function() {
12 - Direct layout access
14 - Should include calculation of ticks, not just the drawing.
19 * Draws the axes. This includes the labels on the x- and y-axes, as well
20 * as the tick marks on the axes.
21 * It does _not_ draw the grid lines which span the entire chart.
23 var axes
= function() {
28 axes
.prototype.toString
= function() {
32 axes
.prototype.activate
= function(g
) {
35 clearChart
: this.clearChart
,
36 willDrawChart
: this.willDrawChart
40 axes
.prototype.layout
= function(e
) {
43 if (g
.getOption('drawYAxis')) {
44 var w
= g
.getOption('yAxisLabelWidth') + 2 * g
.getOption('axisTickSize');
45 var y_axis_rect
= e
.reserveSpaceLeft(w
);
48 if (g
.getOption('drawXAxis')) {
50 if (g
.getOption('xAxisHeight')) {
51 h
= g
.getOption('xAxisHeight');
53 h
= g
.getOption('axisLabelFontSize') + 2 * g
.getOption('axisTickSize');
55 var x_axis_rect
= e
.reserveSpaceBottom(h
);
58 if (g
.numAxes() == 2) {
59 // TODO(danvk): per-axis setting.
60 var w
= g
.getOption('yAxisLabelWidth') + 2 * g
.getOption('axisTickSize');
61 var y2_axis_rect
= e
.reserveSpaceRight(w
);
62 } else if (g
.numAxes() > 2) {
63 g
.error("Only two y-axes are supported at this time. (Trying " +
64 "to use " + g
.numAxes() + ")");
68 axes
.prototype.detachLabels
= function() {
69 function removeArray(ary
) {
70 for (var i
= 0; i
< ary
.length
; i
++) {
72 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
76 removeArray(this.xlabels_
);
77 removeArray(this.ylabels_
);
82 axes
.prototype.clearChart
= function(e
) {
87 axes
.prototype.willDrawChart
= function(e
) {
89 if (!g
.getOption('drawXAxis') && !g
.getOption('drawYAxis')) return;
91 // Round pixels to half-integer boundaries for crisper drawing.
92 function halfUp(x
) { return Math
.round(x
) + 0.5; }
93 function halfDown(y
){ return Math
.round(y
) - 0.5; }
95 var context
= e
.drawingContext
;
96 var containerDiv
= e
.canvas
.parentNode
;
97 var canvasWidth
= e
.canvas
.width
;
98 var canvasHeight
= e
.canvas
.height
;
100 var label
, x
, y
, tick
, i
;
103 position
: "absolute",
104 fontSize
: g
.getOption('axisLabelFontSize') + "px",
106 color
: g
.getOption('axisLabelColor'),
107 width
: g
.getOption('axisLabelWidth') + "px",
108 // height: this.attr_('axisLabelFontSize') + 2 + "px",
109 lineHeight
: "normal", // Something other than "normal" line-height screws up label positioning.
112 var makeDiv
= function(txt
, axis
, prec_axis
) {
113 var div
= document
.createElement("div");
114 for (var name
in labelStyle
) {
115 if (labelStyle
.hasOwnProperty(name
)) {
116 div
.style
[name
] = labelStyle
[name
];
119 var inner_div
= document
.createElement("div");
120 inner_div
.className
= 'dygraph-axis-label' +
121 ' dygraph-axis-label-' + axis
+
122 (prec_axis
? ' dygraph-axis-label-' + prec_axis
: '');
123 inner_div
.innerHTML
= txt
;
124 div
.appendChild(inner_div
);
130 context
.strokeStyle
= g
.getOption('axisLineColor');
131 context
.lineWidth
= g
.getOption('axisLineWidth');
133 var layout
= g
.layout_
;
134 var area
= e
.dygraph
.plotter_
.area
;
136 if (g
.getOption('drawYAxis')) {
137 if (layout
.yticks
&& layout
.yticks
.length
> 0) {
138 var num_axes
= g
.numAxes();
139 for (i
= 0; i
< layout
.yticks
.length
; i
++) {
140 tick
= layout
.yticks
[i
];
141 if (typeof(tick
) == "function") return;
144 var prec_axis
= 'y1';
145 if (tick
[0] == 1) { // right-side y-axis
150 y
= area
.y
+ tick
[1] * area
.h
;
152 /* Tick marks are currently clipped, so don't bother drawing them.
154 context.moveTo(halfUp(x), halfDown(y));
155 context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
160 label
= makeDiv(tick
[2], 'y', num_axes
== 2 ? prec_axis
: null);
161 var top
= (y
- g
.getOption('axisLabelFontSize') / 2);
162 if (top
< 0) top
= 0;
164 if (top
+ g
.getOption('axisLabelFontSize') + 3 > canvasHeight
) {
165 label
.style
.bottom
= "0px";
167 label
.style
.top
= top
+ "px";
170 label
.style
.left
= (area
.x
- g
.getOption('yAxisLabelWidth') - g
.getOption('axisTickSize')) + "px";
171 label
.style
.textAlign
= "right";
172 } else if (tick
[0] == 1) {
173 label
.style
.left
= (area
.x
+ area
.w
+
174 g
.getOption('axisTickSize')) + "px";
175 label
.style
.textAlign
= "left";
177 label
.style
.width
= g
.getOption('yAxisLabelWidth') + "px";
178 containerDiv
.appendChild(label
);
179 this.ylabels_
.push(label
);
182 // The lowest tick on the y-axis often overlaps with the leftmost
183 // tick on the x-axis. Shift the bottom tick up a little bit to
184 // compensate if necessary.
185 var bottomTick
= this.ylabels_
[0];
186 var fontSize
= g
.getOption('axisLabelFontSize');
187 var bottom
= parseInt(bottomTick
.style
.top
, 10) + fontSize
;
188 if (bottom
> canvasHeight
- fontSize
) {
189 bottomTick
.style
.top
= (parseInt(bottomTick
.style
.top
, 10) -
190 fontSize
/ 2) + "px";
194 // draw a vertical line on the left to separate the chart from the labels.
196 if (g
.getOption('drawAxesAtZero')) {
197 var r
= g
.toPercentXCoord(0);
198 if (r
> 1 || r
< 0) r
= 0;
199 axisX
= halfUp(area
.x
+ r
* area
.w
);
201 axisX
= halfUp(area
.x
);
204 context
.moveTo(axisX
, halfDown(area
.y
));
205 context
.lineTo(axisX
, halfDown(area
.y
+ area
.h
));
209 // if there's a secondary y-axis, draw a vertical line for that, too.
210 if (g
.numAxes() == 2) {
212 context
.moveTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
));
213 context
.lineTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
+ area
.h
));
219 if (g
.getOption('drawXAxis')) {
221 for (i
= 0; i
< layout
.xticks
.length
; i
++) {
222 tick
= layout
.xticks
[i
];
223 x
= area
.x
+ tick
[0] * area
.w
;
226 /* Tick marks are currently clipped, so don't bother drawing them.
228 context.moveTo(halfUp(x), halfDown(y));
229 context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
234 label
= makeDiv(tick
[1], 'x');
235 label
.style
.textAlign
= "center";
236 label
.style
.top
= (y
+ g
.getOption('axisTickSize')) + 'px';
238 var left
= (x
- g
.getOption('axisLabelWidth')/2);
239 if (left
+ g
.getOption('axisLabelWidth') > canvasWidth
) {
240 left
= canvasWidth
- g
.getOption('xAxisLabelWidth');
241 label
.style
.textAlign
= "right";
245 label
.style
.textAlign
= "left";
248 label
.style
.left
= left
+ "px";
249 label
.style
.width
= g
.getOption('xAxisLabelWidth') + "px";
250 containerDiv
.appendChild(label
);
251 this.xlabels_
.push(label
);
257 if (g
.getOption('drawAxesAtZero')) {
258 var r
= g
.toPercentYCoord(0, 0);
259 if (r
> 1 || r
< 0) r
= 1;
260 axisY
= halfDown(area
.y
+ r
* area
.h
);
262 axisY
= halfDown(area
.y
+ area
.h
);
264 context
.moveTo(halfUp(area
.x
), axisY
);
265 context
.lineTo(halfUp(area
.x
+ area
.w
), axisY
);