auto_tests/tests/step_plot_per_series.js

   1 /**
   2  * @fileoverview Test cases for the option "stepPlot" especially for the scenario where the option is not set for the whole graph but for single series.
   3  *
   4  * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG)
   5  */
   6 var StepTestCase = TestCase("step_plot_per_series");
   7
   8 StepTestCase.prototype.setUp = function() {
   9   document.body.innerHTML = "<div id='graph'></div>";
  10 };
  11
  12 StepTestCase.origFunc = Dygraph.getContext;
  13
  14 StepTestCase.prototype.setUp = function() {
  15   document.body.innerHTML = "<div id='graph'></div>";
  16   Dygraph.getContext = function(canvas) {
  17     return new Proxy(StepTestCase.origFunc(canvas));
  18   };
  19 };
  20
  21 StepTestCase.prototype.tearDown = function() {
  22   Dygraph.getContext = StepTestCase.origFunc;
  23 };
  24
  25 StepTestCase.prototype.testMixedModeStepAndLineFilled = function() {
  26   var opts = {
  27     width: 480,
  28     height: 320,
  29     drawXGrid: false,
  30     drawYGrid: false,
  31     drawXAxis: false,
  32     drawYAxis: false,
  33     errorBars: false,
  34     labels: ["X", "Idle", "Used"],
  35     series: {
  36       Idle: {stepPlot: false},
  37       Used: {stepPlot: true}
  38     },
  39     fillGraph: true,
  40     stackedGraph: false,
  41     includeZero: true
  42   };
  43
  44   var data = [
  45                [1, 70,30],
  46                [2, 12,88],
  47                [3, 88,12],
  48                [4, 63,37],
  49                [5, 35,65]
  50              ];
  51
  52   var graph = document.getElementById("graph");
  53   var g = new Dygraph(graph, data, opts);
  54
  55   htx = g.hidden_ctx_;
  56
  57   var attrs = {};
  58
  59
  60   for (var i = 0; i < data.length - 1; i++) {
  61
  62     var x1 = data[i][0];
  63     var x2 = data[i + 1][0];
  64
  65     var y1 = data[i][1];
  66     var y2 = data[i + 1][1];
  67
  68     // First series (line)
  69     var xy1 = g.toDomCoords(x1, y1);
  70     var xy2 = g.toDomCoords(x2, y2);
  71     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  72
  73     y1 = data[i][2];
  74     y2 = data[i + 1][2];
  75
  76     // Seconds series (step)
  77     // Horizontal line
  78     xy1 = g.toDomCoords(x1, y1);
  79     xy2 = g.toDomCoords(x2, y1);
  80     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  81     // Vertical line
  82     xy1 = g.toDomCoords(x2, y1);
  83     xy2 = g.toDomCoords(x2, y2);
  84     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  85   }
  86 };
  87
  88 StepTestCase.prototype.testMixedModeStepAndLineStackedAndFilled = function() {
  89   var opts = {
  90     width: 480,
  91     height: 320,
  92     drawXGrid: false,
  93     drawYGrid: false,
  94     drawXAxis: false,
  95     drawYAxis: false,
  96     errorBars: false,
  97     labels: ["X", "Idle", "Used", "NotUsed", "Active"],
  98     series: {
  99       Idle: {stepPlot: false},
 100       Used: {stepPlot: true},
 101       NotUsed: {stepPlot: false},
 102       Active: {stepPlot: true}
 103     },
 104     fillGraph: true,
 105     stackedGraph: true,
 106     includeZero: true
 107   };
 108
 109   var data = [
 110                [1, 60,30,5,5],
 111                [2, 12,73,5,10],
 112                [3, 38,12,30,20],
 113                [4, 50,17,23,10],
 114                [5, 35,25,35,5]
 115              ];
 116
 117   var graph = document.getElementById("graph");
 118   var g = new Dygraph(graph, data, opts);
 119
 120   htx = g.hidden_ctx_;
 121
 122   var attrs = {};
 123
 124
 125   for (var i = 0; i < data.length - 1; i++) {
 126
 127     var x1 = data[i][0];
 128     var x2 = data[i + 1][0];
 129     var y1base = 0;
 130     var y2base = 0;
 131     var y1 = data[i][4];
 132     var y2 = data[i + 1][4];
 133
 134
 135     // Fourth series (step)
 136     // Test lines
 137     // Horizontal line
 138     var xy1 = g.toDomCoords(x1, y1);
 139     var xy2 = g.toDomCoords(x2, y1);
 140     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 141     // Vertical line
 142     xy1 = g.toDomCoords(x2, y1);
 143     xy2 = g.toDomCoords(x2, y2);
 144     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 145
 146     // Test edges of areas (also drawn by dygraphs as lines)
 147     xy1 = g.toDomCoords(x1, y1);
 148     xy2 = g.toDomCoords(x2, y1);
 149     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 150     xy1 = xy2;
 151     xy2 = g.toDomCoords(x2, y2base);
 152     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 153     xy1 = xy2;
 154     xy2 = g.toDomCoords(x1, y1base);
 155     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 156     xy1 = xy2;
 157     xy2 = g.toDomCoords(x1, y1);
 158     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 159
 160     y1base = y1;
 161     y2base = y2;
 162     y1 += data[i][3];
 163     y2 += data[i + 1][3];
 164
 165     // Third series (line)
 166     // Test lines
 167     xy1 = g.toDomCoords(x1, y1);
 168     xy2 = g.toDomCoords(x2, y2);
 169     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 170
 171     // Test edges of areas (also drawn by dygraphs as lines)
 172     xy1 = g.toDomCoords(x1, y1);
 173     xy2 = g.toDomCoords(x2, y2);
 174     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 175     xy1 = xy2;
 176     xy2 = g.toDomCoords(x2, y2base);
 177     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 178     xy1 = xy2;
 179     xy2 = g.toDomCoords(x1, y1base);
 180     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 181     xy1 = xy2;
 182     xy2 = g.toDomCoords(x1, y1);
 183     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 184
 185     y1base = y1;
 186     y2base = y2;
 187     y1 += data[i][2];
 188     y2 += data[i + 1][2];
 189
 190     // Second series (step)
 191     // Test lines
 192     // Horizontal line
 193     xy1 = g.toDomCoords(x1, y1);
 194     xy2 = g.toDomCoords(x2, y1);
 195     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 196     // Vertical line
 197     xy1 = g.toDomCoords(x2, y1);
 198     xy2 = g.toDomCoords(x2, y2);
 199     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 200
 201     // Test edges of areas (also drawn by dygraphs as lines)
 202     xy1 = g.toDomCoords(x1, y1);
 203     xy2 = g.toDomCoords(x2, y1);
 204     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 205     xy1 = xy2;
 206     xy2 = g.toDomCoords(x2, y2base);
 207     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 208     xy1 = xy2;
 209     xy2 = g.toDomCoords(x1, y1base);
 210     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 211     xy1 = xy2;
 212     xy2 = g.toDomCoords(x1, y1);
 213     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 214
 215     y1base = y1;
 216     y2base = y2;
 217     y1 += data[i][1];
 218     y2 += data[i + 1][1];
 219
 220     // First series (line)
 221     // Test lines
 222     xy1 = g.toDomCoords(x1, y1);
 223     xy2 = g.toDomCoords(x2, y2);
 224     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 225
 226     // Test edges of areas (also drawn by dygraphs as lines)
 227     xy1 = g.toDomCoords(x1, y1);
 228     xy2 = g.toDomCoords(x2, y2);
 229     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 230     xy1 = xy2;
 231     xy2 = g.toDomCoords(x2, y2base);
 232     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 233     xy1 = xy2;
 234     xy2 = g.toDomCoords(x1, y1base);
 235     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 236     xy1 = xy2;
 237     xy2 = g.toDomCoords(x1, y1);
 238     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 239   }
 240 };
 241
 242 StepTestCase.prototype.testMixedModeStepAndLineErrorBars = function() {
 243   var opts = {
 244     width: 480,
 245     height: 320,
 246     drawXGrid: false,
 247     drawYGrid: false,
 248     drawXAxis: false,
 249     drawYAxis: false,
 250     errorBars: true,
 251     sigma: 1,
 252     labels: ["X", "Data1", "Data2"],
 253     series: {
 254       Data1: {stepPlot: true},
 255       Data2: {stepPlot: false}
 256     }
 257   };
 258   var data = [
 259                [1, [75, 2], [50, 3]],
 260                [2, [70, 5], [90, 4]],
 261                [3, [80, 7], [112, 5]],
 262                [4, [55, 3], [100, 2]],
 263                [5, [69, 4], [85, 6]]
 264              ];
 265
 266   var graph = document.getElementById("graph");
 267   var g = new Dygraph(graph, data, opts);
 268
 269   htx = g.hidden_ctx_;
 270
 271   var attrs = {};
 272
 273   // Test first series (step)
 274   for (var i = 0; i < data.length - 1; i++) {
 275     var x1 = data[i][0];
 276     var x2 = data[i + 1][0];
 277
 278     var y1_middle = data[i][1][0];
 279     var y2_middle = data[i + 1][1][0];
 280
 281     var y1_top = y1_middle + data[i][1][1];
 282     var y2_top = y2_middle + data[i + 1][1][1];
 283
 284     var y1_bottom = y1_middle - data[i][1][1];
 285     var y2_bottom = y2_middle - data[i + 1][1][1];
 286     // Bottom line
 287     // Horizontal line
 288     var xy1 = g.toDomCoords(x1, y1_bottom);
 289     var xy2 = g.toDomCoords(x2, y1_bottom);
 290     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 291     // Vertical line
 292     xy1 = g.toDomCoords(x2, y1_bottom);
 293     xy2 = g.toDomCoords(x2, y2_bottom);
 294     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 295
 296     // Top line
 297     // Horizontal line
 298     xy1 = g.toDomCoords(x1, y1_top);
 299     xy2 = g.toDomCoords(x2, y1_top);
 300     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 301     // Vertical line
 302     xy1 = g.toDomCoords(x2, y1_top);
 303     xy2 = g.toDomCoords(x2, y2_top);
 304     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 305
 306     // Middle line
 307     // Horizontal line
 308     xy1 = g.toDomCoords(x1, y1_middle);
 309     xy2 = g.toDomCoords(x2, y1_middle);
 310     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 311     // Vertical line
 312     xy1 = g.toDomCoords(x2, y1_middle);
 313     xy2 = g.toDomCoords(x2, y2_middle);
 314     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 315   }
 316
 317   // Test second series (line)
 318   for (var i = 0; i < data.length - 1; i++) {
 319     // bottom line
 320     var xy1 = g.toDomCoords(data[i][0], (data[i][2][0] - data[i][2][1]));
 321     var xy2 = g.toDomCoords(data[i + 1][0], (data[i + 1][2][0] - data[i + 1][2][1]));
 322     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 323
 324     // top line
 325     xy1 = g.toDomCoords(data[i][0], data[i][2][0] + data[i][2][1]);
 326     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0] + data[i + 1][2][1]);
 327     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 328
 329     // middle line
 330     xy1 = g.toDomCoords(data[i][0], data[i][2][0]);
 331     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]);
 332     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 333   }
 334
 335 };
 336
 337 StepTestCase.prototype.testMixedModeStepAndLineCustomBars = function() {
 338   var opts = {
 339     width: 480,
 340     height: 320,
 341     drawXGrid: false,
 342     drawYGrid: false,
 343     drawXAxis: false,
 344     drawYAxis: false,
 345     customBars: true,
 346         labels: ["X", "Data1", "Data2"],
 347     series: {
 348       Data1: {stepPlot: true},
 349       Data2: {stepPlot: false}
 350     }
 351   };
 352   var data = [
 353                [1, [73, 75, 78], [50, 55, 70]],
 354                [2, [65, 70, 75], [83, 91, 99]],
 355                [3, [75, 85, 90], [98, 107, 117]],
 356                [4, [55, 58, 61], [93, 102, 105]],
 357                [5, [69, 73, 85], [80, 85, 87]]
 358              ];
 359
 360   var graph = document.getElementById("graph");
 361   var g = new Dygraph(graph, data, opts);
 362
 363   htx = g.hidden_ctx_;
 364
 365   var attrs = {};
 366
 367   // Test first series (step)
 368   for (var i = 0; i < data.length - 1; i++) {
 369
 370     var x1 = data[i][0];
 371     var x2 = data[i + 1][0];
 372
 373     var y1_middle = data[i][1][1];
 374     var y2_middle = data[i + 1][1][1];
 375
 376     var y1_top = data[i][1][2];
 377     var y2_top = data[i + 1][1][2];
 378
 379     var y1_bottom = data[i][1][0];
 380     var y2_bottom = data[i + 1][1][0];
 381
 382     // Bottom line
 383     // Horizontal line
 384     var xy1 = g.toDomCoords(x1, y1_bottom);
 385     var xy2 = g.toDomCoords(x2, y1_bottom);
 386     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 387     // Vertical line
 388     xy1 = g.toDomCoords(x2, y1_middle);
 389     xy2 = g.toDomCoords(x2, y2_middle);
 390     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 391
 392     // Top line
 393     // Horizontal line
 394     xy1 = g.toDomCoords(x1, y1_top);
 395     xy2 = g.toDomCoords(x2, y1_top);
 396     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 397     // Vertical line
 398     xy1 = g.toDomCoords(x2, y1_middle);
 399     xy2 = g.toDomCoords(x2, y2_middle);
 400     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 401
 402     // Middle line
 403     // Horizontal line
 404     xy1 = g.toDomCoords(x1, y1_middle);
 405     xy2 = g.toDomCoords(x2, y1_middle);
 406     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 407     // Vertical line
 408     xy1 = g.toDomCoords(x2, y1_middle);
 409     xy2 = g.toDomCoords(x2, y2_middle);
 410     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 411   }
 412
 413   // Test second series (line)
 414   for (var i = 0; i < data.length - 1; i++) {
 415     // Bottom line
 416     var xy1 = g.toDomCoords(data[i][0], data[i][2][0]);
 417     var xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]);
 418     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 419
 420     // Top line
 421     xy1 = g.toDomCoords(data[i][0], data[i][2][2]);
 422     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][2]);
 423     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 424
 425     // Middle line
 426     xy1 = g.toDomCoords(data[i][0], data[i][2][1]);
 427     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][1]);
 428     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 429   }
 430 };