3 * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
7 Dygraph
.Plugins
.Axes
= (function() {
13 - Direct layout access
15 - Should include calculation of ticks, not just the drawing.
17 Options left to make axis-friendly.
22 These too. What is the difference between axisLablelWidth and {x,y}AxisLabelWidth?
29 * Draws the axes. This includes the labels on the x- and y-axes, as well
30 * as the tick marks on the axes.
31 * It does _not_ draw the grid lines which span the entire chart.
33 var axes
= function() {
38 axes
.prototype.toString
= function() {
42 axes
.prototype.activate
= function(g
) {
45 clearChart
: this.clearChart
,
46 willDrawChart
: this.willDrawChart
50 axes
.prototype.layout
= function(e
) {
53 if (g
.getOption('drawYAxis')) {
54 var w
= g
.getOption('yAxisLabelWidth') + 2 * g
.getOption('axisTickSize');
55 var y_axis_rect
= e
.reserveSpaceLeft(w
);
58 if (g
.getOption('drawXAxis')) {
60 if (g
.getOption('xAxisHeight')) {
61 h
= g
.getOption('xAxisHeight');
63 h
= g
.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g
.getOption('axisTickSize');
65 var x_axis_rect
= e
.reserveSpaceBottom(h
);
68 if (g
.numAxes() == 2) {
69 // TODO(danvk): per-axis setting.
70 var w
= g
.getOption('yAxisLabelWidth') + 2 * g
.getOption('axisTickSize');
71 var y2_axis_rect
= e
.reserveSpaceRight(w
);
72 } else if (g
.numAxes() > 2) {
73 g
.error("Only two y-axes are supported at this time. (Trying " +
74 "to use " + g
.numAxes() + ")");
78 axes
.prototype.detachLabels
= function() {
79 function removeArray(ary
) {
80 for (var i
= 0; i
< ary
.length
; i
++) {
82 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
86 removeArray(this.xlabels_
);
87 removeArray(this.ylabels_
);
92 axes
.prototype.clearChart
= function(e
) {
97 axes
.prototype.willDrawChart
= function(e
) {
99 if (!g
.getOption('drawXAxis') && !g
.getOption('drawYAxis')) return;
101 // Round pixels to half-integer boundaries for crisper drawing.
102 function halfUp(x
) { return Math
.round(x
) + 0.5; }
103 function halfDown(y
){ return Math
.round(y
) - 0.5; }
105 var context
= e
.drawingContext
;
106 var containerDiv
= e
.canvas
.parentNode
;
107 var canvasWidth
= e
.canvas
.width
;
108 var canvasHeight
= e
.canvas
.height
;
110 var label
, x
, y
, tick
, i
;
112 var makeLabelStyle
= function(axis
) {
114 position
: "absolute",
115 fontSize
: g
.getOptionForAxis('axisLabelFontSize', axis
) + "px",
117 color
: g
.getOptionForAxis('axisLabelColor', axis
),
118 width
: g
.getOption('axisLabelWidth') + "px",
119 // height: g.getOptionForAxis('axisLabelFontSize', 'x') + 2 + "px",
120 lineHeight
: "normal", // Something other than "normal" line-height screws up label positioning.
126 x
: makeLabelStyle('x'),
127 y
: makeLabelStyle('y'),
128 y2
: makeLabelStyle('y2'),
131 var makeDiv
= function(txt
, axis
, prec_axis
) {
133 * This seems to be called with the following three sets of axis/perc_axis:
138 var div
= document
.createElement("div");
139 var labelStyle
= labelStyles
[prec_axis
== 'y2' ? 'y2' : axis
];
140 for (var name
in labelStyle
) {
141 if (labelStyle
.hasOwnProperty(name
)) {
142 div
.style
[name
] = labelStyle
[name
];
145 var inner_div
= document
.createElement("div");
146 inner_div
.className
= 'dygraph-axis-label' +
147 ' dygraph-axis-label-' + axis
+
148 (prec_axis
? ' dygraph-axis-label-' + prec_axis
: '');
149 inner_div
.innerHTML
= txt
;
150 div
.appendChild(inner_div
);
157 var layout
= g
.layout_
;
158 var area
= e
.dygraph
.plotter_
.area
;
160 if (g
.getOption('drawYAxis')) {
161 if (layout
.yticks
&& layout
.yticks
.length
> 0) {
162 var num_axes
= g
.numAxes();
163 for (i
= 0; i
< layout
.yticks
.length
; i
++) {
164 tick
= layout
.yticks
[i
];
165 if (typeof(tick
) == "function") return;
168 var prec_axis
= 'y1';
169 if (tick
[0] == 1) { // right-side y-axis
174 var fontSize
= g
.getOptionForAxis('axisLabelFontSize', prec_axis
);
175 y
= area
.y
+ tick
[1] * area
.h
;
177 /* Tick marks are currently clipped, so don't bother drawing them.
179 context.moveTo(halfUp(x), halfDown(y));
180 context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
185 label
= makeDiv(tick
[2], 'y', num_axes
== 2 ? prec_axis
: null);
186 var top
= (y
- fontSize
/ 2);
187 if (top
< 0) top
= 0;
189 if (top
+ fontSize
+ 3 > canvasHeight
) {
190 label
.style
.bottom
= "0px";
192 label
.style
.top
= top
+ "px";
195 label
.style
.left
= (area
.x
- g
.getOption('yAxisLabelWidth') - g
.getOption('axisTickSize')) + "px";
196 label
.style
.textAlign
= "right";
197 } else if (tick
[0] == 1) {
198 label
.style
.left
= (area
.x
+ area
.w
+
199 g
.getOption('axisTickSize')) + "px";
200 label
.style
.textAlign
= "left";
202 label
.style
.width
= g
.getOption('yAxisLabelWidth') + "px";
203 containerDiv
.appendChild(label
);
204 this.ylabels_
.push(label
);
207 // The lowest tick on the y-axis often overlaps with the leftmost
208 // tick on the x-axis. Shift the bottom tick up a little bit to
209 // compensate if necessary.
210 var bottomTick
= this.ylabels_
[0];
211 // Interested in the y2 axis also?
212 var fontSize
= g
.getOptionForAxis('axisLabelFontSize', "y");
213 var bottom
= parseInt(bottomTick
.style
.top
, 10) + fontSize
;
214 if (bottom
> canvasHeight
- fontSize
) {
215 bottomTick
.style
.top
= (parseInt(bottomTick
.style
.top
, 10) -
216 fontSize
/ 2) + "px";
220 // draw a vertical line on the left to separate the chart from the labels.
222 if (g
.getOption('drawAxesAtZero')) {
223 var r
= g
.toPercentXCoord(0);
224 if (r
> 1 || r
< 0) r
= 0;
225 axisX
= halfUp(area
.x
+ r
* area
.w
);
227 axisX
= halfUp(area
.x
);
230 context
.strokeStyle
= g
.getOptionForAxis('axisLineColor', 'y');
231 context
.lineWidth
= g
.getOptionForAxis('axisLineWidth', 'y');
234 context
.moveTo(axisX
, halfDown(area
.y
));
235 context
.lineTo(axisX
, halfDown(area
.y
+ area
.h
));
239 // if there's a secondary y-axis, draw a vertical line for that, too.
240 if (g
.numAxes() == 2) {
241 context
.strokeStyle
= g
.getOptionForAxis('axisLineColor', 'y2');
242 context
.lineWidth
= g
.getOptionForAxis('axisLineWidth', 'y2');
244 context
.moveTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
));
245 context
.lineTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
+ area
.h
));
251 if (g
.getOption('drawXAxis')) {
253 for (i
= 0; i
< layout
.xticks
.length
; i
++) {
254 tick
= layout
.xticks
[i
];
255 x
= area
.x
+ tick
[0] * area
.w
;
258 /* Tick marks are currently clipped, so don't bother drawing them.
260 context.moveTo(halfUp(x), halfDown(y));
261 context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
266 label
= makeDiv(tick
[1], 'x');
267 label
.style
.textAlign
= "center";
268 label
.style
.top
= (y
+ g
.getOption('axisTickSize')) + 'px';
270 var left
= (x
- g
.getOption('axisLabelWidth')/2);
271 if (left
+ g
.getOption('axisLabelWidth') > canvasWidth
) {
272 left
= canvasWidth
- g
.getOption('xAxisLabelWidth');
273 label
.style
.textAlign
= "right";
277 label
.style
.textAlign
= "left";
280 label
.style
.left
= left
+ "px";
281 label
.style
.width
= g
.getOption('xAxisLabelWidth') + "px";
282 containerDiv
.appendChild(label
);
283 this.xlabels_
.push(label
);
287 context
.strokeStyle
= g
.getOptionForAxis('axisLineColor', 'x');
288 context
.lineWidth
= g
.getOptionForAxis('axisLineWidth', 'x');
291 if (g
.getOption('drawAxesAtZero')) {
292 var r
= g
.toPercentYCoord(0, 0);
293 if (r
> 1 || r
< 0) r
= 1;
294 axisY
= halfDown(area
.y
+ r
* area
.h
);
296 axisY
= halfDown(area
.y
+ area
.h
);
298 context
.moveTo(halfUp(area
.x
), axisY
);
299 context
.lineTo(halfUp(area
.x
+ area
.w
), axisY
);