[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,
        series: {
          GapSeries2: {
            axis: 'y2'
          }
        }
      }
    );
    </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>
	
	<p>9: Mixed mode - step and line:</p>
    <div id="graphdiv9"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv9"),
                      "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",
                      {
		                series: {
						  Idle: {stepPlot: true},
						  Used: {stepPlot: false}
						},
						  
                        fillGraph: false,
                        stackedGraph: false,
                        includeZero: true
                      });
    </script>
	
	
	<p>10: Mixed mode - step and line (filled):</p>
    <div id="graphdiv10"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv10"),
                      "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",
                      {
		                series: {
						  Idle: {stepPlot: false},
						  Used: {stepPlot: true}
						},
						  
                        fillGraph: true,
                        stackedGraph: false,
                        includeZero: true
                      });
    </script>

	<p>11: Mixed mode - step and line (stacked and filled):</p>
    <div id="graphdiv11"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv11"),
                      "Date,Idle,Used,NotUsed,Active\n" +
                      "2008-05-07,60,30,5,5\n" +
                      "2008-05-08,12,73,5,10\n" +
                      "2008-05-09,38,12,30,20\n" +
                      "2008-05-10,50,17,23,10\n" +
                      "2008-05-11,35,25,35,5\n",
                      {
		                series: {
						  Idle: {stepPlot: false},
						  Used: {stepPlot: true},
						  NotUsed: {stepPlot: false},
						  Active: {stepPlot: true}						     
                        },
                        fillGraph: true,
                        stackedGraph: true,
                        includeZero: true
                      });
    </script>
	
	<p>12: Mixed mode - step and line (errorbars):</p>
    <div id="graphdiv12"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv12"),
        [
          [1, [75, 2], [50, 3]],
          [2, [70, 5], [90, 4]],
          [3, [80, 7], [112, 5]],
          [4, [55, 3], [100, 2]],
          [5, [69, 4], [85, 6]]
        ],	
        {		   
          errorBars: true,
          labels: ["X", "Data1", "Data2"],
		  series: {
		    Data1: {stepPlot: true},	
		    Data2: {stepPlot: false} 
		  }
        }
	  );
    </script>
	
	<p>13: Mixed mode - step and line (custombars):</p>
    <div id="graphdiv13"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv13"),
        [
          [1, [73, 75, 78], [50, 55, 70]],
          [2, [65, 70, 75], [83, 91, 99]],
          [3, [75, 85, 90], [98, 107, 117]],
          [4, [55, 58, 61], [93, 102, 105]],
          [5, [69, 73, 85], [80, 85, 87]]
        ],	
        {
          customBars: true,
          labels: ["X", "Data1", "Data2"],
		  series: {
		    Data1: {stepPlot: true},	
		    Data2: {stepPlot: false} 
		  }
        }
	  );
    </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	series: {
	135	GapSeries2: {
	136	axis: 'y2'
	137	}
	138	}
	139	}
	140	);
	141	</script>
	142
	143	<p>8: Stacked filled step chart:</p>
	144	<div id="graphdiv8"></div>
	145	<script type="text/javascript">
	146	g8 = new Dygraph(document.getElementById("graphdiv8"),
	147	"Date,Idle,Used\n" +
	148	"2008-05-07,70,30\n" +
	149	"2008-05-08,12,88\n" +
	150	"2008-05-09,88,12\n" +
	151	"2008-05-10,63,37\n" +
	152	"2008-05-11,35,65\n",
	153	{
	154	stepPlot: true,
	155	fillGraph: true,
	156	stackedGraph: true,
	157	includeZero: true
	158	});
	159	</script>
	160
	161	<p>9: Mixed mode - step and line:</p>
	162	<div id="graphdiv9"></div>
	163	<script type="text/javascript">
	164	g8 = new Dygraph(document.getElementById("graphdiv9"),
	165	"Date,Idle,Used\n" +
	166	"2008-05-07,70,30\n" +
	167	"2008-05-08,12,88\n" +
	168	"2008-05-09,88,12\n" +
	169	"2008-05-10,63,37\n" +
	170	"2008-05-11,35,65\n",
	171	{
	172	series: {
	173	Idle: {stepPlot: true},
	174	Used: {stepPlot: false}
	175	},
	176
	177	fillGraph: false,
	178	stackedGraph: false,
	179	includeZero: true
	180	});
	181	</script>
	182
	183
	184	<p>10: Mixed mode - step and line (filled):</p>
	185	<div id="graphdiv10"></div>
	186	<script type="text/javascript">
	187	g8 = new Dygraph(document.getElementById("graphdiv10"),
	188	"Date,Idle,Used\n" +
	189	"2008-05-07,70,30\n" +
	190	"2008-05-08,12,88\n" +
	191	"2008-05-09,88,12\n" +
	192	"2008-05-10,63,37\n" +
	193	"2008-05-11,35,65\n",
	194	{
	195	series: {
	196	Idle: {stepPlot: false},
	197	Used: {stepPlot: true}
	198	},
	199
	200	fillGraph: true,
	201	stackedGraph: false,
	202	includeZero: true
	203	});
	204	</script>
	205
	206	<p>11: Mixed mode - step and line (stacked and filled):</p>
	207	<div id="graphdiv11"></div>
	208	<script type="text/javascript">
	209	g8 = new Dygraph(document.getElementById("graphdiv11"),
	210	"Date,Idle,Used,NotUsed,Active\n" +
	211	"2008-05-07,60,30,5,5\n" +
	212	"2008-05-08,12,73,5,10\n" +
	213	"2008-05-09,38,12,30,20\n" +
	214	"2008-05-10,50,17,23,10\n" +
	215	"2008-05-11,35,25,35,5\n",
	216	{
	217	series: {
	218	Idle: {stepPlot: false},
	219	Used: {stepPlot: true},
	220	NotUsed: {stepPlot: false},
	221	Active: {stepPlot: true}
	222	},
	223	fillGraph: true,
	224	stackedGraph: true,
	225	includeZero: true
	226	});
	227	</script>
	228
	229	<p>12: Mixed mode - step and line (errorbars):</p>
	230	<div id="graphdiv12"></div>
	231	<script type="text/javascript">
	232	g8 = new Dygraph(document.getElementById("graphdiv12"),
	233	[
	234	[1, [75, 2], [50, 3]],
	235	[2, [70, 5], [90, 4]],
	236	[3, [80, 7], [112, 5]],
	237	[4, [55, 3], [100, 2]],
	238	[5, [69, 4], [85, 6]]
	239	],
	240	{
	241	errorBars: true,
	242	labels: ["X", "Data1", "Data2"],
	243	series: {
	244	Data1: {stepPlot: true},
	245	Data2: {stepPlot: false}
	246	}
	247	}
	248	);
	249	</script>
	250
	251	<p>13: Mixed mode - step and line (custombars):</p>
	252	<div id="graphdiv13"></div>
	253	<script type="text/javascript">
	254	g8 = new Dygraph(document.getElementById("graphdiv13"),
	255	[
	256	[1, [73, 75, 78], [50, 55, 70]],
	257	[2, [65, 70, 75], [83, 91, 99]],
	258	[3, [75, 85, 90], [98, 107, 117]],
	259	[4, [55, 58, 61], [93, 102, 105]],
	260	[5, [69, 73, 85], [80, 85, 87]]
	261	],
	262	{
	263	customBars: true,
	264	labels: ["X", "Data1", "Data2"],
	265	series: {
	266	Data1: {stepPlot: true},
	267	Data2: {stepPlot: false}
	268	}
	269	}
	270	);
	271	</script>
	272
	273	</body>
	274	</html>