| 1 | /** |
| 2 | * @license |
| 3 | * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) |
| 4 | * MIT-licensed (http://opensource.org/licenses/MIT) |
| 5 | */ |
| 6 | |
| 7 | Dygraph.Plugins.Axes = (function() { |
| 8 | |
| 9 | "use strict"; |
| 10 | |
| 11 | /* |
| 12 | Bits of jankiness: |
| 13 | - Direct layout access |
| 14 | - Direct area access |
| 15 | - Should include calculation of ticks, not just the drawing. |
| 16 | |
| 17 | Options left to make axis-friendly. |
| 18 | ('axisTickSize') |
| 19 | ('drawAxesAtZero') |
| 20 | ('xAxisHeight') |
| 21 | |
| 22 | These too. What is the difference between axisLablelWidth and {x,y}AxisLabelWidth? |
| 23 | ('axisLabelWidth') |
| 24 | ('xAxisLabelWidth') |
| 25 | ('yAxisLabelWidth') |
| 26 | */ |
| 27 | |
| 28 | /** |
| 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. |
| 32 | */ |
| 33 | var axes = function() { |
| 34 | this.xlabels_ = []; |
| 35 | this.ylabels_ = []; |
| 36 | }; |
| 37 | |
| 38 | axes.prototype.toString = function() { |
| 39 | return "Axes Plugin"; |
| 40 | }; |
| 41 | |
| 42 | axes.prototype.activate = function(g) { |
| 43 | return { |
| 44 | layout: this.layout, |
| 45 | clearChart: this.clearChart, |
| 46 | willDrawChart: this.willDrawChart |
| 47 | }; |
| 48 | }; |
| 49 | |
| 50 | axes.prototype.layout = function(e) { |
| 51 | var g = e.dygraph; |
| 52 | |
| 53 | if (g.getOption('drawYAxis')) { |
| 54 | var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize'); |
| 55 | var y_axis_rect = e.reserveSpaceLeft(w); |
| 56 | } |
| 57 | |
| 58 | if (g.getOption('drawXAxis')) { |
| 59 | var h; |
| 60 | if (g.getOption('xAxisHeight')) { |
| 61 | h = g.getOption('xAxisHeight'); |
| 62 | } else { |
| 63 | h = g.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g.getOption('axisTickSize'); |
| 64 | } |
| 65 | var x_axis_rect = e.reserveSpaceBottom(h); |
| 66 | } |
| 67 | |
| 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() + ")"); |
| 75 | } |
| 76 | }; |
| 77 | |
| 78 | axes.prototype.detachLabels = function() { |
| 79 | function removeArray(ary) { |
| 80 | for (var i = 0; i < ary.length; i++) { |
| 81 | var el = ary[i]; |
| 82 | if (el.parentNode) el.parentNode.removeChild(el); |
| 83 | } |
| 84 | } |
| 85 | |
| 86 | removeArray(this.xlabels_); |
| 87 | removeArray(this.ylabels_); |
| 88 | this.xlabels_ = []; |
| 89 | this.ylabels_ = []; |
| 90 | }; |
| 91 | |
| 92 | axes.prototype.clearChart = function(e) { |
| 93 | var g = e.dygraph; |
| 94 | this.detachLabels(); |
| 95 | }; |
| 96 | |
| 97 | axes.prototype.willDrawChart = function(e) { |
| 98 | var g = e.dygraph; |
| 99 | if (!g.getOption('drawXAxis') && !g.getOption('drawYAxis')) return; |
| 100 | |
| 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; } |
| 104 | |
| 105 | var context = e.drawingContext; |
| 106 | var containerDiv = e.canvas.parentNode; |
| 107 | var canvasWidth = e.canvas.width; |
| 108 | var canvasHeight = e.canvas.height; |
| 109 | |
| 110 | var label, x, y, tick, i; |
| 111 | |
| 112 | var makeLabelStyle = function(axis) { |
| 113 | return { |
| 114 | position: "absolute", |
| 115 | fontSize: g.getOptionForAxis('axisLabelFontSize', axis) + "px", |
| 116 | zIndex: 10, |
| 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. |
| 121 | overflow: "hidden" |
| 122 | }; |
| 123 | } |
| 124 | |
| 125 | var labelStyles = { |
| 126 | x : makeLabelStyle('x'), |
| 127 | y : makeLabelStyle('y'), |
| 128 | y2 : makeLabelStyle('y2'), |
| 129 | }; |
| 130 | |
| 131 | var makeDiv = function(txt, axis, prec_axis) { |
| 132 | /* |
| 133 | * This seems to be called with the following three sets of axis/perc_axis: |
| 134 | * x: undefined |
| 135 | * y: y1 |
| 136 | * y: y2 |
| 137 | */ |
| 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]; |
| 143 | } |
| 144 | } |
| 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); |
| 151 | return div; |
| 152 | }; |
| 153 | |
| 154 | // axis lines |
| 155 | context.save(); |
| 156 | |
| 157 | var layout = g.layout_; |
| 158 | var area = e.dygraph.plotter_.area; |
| 159 | |
| 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; |
| 166 | x = area.x; |
| 167 | var sgn = 1; |
| 168 | var prec_axis = 'y1'; |
| 169 | if (tick[0] == 1) { // right-side y-axis |
| 170 | x = area.x + area.w; |
| 171 | sgn = -1; |
| 172 | prec_axis = 'y2'; |
| 173 | } |
| 174 | var fontSize = g.getOptionForAxis('axisLabelFontSize', prec_axis); |
| 175 | y = area.y + tick[1] * area.h; |
| 176 | |
| 177 | /* Tick marks are currently clipped, so don't bother drawing them. |
| 178 | context.beginPath(); |
| 179 | context.moveTo(halfUp(x), halfDown(y)); |
| 180 | context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y)); |
| 181 | context.closePath(); |
| 182 | context.stroke(); |
| 183 | */ |
| 184 | |
| 185 | label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null); |
| 186 | var top = (y - fontSize / 2); |
| 187 | if (top < 0) top = 0; |
| 188 | |
| 189 | if (top + fontSize + 3 > canvasHeight) { |
| 190 | label.style.bottom = "0px"; |
| 191 | } else { |
| 192 | label.style.top = top + "px"; |
| 193 | } |
| 194 | if (tick[0] === 0) { |
| 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"; |
| 201 | } |
| 202 | label.style.width = g.getOption('yAxisLabelWidth') + "px"; |
| 203 | containerDiv.appendChild(label); |
| 204 | this.ylabels_.push(label); |
| 205 | } |
| 206 | |
| 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"; |
| 217 | } |
| 218 | } |
| 219 | |
| 220 | // draw a vertical line on the left to separate the chart from the labels. |
| 221 | var axisX; |
| 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); |
| 226 | } else { |
| 227 | axisX = halfUp(area.x); |
| 228 | } |
| 229 | |
| 230 | context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y'); |
| 231 | context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y'); |
| 232 | |
| 233 | context.beginPath(); |
| 234 | context.moveTo(axisX, halfDown(area.y)); |
| 235 | context.lineTo(axisX, halfDown(area.y + area.h)); |
| 236 | context.closePath(); |
| 237 | context.stroke(); |
| 238 | |
| 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'); |
| 243 | context.beginPath(); |
| 244 | context.moveTo(halfDown(area.x + area.w), halfDown(area.y)); |
| 245 | context.lineTo(halfDown(area.x + area.w), halfDown(area.y + area.h)); |
| 246 | context.closePath(); |
| 247 | context.stroke(); |
| 248 | } |
| 249 | } |
| 250 | |
| 251 | if (g.getOption('drawXAxis')) { |
| 252 | if (layout.xticks) { |
| 253 | for (i = 0; i < layout.xticks.length; i++) { |
| 254 | tick = layout.xticks[i]; |
| 255 | x = area.x + tick[0] * area.w; |
| 256 | y = area.y + area.h; |
| 257 | |
| 258 | /* Tick marks are currently clipped, so don't bother drawing them. |
| 259 | context.beginPath(); |
| 260 | context.moveTo(halfUp(x), halfDown(y)); |
| 261 | context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize'))); |
| 262 | context.closePath(); |
| 263 | context.stroke(); |
| 264 | */ |
| 265 | |
| 266 | label = makeDiv(tick[1], 'x'); |
| 267 | label.style.textAlign = "center"; |
| 268 | label.style.top = (y + g.getOption('axisTickSize')) + 'px'; |
| 269 | |
| 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"; |
| 274 | } |
| 275 | if (left < 0) { |
| 276 | left = 0; |
| 277 | label.style.textAlign = "left"; |
| 278 | } |
| 279 | |
| 280 | label.style.left = left + "px"; |
| 281 | label.style.width = g.getOption('xAxisLabelWidth') + "px"; |
| 282 | containerDiv.appendChild(label); |
| 283 | this.xlabels_.push(label); |
| 284 | } |
| 285 | } |
| 286 | |
| 287 | context.strokeStyle = g.getOptionForAxis('axisLineColor', 'x'); |
| 288 | context.lineWidth = g.getOptionForAxis('axisLineWidth', 'x'); |
| 289 | context.beginPath(); |
| 290 | var axisY; |
| 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); |
| 295 | } else { |
| 296 | axisY = halfDown(area.y + area.h); |
| 297 | } |
| 298 | context.moveTo(halfUp(area.x), axisY); |
| 299 | context.lineTo(halfUp(area.x + area.w), axisY); |
| 300 | context.closePath(); |
| 301 | context.stroke(); |
| 302 | } |
| 303 | |
| 304 | context.restore(); |
| 305 | }; |
| 306 | |
| 307 | return axes; |
| 308 | })(); |