tests/charting-combinations.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../css/dygraph.css">
   5     <title>Charting combinations</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7     <script type="text/javascript" src="data.js"></script>
   8     <style type="text/css">
   9       .chart {
  10         width: 600px;
  11         height: 300px;
  12       }
  13       #container {
  14         display: table;
  15         float: left;
  16       }
  17       #results {
  18         display: table;
  19         float: left;
  20         padding-left: 20px;
  21       }
  22     </style>
  23   </head>
  24   <body>
  25   <p>There are four options which fundmanentally change the behavior of the standard plotter:</p>
  26   <ol>
  27     <li> errorBars / customBars
  28     <li> stepPlot
  29     <li> fillGraph
  30     <li> strokePattern
  31   </ol>
  32
  33   <p>This page exhaustively checks all combinations of these parameters.</p>
  34
  35   <div id=container> </div>
  36   <div id=results> <b>Valid combinations</b>
  37     <ol id='results-ol'>
  38     </ol>
  39   </div>
  40
  41   <script type="text/javascript">
  42     // NOTE: this is an odd thing to do; dygraphs should really throw here.
  43     console.warn = function(x) {
  44       throw x;
  45     }
  46
  47     var bools = [false, true];
  48     var containerDiv = document.getElementById("container");
  49     var resultsList = document.getElementById("results-ol");
  50     bools.forEach(function(errorBars) {
  51       var data_csv = errorBars ? NoisyData() : data();
  52       bools.forEach(function(stepPlot) {
  53         bools.forEach(function(fillGraph) {
  54           bools.forEach(function(strokePattern) {
  55             var title_parts = [];
  56             if (errorBars) title_parts.push('errorBars');
  57             if (stepPlot) title_parts.push('stepPlot');
  58             if (fillGraph) title_parts.push('fillGraph');
  59             if (strokePattern) title_parts.push('strokePattern');
  60             var title = title_parts.join(', ');
  61             if (!title) title = '(none)';
  62
  63             var title_h2 = document.createElement('h2');
  64             title_h2.innerHTML = title;
  65             containerDiv.appendChild(title_h2);
  66
  67             var div = document.createElement('div');
  68             div.className = 'chart';
  69             containerDiv.appendChild(div);
  70
  71             try {
  72               var g = new Dygraph(div, data_csv, {
  73                 errorBars: errorBars,
  74                 stepPlot: stepPlot,
  75                 fillGraph: fillGraph,
  76                 strokePattern: strokePattern ? Dygraph.DASHED_LINE : null
  77               });
  78
  79               resultsList.innerHTML += '<li> ' + title + '</li>';
  80             } catch(e) {
  81               div.className = '';
  82               div.innerHTML = e;
  83             }
  84           });
  85         });
  86       });
  87     });
  88   </script>
  89
  90   </body>
  91 </html>