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