tests/charting-combinations.html

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