Commit | Line | Data |
---|---|---|
88e95c46 DV |
1 | /** |
2 | * @license | |
3 | * Copyright 2011 Dan Vanderkam (danvdk@gmail.com) | |
4 | * MIT-licensed (http://opensource.org/licenses/MIT) | |
5 | */ | |
48e614ac DV |
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 | ||
c0f54d4f DV |
61 | "use strict"; |
62 | ||
48e614ac DV |
63 | Dygraph.numericTicks = function(a, b, pixels, opts, dygraph, vals) { |
64 | var pixels_per_tick = opts('pixelsPerLabel'); | |
65 | var ticks = []; | |
66 | if (vals) { | |
67 | for (var i = 0; i < vals.length; i++) { | |
68 | ticks.push({v: vals[i]}); | |
69 | } | |
70 | } else { | |
71 | // TODO(danvk): factor this log-scale block out into a separate function. | |
72 | if (opts("logscale")) { | |
73 | var nTicks = Math.floor(pixels / pixels_per_tick); | |
74 | var minIdx = Dygraph.binarySearch(a, Dygraph.PREFERRED_LOG_TICK_VALUES, 1); | |
75 | var maxIdx = Dygraph.binarySearch(b, Dygraph.PREFERRED_LOG_TICK_VALUES, -1); | |
76 | if (minIdx == -1) { | |
77 | minIdx = 0; | |
78 | } | |
79 | if (maxIdx == -1) { | |
80 | maxIdx = Dygraph.PREFERRED_LOG_TICK_VALUES.length - 1; | |
81 | } | |
82 | // Count the number of tick values would appear, if we can get at least | |
83 | // nTicks / 4 accept them. | |
84 | var lastDisplayed = null; | |
85 | if (maxIdx - minIdx >= nTicks / 4) { | |
86 | for (var idx = maxIdx; idx >= minIdx; idx--) { | |
87 | var tickValue = Dygraph.PREFERRED_LOG_TICK_VALUES[idx]; | |
88 | var pixel_coord = Math.log(tickValue / a) / Math.log(b / a) * pixels; | |
89 | var tick = { v: tickValue }; | |
90 | if (lastDisplayed == null) { | |
91 | lastDisplayed = { | |
92 | tickValue : tickValue, | |
93 | pixel_coord : pixel_coord | |
94 | }; | |
95 | } else { | |
96 | if (Math.abs(pixel_coord - lastDisplayed.pixel_coord) >= pixels_per_tick) { | |
97 | lastDisplayed = { | |
98 | tickValue : tickValue, | |
99 | pixel_coord : pixel_coord | |
100 | }; | |
101 | } else { | |
102 | tick.label = ""; | |
103 | } | |
104 | } | |
105 | ticks.push(tick); | |
106 | } | |
107 | // Since we went in backwards order. | |
108 | ticks.reverse(); | |
109 | } | |
110 | } | |
111 | ||
112 | // ticks.length won't be 0 if the log scale function finds values to insert. | |
113 | if (ticks.length == 0) { | |
114 | // Basic idea: | |
115 | // Try labels every 1, 2, 5, 10, 20, 50, 100, etc. | |
116 | // Calculate the resulting tick spacing (i.e. this.height_ / nTicks). | |
117 | // The first spacing greater than pixelsPerYLabel is what we use. | |
118 | // TODO(danvk): version that works on a log scale. | |
119 | var kmg2 = opts("labelsKMG2"); | |
120 | if (kmg2) { | |
121 | var mults = [1, 2, 4, 8]; | |
122 | } else { | |
123 | var mults = [1, 2, 5]; | |
124 | } | |
125 | var scale, low_val, high_val, nTicks; | |
126 | for (var i = -10; i < 50; i++) { | |
127 | if (kmg2) { | |
128 | var base_scale = Math.pow(16, i); | |
129 | } else { | |
130 | var base_scale = Math.pow(10, i); | |
131 | } | |
132 | for (var j = 0; j < mults.length; j++) { | |
133 | scale = base_scale * mults[j]; | |
134 | low_val = Math.floor(a / scale) * scale; | |
135 | high_val = Math.ceil(b / scale) * scale; | |
136 | nTicks = Math.abs(high_val - low_val) / scale; | |
137 | var spacing = pixels / nTicks; | |
138 | // wish I could break out of both loops at once... | |
139 | if (spacing > pixels_per_tick) break; | |
140 | } | |
141 | if (spacing > pixels_per_tick) break; | |
142 | } | |
143 | ||
144 | // Construct the set of ticks. | |
145 | // Allow reverse y-axis if it's explicitly requested. | |
146 | if (low_val > high_val) scale *= -1; | |
147 | for (var i = 0; i < nTicks; i++) { | |
148 | var tickV = low_val + i * scale; | |
149 | ticks.push( {v: tickV} ); | |
150 | } | |
151 | } | |
152 | } | |
153 | ||
154 | // Add formatted labels to the ticks. | |
155 | var k; | |
156 | var k_labels = []; | |
157 | if (opts("labelsKMB")) { | |
158 | k = 1000; | |
159 | k_labels = [ "K", "M", "B", "T" ]; | |
160 | } | |
161 | if (opts("labelsKMG2")) { | |
162 | if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!"); | |
163 | k = 1024; | |
164 | k_labels = [ "k", "M", "G", "T" ]; | |
165 | } | |
166 | ||
167 | var formatter = opts('axisLabelFormatter'); | |
168 | ||
169 | // Add labels to the ticks. | |
170 | for (var i = 0; i < ticks.length; i++) { | |
171 | if (ticks[i].label !== undefined) continue; // Use current label. | |
172 | var tickV = ticks[i].v; | |
173 | var absTickV = Math.abs(tickV); | |
174 | // TODO(danvk): set granularity to something appropriate here. | |
175 | var label = formatter(tickV, 0, opts, dygraph); | |
176 | if (k_labels.length > 0) { | |
177 | // TODO(danvk): should this be integrated into the axisLabelFormatter? | |
178 | // Round up to an appropriate unit. | |
179 | var n = k*k*k*k; | |
180 | for (var j = 3; j >= 0; j--, n /= k) { | |
181 | if (absTickV >= n) { | |
182 | label = Dygraph.round_(tickV / n, opts('digitsAfterDecimal')) + | |
183 | k_labels[j]; | |
184 | break; | |
185 | } | |
186 | } | |
187 | } | |
188 | ticks[i].label = label; | |
189 | } | |
190 | ||
191 | return ticks; | |
192 | }; | |
193 | ||
194 | ||
195 | Dygraph.dateTicker = function(a, b, pixels, opts, dygraph, vals) { | |
196 | var pixels_per_tick = opts('pixelsPerLabel'); | |
197 | var chosen = -1; | |
198 | for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) { | |
199 | var num_ticks = Dygraph.numDateTicks(a, b, i); | |
200 | if (pixels / num_ticks >= pixels_per_tick) { | |
201 | chosen = i; | |
202 | break; | |
203 | } | |
204 | } | |
205 | ||
206 | if (chosen >= 0) { | |
207 | return Dygraph.getDateAxis(a, b, chosen, opts, dygraph); | |
208 | } else { | |
209 | // this can happen if self.width_ is zero. | |
210 | return []; | |
211 | } | |
212 | }; | |
213 | ||
214 | // Time granularity enumeration | |
215 | Dygraph.SECONDLY = 0; | |
216 | Dygraph.TWO_SECONDLY = 1; | |
217 | Dygraph.FIVE_SECONDLY = 2; | |
218 | Dygraph.TEN_SECONDLY = 3; | |
219 | Dygraph.THIRTY_SECONDLY = 4; | |
220 | Dygraph.MINUTELY = 5; | |
221 | Dygraph.TWO_MINUTELY = 6; | |
222 | Dygraph.FIVE_MINUTELY = 7; | |
223 | Dygraph.TEN_MINUTELY = 8; | |
224 | Dygraph.THIRTY_MINUTELY = 9; | |
225 | Dygraph.HOURLY = 10; | |
226 | Dygraph.TWO_HOURLY = 11; | |
227 | Dygraph.SIX_HOURLY = 12; | |
228 | Dygraph.DAILY = 13; | |
229 | Dygraph.WEEKLY = 14; | |
230 | Dygraph.MONTHLY = 15; | |
231 | Dygraph.QUARTERLY = 16; | |
232 | Dygraph.BIANNUAL = 17; | |
233 | Dygraph.ANNUAL = 18; | |
234 | Dygraph.DECADAL = 19; | |
235 | Dygraph.CENTENNIAL = 20; | |
236 | Dygraph.NUM_GRANULARITIES = 21; | |
237 | ||
238 | Dygraph.SHORT_SPACINGS = []; | |
239 | Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1; | |
240 | Dygraph.SHORT_SPACINGS[Dygraph.TWO_SECONDLY] = 1000 * 2; | |
241 | Dygraph.SHORT_SPACINGS[Dygraph.FIVE_SECONDLY] = 1000 * 5; | |
242 | Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10; | |
243 | Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30; | |
244 | Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60; | |
245 | Dygraph.SHORT_SPACINGS[Dygraph.TWO_MINUTELY] = 1000 * 60 * 2; | |
246 | Dygraph.SHORT_SPACINGS[Dygraph.FIVE_MINUTELY] = 1000 * 60 * 5; | |
247 | Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10; | |
248 | Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30; | |
249 | Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600; | |
250 | Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY] = 1000 * 3600 * 2; | |
251 | Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6; | |
252 | Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400; | |
253 | Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800; | |
254 | ||
255 | /** | |
256 | * @private | |
257 | * This is a list of human-friendly values at which to show tick marks on a log | |
258 | * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so: | |
259 | * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ... | |
260 | * NOTE: this assumes that Dygraph.LOG_SCALE = 10. | |
261 | */ | |
262 | Dygraph.PREFERRED_LOG_TICK_VALUES = function() { | |
263 | var vals = []; | |
264 | for (var power = -39; power <= 39; power++) { | |
265 | var range = Math.pow(10, power); | |
266 | for (var mult = 1; mult <= 9; mult++) { | |
267 | var val = range * mult; | |
268 | vals.push(val); | |
269 | } | |
270 | } | |
271 | return vals; | |
272 | }(); | |
273 | ||
274 | Dygraph.numDateTicks = function(start_time, end_time, granularity) { | |
275 | if (granularity < Dygraph.MONTHLY) { | |
276 | // Generate one tick mark for every fixed interval of time. | |
277 | var spacing = Dygraph.SHORT_SPACINGS[granularity]; | |
278 | return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing); | |
279 | } else { | |
280 | var year_mod = 1; // e.g. to only print one point every 10 years. | |
281 | var num_months = 12; | |
282 | if (granularity == Dygraph.QUARTERLY) num_months = 3; | |
283 | if (granularity == Dygraph.BIANNUAL) num_months = 2; | |
284 | if (granularity == Dygraph.ANNUAL) num_months = 1; | |
285 | if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; } | |
286 | if (granularity == Dygraph.CENTENNIAL) { num_months = 1; year_mod = 100; } | |
287 | ||
288 | var msInYear = 365.2524 * 24 * 3600 * 1000; | |
289 | var num_years = 1.0 * (end_time - start_time) / msInYear; | |
290 | return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod); | |
291 | } | |
292 | }; | |
293 | ||
294 | Dygraph.getDateAxis = function(start_time, end_time, granularity, opts, dg) { | |
295 | var formatter = opts("axisLabelFormatter"); | |
296 | var ticks = []; | |
297 | if (granularity < Dygraph.MONTHLY) { | |
298 | // Generate one tick mark for every fixed interval of time. | |
299 | var spacing = Dygraph.SHORT_SPACINGS[granularity]; | |
300 | var format = '%d%b'; // e.g. "1Jan" | |
301 | ||
302 | // Find a time less than start_time which occurs on a "nice" time boundary | |
303 | // for this granularity. | |
304 | var g = spacing / 1000; | |
305 | var d = new Date(start_time); | |
306 | if (g <= 60) { // seconds | |
307 | var x = d.getSeconds(); d.setSeconds(x - x % g); | |
308 | } else { | |
309 | d.setSeconds(0); | |
310 | g /= 60; | |
311 | if (g <= 60) { // minutes | |
312 | var x = d.getMinutes(); d.setMinutes(x - x % g); | |
313 | } else { | |
314 | d.setMinutes(0); | |
315 | g /= 60; | |
316 | ||
317 | if (g <= 24) { // days | |
318 | var x = d.getHours(); d.setHours(x - x % g); | |
319 | } else { | |
320 | d.setHours(0); | |
321 | g /= 24; | |
322 | ||
323 | if (g == 7) { // one week | |
324 | d.setDate(d.getDate() - d.getDay()); | |
325 | } | |
326 | } | |
327 | } | |
328 | } | |
329 | start_time = d.getTime(); | |
330 | ||
331 | for (var t = start_time; t <= end_time; t += spacing) { | |
332 | ticks.push({ v:t, | |
333 | label: formatter(new Date(t), granularity, opts, dg) | |
334 | }); | |
335 | } | |
336 | } else { | |
337 | // Display a tick mark on the first of a set of months of each year. | |
338 | // Years get a tick mark iff y % year_mod == 0. This is useful for | |
339 | // displaying a tick mark once every 10 years, say, on long time scales. | |
340 | var months; | |
341 | var year_mod = 1; // e.g. to only print one point every 10 years. | |
342 | ||
343 | if (granularity == Dygraph.MONTHLY) { | |
ccd9d7c2 | 344 | months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]; |
48e614ac DV |
345 | } else if (granularity == Dygraph.QUARTERLY) { |
346 | months = [ 0, 3, 6, 9 ]; | |
347 | } else if (granularity == Dygraph.BIANNUAL) { | |
348 | months = [ 0, 6 ]; | |
349 | } else if (granularity == Dygraph.ANNUAL) { | |
350 | months = [ 0 ]; | |
351 | } else if (granularity == Dygraph.DECADAL) { | |
352 | months = [ 0 ]; | |
353 | year_mod = 10; | |
354 | } else if (granularity == Dygraph.CENTENNIAL) { | |
355 | months = [ 0 ]; | |
356 | year_mod = 100; | |
357 | } else { | |
358 | Dygraph.warn("Span of dates is too long"); | |
359 | } | |
360 | ||
361 | var start_year = new Date(start_time).getFullYear(); | |
362 | var end_year = new Date(end_time).getFullYear(); | |
363 | var zeropad = Dygraph.zeropad; | |
364 | for (var i = start_year; i <= end_year; i++) { | |
365 | if (i % year_mod != 0) continue; | |
366 | for (var j = 0; j < months.length; j++) { | |
367 | var date_str = i + "/" + zeropad(1 + months[j]) + "/01"; | |
368 | var t = Dygraph.dateStrToMillis(date_str); | |
369 | if (t < start_time || t > end_time) continue; | |
370 | ticks.push({ v:t, | |
371 | label: formatter(new Date(t), granularity, opts, dg) | |
372 | }); | |
373 | } | |
374 | } | |
375 | } | |
376 | ||
377 | return ticks; | |
378 | }; | |
379 | ||
380 | // These are set here so that this file can be included after dygraph.js. | |
381 | Dygraph.DEFAULT_ATTRS.axes.x.ticker = Dygraph.dateTicker; | |
382 | Dygraph.DEFAULT_ATTRS.axes.y.ticker = Dygraph.numericTicks; | |
383 | Dygraph.DEFAULT_ATTRS.axes.y2.ticker = Dygraph.numericTicks; |