[dygraphs.git] / tests / charting-combinations.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Charting combinations</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../dygraph-dev.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
      .chart {
        width: 600px;
        height: 300px;
      }
      #container {
        display: table;
        float: left;
      }
      #results {
        display: table;
        float: left;
        padding-left: 20px;
      }
    </style>
  </head>
  <body>
  <p>There are four options which fundmanentally change the behavior of the standard plotter:</p>
  <ol>
    <li> errorBars / customBars
    <li> stepPlot
    <li> fillGraph
    <li> strokePattern
  </ol>

  <p>This page exhaustively checks all combinations of these parameters.</p>

  <div id=container> </div>
  <div id=results> <b>Valid combinations</b>
    <ol id='results-ol'>
    </ol>
  </div>

  <script type="text/javascript">
    // NOTE: this is an odd thing to do; dygraphs should really throw here.
    console.warn = function(x) {
      throw x;
    }

    var bools = [false, true];
    var containerDiv = document.getElementById("container");
    var resultsList = document.getElementById("results-ol");
    bools.forEach(function(errorBars) {
      var data_csv = errorBars ? NoisyData() : data();
      bools.forEach(function(stepPlot) {
        bools.forEach(function(fillGraph) {
          bools.forEach(function(strokePattern) {
            var title_parts = [];
            if (errorBars) title_parts.push('errorBars');
            if (stepPlot) title_parts.push('stepPlot');
            if (fillGraph) title_parts.push('fillGraph');
            if (strokePattern) title_parts.push('strokePattern');
            var title = title_parts.join(', ');
            if (!title) title = '(none)';

            var title_h2 = document.createElement('h2');
            title_h2.innerHTML = title;
            containerDiv.appendChild(title_h2);

            var div = document.createElement('div');
            div.className = 'chart';
            containerDiv.appendChild(div);

            try {
              var g = new Dygraph(div, data_csv, {
                errorBars: errorBars,
                stepPlot: stepPlot,
                fillGraph: fillGraph,
                strokePattern: strokePattern ? Dygraph.DASHED_LINE : null
              });

              resultsList.innerHTML += '<li> ' + title + '</li>';
            } catch(e) {
              div.className = '';
              div.innerHTML = e;
            }
          });
        });
      });
    });
  </script>

  </body>
</html>
Commit	Line	Data
	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>