tests/charting-combinations.html

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