[dygraphs.git] / tests / steps.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: Simple line chart:</p>
    <div id="graphdiv1"></div>
    <script type="text/javascript">
      g1 = new Dygraph(document.getElementById("graphdiv1"),
                      "Date,Temperature\n" +
                      "2008-05-07,75\n" +
                      "2008-05-08,70\n" +
                      "2008-05-09,80\n" +
                      "2008-05-10,55\n" +
                      "2008-05-11,69\n");
    </script>

    <p>2: Simple step chart:</p>
    <div id="graphdiv2"></div>
    <script type="text/javascript">
      g2 = new Dygraph(document.getElementById("graphdiv2"),
                      "Date,Temperature\n" +
                      "2008-05-07,75\n" +
                      "2008-05-08,70\n" +
                      "2008-05-09,80\n" +
                      "2008-05-10,55\n" +
                      "2008-05-11,69\n",
                       {
                          stepPlot: true
                       });
    </script>

    <p>3: Filled step chart:</p>
    <div id="graphdiv3"></div>
    <script type="text/javascript">
      g3 = new Dygraph(document.getElementById("graphdiv3"),
                      "Date,Temperature\n" +
                      "2008-05-07,75\n" +
                      "2008-05-08,70\n" +
                      "2008-05-09,80\n" +
                      "2008-05-10,55\n" +
                      "2008-05-11,69\n",
                       {
                          stepPlot: true,
                          fillGraph: true
                       });
    </script>

    <p>4: Line chart with error bars:</p>
    <div id="graphdiv4"></div>
    <script type="text/javascript">
      g4 = new Dygraph(document.getElementById("graphdiv4"),
        [
          [1, [75, 2]],
          [2, [70, 5]],
          [3, [80, 7]],
          [4, [55, 3]],
          [5, [69, 4]]
        ],
        {
           errorBars: true,
           labels: ["X", "Data"]
        }
      );
    </script>
    
    <p>5: Step chart with error bars:</p>
    <div id="graphdiv5"></div>
    <script type="text/javascript">
      g5 = new Dygraph(document.getElementById("graphdiv5"),
        [
          [1, [75, 2]],
          [2, [70, 5]],
          [3, [80, 7]],
          [4, [55, 3]],
          [5, [69, 4]]
        ],
        {
           stepPlot: true,
           errorBars: true,
           labels: ["X", "Data"]
        }
      );
    </script>

    <p>6: Stepped chart with gaps from CSV:</p>
    <div id="graphdiv6"></div>
    <script type="text/javascript">
    g6 = new Dygraph(
      document.getElementById("graphdiv6"),
      "Date,GapSeries1,GapSeries2\n" +
      "2009/12/01,10,10\n" +
      "2009/12/02,15,11\n" +
      "2009/12/03,,12\n" +
      "2009/12/04,,13\n" +
      "2009/12/05,15,\n" +
      "2009/12/06,18,15\n" +
      "2009/12/07,12,16\n",
      {
        stepPlot: true
      }
    );
    </script>

    <p>7: Stepped chart with gaps from native data:</p>
    <div id="graphdiv7"></div>
    <script type="text/javascript">
    g7 = new Dygraph(
      document.getElementById("graphdiv7"),
      [
        [ new Date("2009/12/01"), 10, 10],
        [ new Date("2009/12/02"), 15, 11],
        [ new Date("2009/12/03"), null, 12],
        [ new Date("2009/12/04"), null, 13],
        [ new Date("2009/12/05"), 15, null],
        [ new Date("2009/12/06"), 18, 15],
        [ new Date("2009/12/07"), 12, 16]
      ],
      {
        labels: ["Date","GapSeries1","GapSeries2"],
        showRoller: true,
        stepPlot: true,
        GapSeries2: { axis: {} }
      }
    );
    </script>
    
    <p>8: Stacked filled step chart:</p>
    <div id="graphdiv8"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv8"),
                      "Date,Idle,Used\n" +
                      "2008-05-07,70,30\n" +
                      "2008-05-08,12,88\n" +
                      "2008-05-09,88,12\n" +
                      "2008-05-10,63,37\n" +
                      "2008-05-11,35,65\n",
                       {
                          stepPlot: true,
                          fillGraph: true,
                          stackedGraph: true,
                          includeZero: 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: Simple line chart:</p>
	18	<div id="graphdiv1"></div>
	19	<script type="text/javascript">
	20	g1 = new Dygraph(document.getElementById("graphdiv1"),
	21	"Date,Temperature\n" +
	22	"2008-05-07,75\n" +
	23	"2008-05-08,70\n" +
	24	"2008-05-09,80\n" +
	25	"2008-05-10,55\n" +
	26	"2008-05-11,69\n");
	27	</script>
	28
	29	<p>2: Simple step chart:</p>
	30	<div id="graphdiv2"></div>
	31	<script type="text/javascript">
	32	g2 = new Dygraph(document.getElementById("graphdiv2"),
	33	"Date,Temperature\n" +
	34	"2008-05-07,75\n" +
	35	"2008-05-08,70\n" +
	36	"2008-05-09,80\n" +
	37	"2008-05-10,55\n" +
	38	"2008-05-11,69\n",
	39	{
	40	stepPlot: true
	41	});
	42	</script>
	43
	44	<p>3: Filled step chart:</p>
	45	<div id="graphdiv3"></div>
	46	<script type="text/javascript">
	47	g3 = new Dygraph(document.getElementById("graphdiv3"),
	48	"Date,Temperature\n" +
	49	"2008-05-07,75\n" +
	50	"2008-05-08,70\n" +
	51	"2008-05-09,80\n" +
	52	"2008-05-10,55\n" +
	53	"2008-05-11,69\n",
	54	{
	55	stepPlot: true,
	56	fillGraph: true
	57	});
	58	</script>
	59
	60	<p>4: Line chart with error bars:</p>
	61	<div id="graphdiv4"></div>
	62	<script type="text/javascript">
	63	g4 = new Dygraph(document.getElementById("graphdiv4"),
	64	[
	65	[1, [75, 2]],
	66	[2, [70, 5]],
	67	[3, [80, 7]],
	68	[4, [55, 3]],
	69	[5, [69, 4]]
	70	],
	71	{
	72	errorBars: true,
	73	labels: ["X", "Data"]
	74	}
	75	);
	76	</script>
	77
	78	<p>5: Step chart with error bars:</p>
	79	<div id="graphdiv5"></div>
	80	<script type="text/javascript">
	81	g5 = new Dygraph(document.getElementById("graphdiv5"),
	82	[
	83	[1, [75, 2]],
	84	[2, [70, 5]],
	85	[3, [80, 7]],
	86	[4, [55, 3]],
	87	[5, [69, 4]]
	88	],
	89	{
	90	stepPlot: true,
	91	errorBars: true,
	92	labels: ["X", "Data"]
	93	}
	94	);
	95	</script>
	96
	97	<p>6: Stepped chart with gaps from CSV:</p>
	98	<div id="graphdiv6"></div>
	99	<script type="text/javascript">
	100	g6 = new Dygraph(
	101	document.getElementById("graphdiv6"),
	102	"Date,GapSeries1,GapSeries2\n" +
	103	"2009/12/01,10,10\n" +
	104	"2009/12/02,15,11\n" +
	105	"2009/12/03,,12\n" +
	106	"2009/12/04,,13\n" +
	107	"2009/12/05,15,\n" +
	108	"2009/12/06,18,15\n" +
	109	"2009/12/07,12,16\n",
	110	{
	111	stepPlot: true
	112	}
	113	);
	114	</script>
	115
	116	<p>7: Stepped chart with gaps from native data:</p>
	117	<div id="graphdiv7"></div>
	118	<script type="text/javascript">
	119	g7 = new Dygraph(
	120	document.getElementById("graphdiv7"),
	121	[
	122	[ new Date("2009/12/01"), 10, 10],
	123	[ new Date("2009/12/02"), 15, 11],
	124	[ new Date("2009/12/03"), null, 12],
	125	[ new Date("2009/12/04"), null, 13],
	126	[ new Date("2009/12/05"), 15, null],
	127	[ new Date("2009/12/06"), 18, 15],
	128	[ new Date("2009/12/07"), 12, 16]
	129	],
	130	{
	131	labels: ["Date","GapSeries1","GapSeries2"],
	132	showRoller: true,
	133	stepPlot: true,
	134	GapSeries2: { axis: {} }
	135	}
	136	);
	137	</script>
	138
	139	<p>8: Stacked filled step chart:</p>
	140	<div id="graphdiv8"></div>
	141	<script type="text/javascript">
	142	g8 = new Dygraph(document.getElementById("graphdiv8"),
	143	"Date,Idle,Used\n" +
	144	"2008-05-07,70,30\n" +
	145	"2008-05-08,12,88\n" +
	146	"2008-05-09,88,12\n" +
	147	"2008-05-10,63,37\n" +
	148	"2008-05-11,35,65\n",
	149	{
	150	stepPlot: true,
	151	fillGraph: true,
	152	stackedGraph: true,
	153	includeZero: true
	154	});
	155	</script>
	156
	157	</body>
	158	</html>