2 * @fileoverview Test cases for how axis labels are chosen and formatted.
4 * @author dan@dygraphs.com (Dan Vanderkam)
6 var AxisLabelsTestCase
= TestCase("axis-labels");
8 AxisLabelsTestCase
.prototype.setUp
= function() {
9 document
.body
.innerHTML
= "<div id='graph'></div>";
12 AxisLabelsTestCase
.prototype.tearDown
= function() {
16 AxisLabelsTestCase
.prototype.kCloseFloat
= 1.0e-10;
18 AxisLabelsTestCase
.prototype.testMinusOneToOne
= function() {
30 var graph
= document
.getElementById("graph");
31 var g
= new Dygraph(graph
, data
, opts
);
33 // TODO(danvk): would ['-1.0','-0.5','0.0','0.5','1.0'] be better?
34 assertEquals(['-1','-0.5','0','0.5','1'], Util
.getYLabels());
38 g
.updateOptions({file
: data
});
39 assertEquals(['-1','-0.5','0','0.5','1','1.5','2'], Util
.getYLabels());
43 g
.updateOptions({file
: data
});
44 assertEquals(['-2','0','2','4','6','8','10'], Util
.getYLabels());
48 g
.updateOptions({file
: data
});
49 assertEquals(['0','20','40','60','80','100'], Util
.getYLabels());
52 assertEquals('0: Y:-1', Util
.getLegend());
55 AxisLabelsTestCase
.prototype.testSmallRangeNearZero
= function() {
67 opts
.valueRange
= [-0.1, 0.1];
69 var graph
= document
.getElementById("graph");
70 var g
= new Dygraph(graph
, data
, opts
);
71 assertEqualsDelta([-0.1, -0.08, -0.06, -0.04, -0.02, 0, 0.02, 0.04, 0.06, 0.08],
72 Util
.makeNumbers(Util
.getYLabels()), this.kCloseFloat
);
74 opts
.valueRange
= [-0.05, 0.05];
75 g
.updateOptions(opts
);
76 assertEquals([-0.05, -0.04, -0.03, -0.02, -0.01, 0, 0.01, 0.02, 0.03, 0.04],
77 Util
.makeNumbers(Util
.getYLabels()));
79 opts
.valueRange
= [-0.01, 0.01];
80 g
.updateOptions(opts
);
81 assertEquals([-0.01, -8.00e-3, -6.00e-3, -4.00e-3, -2.00e-3, 0, 2.00e-3, 4.00e-3, 6.00e-3, 8.00e-3],
82 Util
.makeNumbers(Util
.getYLabels()));
85 assertEquals('1: Y:0', Util
.getLegend());
88 AxisLabelsTestCase
.prototype.testSmallRangeAwayFromZero
= function() {
99 var graph
= document
.getElementById("graph");
101 opts
.valueRange
= [9.9, 10.1];
102 var g
= new Dygraph(graph
, data
, opts
);
103 assertEquals(["9.9","9.92","9.94","9.96","9.98","10","10.02","10.04","10.06","10.08"], Util
.getYLabels());
105 opts
.valueRange
= [9.99, 10.01];
106 g
.updateOptions(opts
);
107 // TODO(danvk): this is bad
108 assertEquals(["9.99","9.99","9.99","10","10","10","10","10","10.01","10.01"], Util
.getYLabels());
110 opts
.valueRange
= [9.999, 10.001];
111 g
.updateOptions(opts
);
112 // TODO(danvk): this is even worse!
113 assertEquals(["10","10","10","10","10","10","10","10","10","10"], Util
.getYLabels());
116 assertEquals('1: Y:0', Util
.getLegend());
119 AxisLabelsTestCase
.prototype.testXAxisTimeLabelFormatter
= function() {
124 var data
= [[5.0,0],[5.1,1],[5.2,2],[5.3,3],[5.4,4],[5.5,5],[5.6,6],[5.7,7],[5.8,8],[5.9,9]];
125 var graph
= document
.getElementById("graph");
126 var g
= new Dygraph(graph
, data
, opts
);
130 axisLabelFormatter
: function (totalMinutes
) {
131 var hours
= Math
.floor( totalMinutes
/ 60);
132 var minutes
= Math
.floor((totalMinutes
- (hours
* 60)));
133 var seconds
= Math
.round((totalMinutes
* 60) - (hours
* 3600) - (minutes
* 60));
135 if (hours
< 10) hours
= "0" + hours
;
136 if (minutes
< 10) minutes
= "0" + minutes
;
137 if (seconds
< 10) seconds
= "0" + seconds
;
139 return hours
+ ':' + minutes
+ ':' + seconds
;
145 assertEquals(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], Util
.getXLabels());
147 // The legend does not use the axisLabelFormatter:
149 assertEquals('5.1: Y1:1', Util
.getLegend());
152 AxisLabelsTestCase
.prototype.testAxisLabelFormatter
= function () {
158 axisLabelFormatter
: function(x
, granularity
, opts
, dg
) {
159 assertEquals('number', typeof(x
));
160 assertEquals('number', typeof(granularity
));
161 assertEquals('function', typeof(opts
));
162 assertEquals('[Dygraph graph]', dg
.toString());
167 axisLabelFormatter
: function(y
, granularity
, opts
, dg
) {
168 assertEquals('number', typeof(y
));
169 assertEquals('number', typeof(granularity
));
170 assertEquals('function', typeof(opts
));
171 assertEquals('[Dygraph graph]', dg
.toString());
179 for (var i
= 0; i
< 10; i
++) {
180 data
.push([i
, 2 * i
]);
182 var graph
= document
.getElementById("graph");
183 var g
= new Dygraph(graph
, data
, opts
);
185 assertEquals(['x0','x2','x4','x6','x8'], Util
.getXLabels());
186 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util
.getYLabels());
189 assertEquals("2: y:4", Util
.getLegend());
192 AxisLabelsTestCase
.prototype.testDateAxisLabelFormatter
= function () {
198 axisLabelFormatter
: function(x
, granularity
, opts
, dg
) {
199 assertTrue(Dygraph
.isDateLike(x
));
200 assertEquals('number', typeof(granularity
));
201 assertEquals('function', typeof(opts
));
202 assertEquals('[Dygraph graph]', dg
.toString());
203 return 'x' + x
.strftime('%Y/%m/%d');
207 axisLabelFormatter
: function(y
, granularity
, opts
, dg
) {
208 assertEquals('number', typeof(y
));
209 assertEquals('number', typeof(granularity
));
210 assertEquals('function', typeof(opts
));
211 assertEquals('[Dygraph graph]', dg
.toString());
219 for (var i
= 1; i
< 10; i
++) {
220 data
.push([new Date("2011/01/0" + i
), 2 * i
]);
222 var graph
= document
.getElementById("graph");
223 var g
= new Dygraph(graph
, data
, opts
);
225 assertEquals(["x2011/01/01", "x2011/01/02", "x2011/01/03", "x2011/01/04", "x2011/01/05", "x2011/01/06", "x2011/01/07", "x2011/01/08", "x2011/01/09"], Util
.getXLabels());
226 assertEquals(['y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util
.getYLabels());
229 assertEquals("2011/01/01: y:2", Util
.getLegend());
232 // This test verifies that when a valueFormatter is set (but not an
233 // axisLabelFormatter), then the valueFormatter is used to format the axis
235 AxisLabelsTestCase
.prototype.testValueFormatter
= function () {
241 valueFormatter
: function(x
, opts
, series_name
, dg
) {
242 assertEquals('number', typeof(x
));
243 assertEquals('function', typeof(opts
));
244 assertEquals('string', typeof(series_name
));
245 assertEquals('[Dygraph graph]', dg
.toString());
250 valueFormatter
: function(y
, opts
, series_name
, dg
) {
251 assertEquals('number', typeof(y
));
252 assertEquals('function', typeof(opts
));
253 assertEquals('string', typeof(series_name
));
254 assertEquals('[Dygraph graph]', dg
.toString());
262 for (var i
= 0; i
< 10; i
++) {
263 data
.push([i
, 2 * i
]);
265 var graph
= document
.getElementById("graph");
266 var g
= new Dygraph(graph
, data
, opts
);
268 // the valueFormatter options do not affect the ticks.
269 assertEquals(['0','2','4','6','8'], Util
.getXLabels());
270 assertEquals(['0','2','4','6','8','10','12','14','16','18'],
273 // they do affect the legend, however.
275 assertEquals("x2: y:y4", Util
.getLegend());
278 AxisLabelsTestCase
.prototype.testDateValueFormatter
= function () {
284 valueFormatter
: function(x
, opts
, series_name
, dg
) {
285 assertEquals('number', typeof(x
));
286 assertEquals('function', typeof(opts
));
287 assertEquals('string', typeof(series_name
));
288 assertEquals('[Dygraph graph]', dg
.toString());
289 return 'x' + new Date(x
).strftime('%Y/%m/%d');
293 valueFormatter
: function(y
, opts
, series_name
, dg
) {
294 assertEquals('number', typeof(y
));
295 assertEquals('function', typeof(opts
));
296 assertEquals('string', typeof(series_name
));
297 assertEquals('[Dygraph graph]', dg
.toString());
306 for (var i
= 1; i
< 10; i
++) {
307 data
.push([new Date("2011/01/0" + i
), 2 * i
]);
309 var graph
= document
.getElementById("graph");
310 var g
= new Dygraph(graph
, data
, opts
);
312 // valueFormatters do not affect ticks.
313 assertEquals(['01Jan','02Jan','03Jan','04Jan','05Jan','06Jan','07Jan','08Jan','09Jan'], Util
.getXLabels());
314 assertEquals(['2','4','6','8','10','12','14','16','18'], Util
.getYLabels());
316 // the valueFormatter options also affect the legend.
318 assertEquals('x2011/01/03: y:y6', Util
.getLegend());
321 // This test verifies that when both a valueFormatter and an axisLabelFormatter
322 // are specified, the axisLabelFormatter takes precedence.
323 AxisLabelsTestCase
.prototype.testAxisLabelFormatterPrecedence
= function () {
329 valueFormatter
: function(x
) {
332 axisLabelFormatter
: function(x
, granularity
) {
337 valueFormatter
: function(y
) {
340 axisLabelFormatter
: function(y
) {
348 for (var i
= 0; i
< 10; i
++) {
349 data
.push([i
, 2 * i
]);
351 var graph
= document
.getElementById("graph");
352 var g
= new Dygraph(graph
, data
, opts
);
354 assertEquals(['x0','x2','x4','x6','x8'], Util
.getXLabels());
355 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util
.getYLabels());
358 assertEquals("xvf9: y:yvf18", Util
.getLegend());
361 // This is the same as the previous test, except that options are added
363 AxisLabelsTestCase
.prototype.testAxisLabelFormatterIncremental
= function () {
370 for (var i
= 0; i
< 10; i
++) {
371 data
.push([i
, 2 * i
]);
373 var graph
= document
.getElementById("graph");
374 var g
= new Dygraph(graph
, data
, opts
);
378 valueFormatter
: function(x
) {
387 valueFormatter
: function(y
) {
396 axisLabelFormatter
: function(x
, granularity
) {
405 axisLabelFormatter
: function(y
) {
412 assertEquals(["x0","x2","x4","x6","x8"], Util
.getXLabels());
413 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util
.getYLabels());
416 assertEquals("xvf9: y:yvf18", Util
.getLegend());
419 AxisLabelsTestCase
.prototype.testGlobalFormatters
= function() {
424 valueFormatter
: function(x
) {
427 axisLabelFormatter
: function(x
) {
432 for (var i
= 0; i
< 10; i
++) {
433 data
.push([i
, 2 * i
]);
435 var graph
= document
.getElementById("graph");
436 var g
= new Dygraph(graph
, data
, opts
);
438 assertEquals(['alf0','alf2','alf4','alf6','alf8'], Util
.getXLabels());
439 assertEquals(['alf0','alf2','alf4','alf6','alf8','alf10','alf12','alf14','alf16','alf18'], Util
.getYLabels());
442 assertEquals("vf9: y:vf18", Util
.getLegend());
445 AxisLabelsTestCase
.prototype.testSeriesOrder
= function() {
450 var data
= "x,00,01,10,11\n" +
451 "0,101,201,301,401\n" +
452 "1,102,202,302,402\n" +
453 "2,103,203,303,403\n" +
454 "3,104,204,304,404\n"
457 var graph
= document
.getElementById("graph");
458 var g
= new Dygraph(graph
, data
, opts
);
461 assertEquals('2: 00:103 01:203 10:303 11:403', Util
.getLegend());
463 // Sanity checks for indexFromSetName
464 assertEquals(0, g
.indexFromSetName("x"));
465 assertEquals(1, g
.indexFromSetName("00"));
466 assertEquals(null, g
.indexFromSetName("abcde"));
468 // Verify that we get the label list back in the right order
469 assertEquals(["x", "00", "01", "10", "11"], g
.getLabels());
472 AxisLabelsTestCase
.prototype.testLabelKMB
= function() {
479 document
.getElementById("graph"),
482 labels
: [ 'X', 'bar' ],
491 assertEquals(["0", "500", "1K", "1.5K", "2K"], Util
.getYLabels());
494 AxisLabelsTestCase
.prototype.testLabelKMG2
= function() {
501 document
.getElementById("graph"),
504 labels
: [ 'X', 'bar' ],
514 ["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"],
518 // Same sa testLabelKMG2 but specifies the option at the
519 // top of the option dictionary.
520 AxisLabelsTestCase
.prototype.testLabelKMG2_top
= function() {
527 document
.getElementById("graph"),
530 labels
: [ 'X', 'bar' ],
536 ["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"],
541 * Verify that log scale axis range is properly specified.
543 AxisLabelsTestCase
.prototype.testLogScale
= function() {
544 var g
= new Dygraph("graph", [[0, 5], [1, 1000]], { logscale
: true });
545 var nonEmptyLabels
= Util
.getYLabels().filter(function(x
) { return x
.length
> 0; });
546 assertEquals(["6","10","30","60","100","300","600","1000"], nonEmptyLabels
);
548 g
.updateOptions({ logscale
: false });
549 assertEquals(['0','200','400','600','800','1000'], Util
.getYLabels());
553 * Verify that include zero range is properly specified.
555 AxisLabelsTestCase
.prototype.testIncludeZero
= function() {
556 var g
= new Dygraph("graph", [[0, 500], [1, 1000]], { includeZero
: true });
557 assertEquals(['0','200','400','600','800','1000'], Util
.getYLabels());
559 g
.updateOptions({ includeZero
: false });
560 assertEquals(['500','600','700','800','900','1000'], Util
.getYLabels());