[dygraphs.git] / tests / fillStepPlot.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>dygraph</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

  </head>
  <body>
    <p>1: Showing the fill problem near the gap due to the null value:</p>
    <div id="graph1"></div>
    <script type="text/javascript">
        var g1 = new Dygraph(document.getElementById("graph1"),
        [
          [1,3],
          [2,0],
          [3,8],
          [4,null],
          [5,9],
          [6,8],
          [7,6],
          [8,3]
        ],
        {
          labels: ["x1","y1"],
          fillGraph: true,
          stepPlot: true
        });
    </script>

    <p>2: Showing the proper fill with the fillStepPlot option:</p>
    <div id="graph2"></div>
    <script type="text/javascript">
        var g2 = new Dygraph(document.getElementById("graph2"),
        [
          [1,3],
          [2,0],
          [3,8],
          [4,null],
          [5,9],
          [6,8],
          [7,6],
          [8,3]
        ],
        {
          labels: ["x2","y2"],
          fillGraph: true,
          stepPlot: true,
          fillStepPlot: true
        });
    </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>dygraph</title>
	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
	9	<!--
	10	For production (minified) code, use:
	11	<script type="text/javascript" src="dygraph-combined.js"></script>
	12	-->
	13	<script type="text/javascript" src="../dygraph-dev.js"></script>
	14
	15	</head>
	16	<body>
	17	<p>1: Showing the fill problem near the gap due to the null value:</p>
	18	<div id="graph1"></div>
	19	<script type="text/javascript">
	20	var g1 = new Dygraph(document.getElementById("graph1"),
	21	[
	22	[1,3],
	23	[2,0],
	24	[3,8],
	25	[4,null],
	26	[5,9],
	27	[6,8],
	28	[7,6],
	29	[8,3]
	30	],
	31	{
	32	labels: ["x1","y1"],
	33	fillGraph: true,
	34	stepPlot: true
	35	});
	36	</script>
	37
	38	<p>2: Showing the proper fill with the fillStepPlot option:</p>
	39	<div id="graph2"></div>
	40	<script type="text/javascript">
	41	var g2 = new Dygraph(document.getElementById("graph2"),
	42	[
	43	[1,3],
	44	[2,0],
	45	[3,8],
	46	[4,null],
	47	[5,9],
	48	[6,8],
	49	[7,6],
	50	[8,3]
	51	],
	52	{
	53	labels: ["x2","y2"],
	54	fillGraph: true,
	55	stepPlot: true,
	56	fillStepPlot: true
	57	});
	58	</script>
	59
	60	</body>
	61	</html>