| 1 | /** |
| 2 | * @license |
| 3 | * Copyright 2011 Dan Vanderkam (danvdk@gmail.com) |
| 4 | * MIT-licensed (http://opensource.org/licenses/MIT) |
| 5 | */ |
| 6 | |
| 7 | /** |
| 8 | * @fileoverview Description of this file. |
| 9 | * @author danvk@google.com (Dan Vanderkam) |
| 10 | * |
| 11 | * A ticker is a function with the following interface: |
| 12 | * |
| 13 | * function(a, b, pixels, options_view, dygraph, forced_values); |
| 14 | * -> [ { v: tick1_v, label: tick1_label[, label_v: label_v1] }, |
| 15 | * { v: tick2_v, label: tick2_label[, label_v: label_v2] }, |
| 16 | * ... |
| 17 | * ] |
| 18 | * |
| 19 | * The returned value is called a "tick list". |
| 20 | * |
| 21 | * Arguments |
| 22 | * --------- |
| 23 | * |
| 24 | * [a, b] is the range of the axis for which ticks are being generated. For a |
| 25 | * numeric axis, these will simply be numbers. For a date axis, these will be |
| 26 | * millis since epoch (convertable to Date objects using "new Date(a)" and "new |
| 27 | * Date(b)"). |
| 28 | * |
| 29 | * opts provides access to chart- and axis-specific options. It can be used to |
| 30 | * access number/date formatting code/options, check for a log scale, etc. |
| 31 | * |
| 32 | * pixels is the length of the axis in pixels. opts('pixelsPerLabel') is the |
| 33 | * minimum amount of space to be allotted to each label. For instance, if |
| 34 | * pixels=400 and opts('pixelsPerLabel')=40 then the ticker should return |
| 35 | * between zero and ten (400/40) ticks. |
| 36 | * |
| 37 | * dygraph is the Dygraph object for which an axis is being constructed. |
| 38 | * |
| 39 | * forced_values is used for secondary y-axes. The tick positions are typically |
| 40 | * set by the primary y-axis, so the secondary y-axis has no choice in where to |
| 41 | * put these. It simply has to generate labels for these data values. |
| 42 | * |
| 43 | * Tick lists |
| 44 | * ---------- |
| 45 | * Typically a tick will have both a grid/tick line and a label at one end of |
| 46 | * that line (at the bottom for an x-axis, at left or right for the y-axis). |
| 47 | * |
| 48 | * A tick may be missing one of these two components: |
| 49 | * - If "label_v" is specified instead of "v", then there will be no tick or |
| 50 | * gridline, just a label. |
| 51 | * - Similarly, if "label" is not specified, then there will be a gridline |
| 52 | * without a label. |
| 53 | * |
| 54 | * This flexibility is useful in a few situations: |
| 55 | * - For log scales, some of the tick lines may be too close to all have labels. |
| 56 | * - For date scales where years are being displayed, it is desirable to display |
| 57 | * tick marks at the beginnings of years but labels (e.g. "2006") in the |
| 58 | * middle of the years. |
| 59 | */ |
| 60 | |
| 61 | /*jshint globalstrict: true */ |
| 62 | /*global Dygraph:false */ |
| 63 | "use strict"; |
| 64 | |
| 65 | Dygraph.numericLinearTicks = function(a, b, pixels, opts, dygraph, vals) { |
| 66 | var nonLogscaleOpts = function(opt) { |
| 67 | if (opt === 'logscale') return false; |
| 68 | return opts(opt); |
| 69 | }; |
| 70 | return Dygraph.numericTicks(a, b, pixels, nonLogscaleOpts, dygraph, vals); |
| 71 | }; |
| 72 | |
| 73 | Dygraph.numericTicks = function(a, b, pixels, opts, dygraph, vals) { |
| 74 | var pixels_per_tick = opts('pixelsPerLabel'); |
| 75 | var ticks = []; |
| 76 | var i, j, tickV, nTicks; |
| 77 | if (vals) { |
| 78 | for (i = 0; i < vals.length; i++) { |
| 79 | ticks.push({v: vals[i]}); |
| 80 | } |
| 81 | } else { |
| 82 | // TODO(danvk): factor this log-scale block out into a separate function. |
| 83 | if (opts("logscale")) { |
| 84 | nTicks = Math.floor(pixels / pixels_per_tick); |
| 85 | var minIdx = Dygraph.binarySearch(a, Dygraph.PREFERRED_LOG_TICK_VALUES, 1); |
| 86 | var maxIdx = Dygraph.binarySearch(b, Dygraph.PREFERRED_LOG_TICK_VALUES, -1); |
| 87 | if (minIdx == -1) { |
| 88 | minIdx = 0; |
| 89 | } |
| 90 | if (maxIdx == -1) { |
| 91 | maxIdx = Dygraph.PREFERRED_LOG_TICK_VALUES.length - 1; |
| 92 | } |
| 93 | // Count the number of tick values would appear, if we can get at least |
| 94 | // nTicks / 4 accept them. |
| 95 | var lastDisplayed = null; |
| 96 | if (maxIdx - minIdx >= nTicks / 4) { |
| 97 | for (var idx = maxIdx; idx >= minIdx; idx--) { |
| 98 | var tickValue = Dygraph.PREFERRED_LOG_TICK_VALUES[idx]; |
| 99 | var pixel_coord = Math.log(tickValue / a) / Math.log(b / a) * pixels; |
| 100 | var tick = { v: tickValue }; |
| 101 | if (lastDisplayed === null) { |
| 102 | lastDisplayed = { |
| 103 | tickValue : tickValue, |
| 104 | pixel_coord : pixel_coord |
| 105 | }; |
| 106 | } else { |
| 107 | if (Math.abs(pixel_coord - lastDisplayed.pixel_coord) >= pixels_per_tick) { |
| 108 | lastDisplayed = { |
| 109 | tickValue : tickValue, |
| 110 | pixel_coord : pixel_coord |
| 111 | }; |
| 112 | } else { |
| 113 | tick.label = ""; |
| 114 | } |
| 115 | } |
| 116 | ticks.push(tick); |
| 117 | } |
| 118 | // Since we went in backwards order. |
| 119 | ticks.reverse(); |
| 120 | } |
| 121 | } |
| 122 | |
| 123 | // ticks.length won't be 0 if the log scale function finds values to insert. |
| 124 | if (ticks.length === 0) { |
| 125 | // Basic idea: |
| 126 | // Try labels every 1, 2, 5, 10, 20, 50, 100, etc. |
| 127 | // Calculate the resulting tick spacing (i.e. this.height_ / nTicks). |
| 128 | // The first spacing greater than pixelsPerYLabel is what we use. |
| 129 | // TODO(danvk): version that works on a log scale. |
| 130 | var kmg2 = opts("labelsKMG2"); |
| 131 | var mults; |
| 132 | if (kmg2) { |
| 133 | mults = [1, 2, 4, 8]; |
| 134 | } else { |
| 135 | mults = [1, 2, 5]; |
| 136 | } |
| 137 | var scale, low_val, high_val; |
| 138 | for (i = -10; i < 50; i++) { |
| 139 | var base_scale; |
| 140 | if (kmg2) { |
| 141 | base_scale = Math.pow(16, i); |
| 142 | } else { |
| 143 | base_scale = Math.pow(10, i); |
| 144 | } |
| 145 | var spacing = 0; |
| 146 | for (j = 0; j < mults.length; j++) { |
| 147 | scale = base_scale * mults[j]; |
| 148 | low_val = Math.floor(a / scale) * scale; |
| 149 | high_val = Math.ceil(b / scale) * scale; |
| 150 | nTicks = Math.abs(high_val - low_val) / scale; |
| 151 | spacing = pixels / nTicks; |
| 152 | // wish I could break out of both loops at once... |
| 153 | if (spacing > pixels_per_tick) break; |
| 154 | } |
| 155 | if (spacing > pixels_per_tick) break; |
| 156 | } |
| 157 | |
| 158 | // Construct the set of ticks. |
| 159 | // Allow reverse y-axis if it's explicitly requested. |
| 160 | if (low_val > high_val) scale *= -1; |
| 161 | for (i = 0; i < nTicks; i++) { |
| 162 | tickV = low_val + i * scale; |
| 163 | ticks.push( {v: tickV} ); |
| 164 | } |
| 165 | } |
| 166 | } |
| 167 | |
| 168 | // Add formatted labels to the ticks. |
| 169 | var k; |
| 170 | var k_labels = []; |
| 171 | if (opts("labelsKMB")) { |
| 172 | k = 1000; |
| 173 | k_labels = [ "K", "M", "B", "T", "Q" ]; |
| 174 | } |
| 175 | if (opts("labelsKMG2")) { |
| 176 | if (k) Dygraph.warn("Setting both labelsKMB and labelsKMG2. Pick one!"); |
| 177 | k = 1024; |
| 178 | k_labels = [ "k", "M", "G", "T", "P", "E" ]; |
| 179 | } |
| 180 | |
| 181 | var formatter = opts('axisLabelFormatter'); |
| 182 | |
| 183 | // Add labels to the ticks. |
| 184 | for (i = 0; i < ticks.length; i++) { |
| 185 | if (ticks[i].label !== undefined) continue; // Use current label. |
| 186 | tickV = ticks[i].v; |
| 187 | var absTickV = Math.abs(tickV); |
| 188 | // TODO(danvk): set granularity to something appropriate here. |
| 189 | var label = formatter(tickV, 0, opts, dygraph); |
| 190 | if (k_labels.length > 0) { |
| 191 | // TODO(danvk): should this be integrated into the axisLabelFormatter? |
| 192 | // Round up to an appropriate unit. |
| 193 | var n = Math.pow(k, k_labels.length); |
| 194 | for (j = k_labels.length - 1; j >= 0; j--, n /= k) { |
| 195 | if (absTickV >= n) { |
| 196 | label = Dygraph.round_(tickV / n, opts('digitsAfterDecimal')) + |
| 197 | k_labels[j]; |
| 198 | break; |
| 199 | } |
| 200 | } |
| 201 | } |
| 202 | ticks[i].label = label; |
| 203 | } |
| 204 | |
| 205 | return ticks; |
| 206 | }; |
| 207 | |
| 208 | |
| 209 | Dygraph.dateTicker = function(a, b, pixels, opts, dygraph, vals) { |
| 210 | var chosen = Dygraph.pickDateTickGranularity(a, b, pixels, opts); |
| 211 | |
| 212 | if (chosen >= 0) { |
| 213 | return Dygraph.getDateAxis(a, b, chosen, opts, dygraph); |
| 214 | } else { |
| 215 | // this can happen if self.width_ is zero. |
| 216 | return []; |
| 217 | } |
| 218 | }; |
| 219 | |
| 220 | // Time granularity enumeration |
| 221 | Dygraph.SECONDLY = 0; |
| 222 | Dygraph.TWO_SECONDLY = 1; |
| 223 | Dygraph.FIVE_SECONDLY = 2; |
| 224 | Dygraph.TEN_SECONDLY = 3; |
| 225 | Dygraph.THIRTY_SECONDLY = 4; |
| 226 | Dygraph.MINUTELY = 5; |
| 227 | Dygraph.TWO_MINUTELY = 6; |
| 228 | Dygraph.FIVE_MINUTELY = 7; |
| 229 | Dygraph.TEN_MINUTELY = 8; |
| 230 | Dygraph.THIRTY_MINUTELY = 9; |
| 231 | Dygraph.HOURLY = 10; |
| 232 | Dygraph.TWO_HOURLY = 11; |
| 233 | Dygraph.SIX_HOURLY = 12; |
| 234 | Dygraph.DAILY = 13; |
| 235 | Dygraph.WEEKLY = 14; |
| 236 | Dygraph.MONTHLY = 15; |
| 237 | Dygraph.QUARTERLY = 16; |
| 238 | Dygraph.BIANNUAL = 17; |
| 239 | Dygraph.ANNUAL = 18; |
| 240 | Dygraph.DECADAL = 19; |
| 241 | Dygraph.CENTENNIAL = 20; |
| 242 | Dygraph.NUM_GRANULARITIES = 21; |
| 243 | |
| 244 | Dygraph.SHORT_SPACINGS = []; |
| 245 | Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1; |
| 246 | Dygraph.SHORT_SPACINGS[Dygraph.TWO_SECONDLY] = 1000 * 2; |
| 247 | Dygraph.SHORT_SPACINGS[Dygraph.FIVE_SECONDLY] = 1000 * 5; |
| 248 | Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10; |
| 249 | Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30; |
| 250 | Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60; |
| 251 | Dygraph.SHORT_SPACINGS[Dygraph.TWO_MINUTELY] = 1000 * 60 * 2; |
| 252 | Dygraph.SHORT_SPACINGS[Dygraph.FIVE_MINUTELY] = 1000 * 60 * 5; |
| 253 | Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10; |
| 254 | Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30; |
| 255 | Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600; |
| 256 | Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY] = 1000 * 3600 * 2; |
| 257 | Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6; |
| 258 | Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400; |
| 259 | Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800; |
| 260 | |
| 261 | /** |
| 262 | * @private |
| 263 | * This is a list of human-friendly values at which to show tick marks on a log |
| 264 | * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so: |
| 265 | * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ... |
| 266 | * NOTE: this assumes that Dygraph.LOG_SCALE = 10. |
| 267 | */ |
| 268 | Dygraph.PREFERRED_LOG_TICK_VALUES = function() { |
| 269 | var vals = []; |
| 270 | for (var power = -39; power <= 39; power++) { |
| 271 | var range = Math.pow(10, power); |
| 272 | for (var mult = 1; mult <= 9; mult++) { |
| 273 | var val = range * mult; |
| 274 | vals.push(val); |
| 275 | } |
| 276 | } |
| 277 | return vals; |
| 278 | }(); |
| 279 | |
| 280 | /** |
| 281 | * Determine the correct granularity of ticks on a date axis. |
| 282 | * |
| 283 | * @param {Number} a Left edge of the chart (ms) |
| 284 | * @param {Number} b Right edge of the chart (ms) |
| 285 | * @param {Number} pixels Size of the chart in the relevant dimension (width). |
| 286 | * @param {Function} opts Function mapping from option name -> value. |
| 287 | * @return {Number} The appropriate axis granularity for this chart. See the |
| 288 | * enumeration of possible values in dygraph-tickers.js. |
| 289 | */ |
| 290 | Dygraph.pickDateTickGranularity = function(a, b, pixels, opts) { |
| 291 | var pixels_per_tick = opts('pixelsPerLabel'); |
| 292 | for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) { |
| 293 | var num_ticks = Dygraph.numDateTicks(a, b, i); |
| 294 | if (pixels / num_ticks >= pixels_per_tick) { |
| 295 | return i; |
| 296 | } |
| 297 | } |
| 298 | return -1; |
| 299 | }; |
| 300 | |
| 301 | Dygraph.numDateTicks = function(start_time, end_time, granularity) { |
| 302 | if (granularity < Dygraph.MONTHLY) { |
| 303 | // Generate one tick mark for every fixed interval of time. |
| 304 | var spacing = Dygraph.SHORT_SPACINGS[granularity]; |
| 305 | return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing); |
| 306 | } else { |
| 307 | var year_mod = 1; // e.g. to only print one point every 10 years. |
| 308 | var num_months = 12; |
| 309 | if (granularity == Dygraph.QUARTERLY) num_months = 3; |
| 310 | if (granularity == Dygraph.BIANNUAL) num_months = 2; |
| 311 | if (granularity == Dygraph.ANNUAL) num_months = 1; |
| 312 | if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; } |
| 313 | if (granularity == Dygraph.CENTENNIAL) { num_months = 1; year_mod = 100; } |
| 314 | |
| 315 | var msInYear = 365.2524 * 24 * 3600 * 1000; |
| 316 | var num_years = 1.0 * (end_time - start_time) / msInYear; |
| 317 | return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod); |
| 318 | } |
| 319 | }; |
| 320 | |
| 321 | Dygraph.getDateAxis = function(start_time, end_time, granularity, opts, dg) { |
| 322 | var formatter = opts("axisLabelFormatter"); |
| 323 | var ticks = []; |
| 324 | var t; |
| 325 | |
| 326 | if (granularity < Dygraph.MONTHLY) { |
| 327 | // Generate one tick mark for every fixed interval of time. |
| 328 | var spacing = Dygraph.SHORT_SPACINGS[granularity]; |
| 329 | |
| 330 | // Find a time less than start_time which occurs on a "nice" time boundary |
| 331 | // for this granularity. |
| 332 | var g = spacing / 1000; |
| 333 | var d = new Date(start_time); |
| 334 | var x; |
| 335 | if (g <= 60) { // seconds |
| 336 | x = d.getSeconds(); d.setSeconds(x - x % g); |
| 337 | } else { |
| 338 | d.setSeconds(0); |
| 339 | g /= 60; |
| 340 | if (g <= 60) { // minutes |
| 341 | x = d.getMinutes(); d.setMinutes(x - x % g); |
| 342 | } else { |
| 343 | d.setMinutes(0); |
| 344 | g /= 60; |
| 345 | |
| 346 | if (g <= 24) { // days |
| 347 | x = d.getHours(); d.setHours(x - x % g); |
| 348 | } else { |
| 349 | d.setHours(0); |
| 350 | g /= 24; |
| 351 | |
| 352 | if (g == 7) { // one week |
| 353 | d.setDate(d.getDate() - d.getDay()); |
| 354 | } |
| 355 | } |
| 356 | } |
| 357 | } |
| 358 | start_time = d.getTime(); |
| 359 | |
| 360 | for (t = start_time; t <= end_time; t += spacing) { |
| 361 | ticks.push({ v:t, |
| 362 | label: formatter(new Date(t), granularity, opts, dg) |
| 363 | }); |
| 364 | } |
| 365 | } else { |
| 366 | // Display a tick mark on the first of a set of months of each year. |
| 367 | // Years get a tick mark iff y % year_mod == 0. This is useful for |
| 368 | // displaying a tick mark once every 10 years, say, on long time scales. |
| 369 | var months; |
| 370 | var year_mod = 1; // e.g. to only print one point every 10 years. |
| 371 | |
| 372 | if (granularity == Dygraph.MONTHLY) { |
| 373 | months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]; |
| 374 | } else if (granularity == Dygraph.QUARTERLY) { |
| 375 | months = [ 0, 3, 6, 9 ]; |
| 376 | } else if (granularity == Dygraph.BIANNUAL) { |
| 377 | months = [ 0, 6 ]; |
| 378 | } else if (granularity == Dygraph.ANNUAL) { |
| 379 | months = [ 0 ]; |
| 380 | } else if (granularity == Dygraph.DECADAL) { |
| 381 | months = [ 0 ]; |
| 382 | year_mod = 10; |
| 383 | } else if (granularity == Dygraph.CENTENNIAL) { |
| 384 | months = [ 0 ]; |
| 385 | year_mod = 100; |
| 386 | } else { |
| 387 | Dygraph.warn("Span of dates is too long"); |
| 388 | } |
| 389 | |
| 390 | var start_year = new Date(start_time).getFullYear(); |
| 391 | var end_year = new Date(end_time).getFullYear(); |
| 392 | var zeropad = Dygraph.zeropad; |
| 393 | for (var i = start_year; i <= end_year; i++) { |
| 394 | if (i % year_mod !== 0) continue; |
| 395 | for (var j = 0; j < months.length; j++) { |
| 396 | var date_str = i + "/" + zeropad(1 + months[j]) + "/01"; |
| 397 | t = Dygraph.dateStrToMillis(date_str); |
| 398 | if (t < start_time || t > end_time) continue; |
| 399 | ticks.push({ v:t, |
| 400 | label: formatter(new Date(t), granularity, opts, dg) |
| 401 | }); |
| 402 | } |
| 403 | } |
| 404 | } |
| 405 | |
| 406 | return ticks; |
| 407 | }; |
| 408 | |
| 409 | // These are set here so that this file can be included after dygraph.js. |
| 410 | Dygraph.DEFAULT_ATTRS.axes.x.ticker = Dygraph.dateTicker; |
| 411 | Dygraph.DEFAULT_ATTRS.axes.y.ticker = Dygraph.numericTicks; |
| 412 | Dygraph.DEFAULT_ATTRS.axes.y2.ticker = Dygraph.numericTicks; |