[dygraphs.git] / tests / steps.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>dygraph</title>
    <script type="text/javascript" src="../dist/dygraph.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
54425b14	1	<!DOCTYPE html>
342b0985 NN	2	<html>
342b0985 NN	3	<head>
fd6b8dad	4	<link rel="stylesheet" href="../dist/dygraph.css">
342b0985	5	<title>dygraph</title>
fbd6834a	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94	7
342b0985 NN	8	</head>
	9	<body>
	10	<p>1: Simple line chart:</p>
	11	<div id="graphdiv1"></div>
	12	<script type="text/javascript">
	13	g1 = new Dygraph(document.getElementById("graphdiv1"),
	14	"Date,Temperature\n" +
	15	"2008-05-07,75\n" +
	16	"2008-05-08,70\n" +
	17	"2008-05-09,80\n" +
	18	"2008-05-10,55\n" +
	19	"2008-05-11,69\n");
	20	</script>
	21
	22	<p>2: Simple step chart:</p>
	23	<div id="graphdiv2"></div>
	24	<script type="text/javascript">
	25	g2 = new Dygraph(document.getElementById("graphdiv2"),
	26	"Date,Temperature\n" +
	27	"2008-05-07,75\n" +
	28	"2008-05-08,70\n" +
	29	"2008-05-09,80\n" +
	30	"2008-05-10,55\n" +
	31	"2008-05-11,69\n",
	32	{
	33	stepPlot: true
	34	});
	35	</script>
	36
	37	<p>3: Filled step chart:</p>
	38	<div id="graphdiv3"></div>
	39	<script type="text/javascript">
	40	g3 = new Dygraph(document.getElementById("graphdiv3"),
	41	"Date,Temperature\n" +
	42	"2008-05-07,75\n" +
	43	"2008-05-08,70\n" +
	44	"2008-05-09,80\n" +
	45	"2008-05-10,55\n" +
	46	"2008-05-11,69\n",
	47	{
	48	stepPlot: true,
	49	fillGraph: true
	50	});
	51	</script>
	52
	53	<p>4: Line chart with error bars:</p>
	54	<div id="graphdiv4"></div>
	55	<script type="text/javascript">
	56	g4 = new Dygraph(document.getElementById("graphdiv4"),
	57	[
	58	[1, [75, 2]],
	59	[2, [70, 5]],
	60	[3, [80, 7]],
	61	[4, [55, 3]],
	62	[5, [69, 4]]
	63	],
	64	{
	65	errorBars: true,
	66	labels: ["X", "Data"]
	67	}
	68	);
	69	</script>
	70
	71	<p>5: Step chart with error bars:</p>
72	<div id="graphdiv5"></div>
73	<script type="text/javascript">
74	g5 = new Dygraph(document.getElementById("graphdiv5"),
75	[
76	[1, [75, 2]],
77	[2, [70, 5]],
78	[3, [80, 7]],
79	[4, [55, 3]],
80	[5, [69, 4]]
81	],
82	{
83	stepPlot: true,
84	errorBars: true,
85	labels: ["X", "Data"]
86	}
87	);
88	</script>
89
90	<p>6: Stepped chart with gaps from CSV:</p>
91	<div id="graphdiv6"></div>
92	<script type="text/javascript">
93	g6 = new Dygraph(
94	document.getElementById("graphdiv6"),
95	"Date,GapSeries1,GapSeries2\n" +
96	"2009/12/01,10,10\n" +
97	"2009/12/02,15,11\n" +
98	"2009/12/03,,12\n" +
5d13ef68	99	"2009/12/04,,13\n" +
342b0985 NN	100	"2009/12/05,15,\n" +
	101	"2009/12/06,18,15\n" +
	102	"2009/12/07,12,16\n",
	103	{
	104	stepPlot: true
	105	}
	106	);
	107	</script>
	108
	109	<p>7: Stepped chart with gaps from native data:</p>
	110	<div id="graphdiv7"></div>
	111	<script type="text/javascript">
	112	g7 = new Dygraph(
	113	document.getElementById("graphdiv7"),
	114	[
	115	[ new Date("2009/12/01"), 10, 10],
	116	[ new Date("2009/12/02"), 15, 11],
	117	[ new Date("2009/12/03"), null, 12],
5d13ef68	118	[ new Date("2009/12/04"), null, 13],
342b0985 NN	119	[ new Date("2009/12/05"), 15, null],
	120	[ new Date("2009/12/06"), 18, 15],
	121	[ new Date("2009/12/07"), 12, 16]
	122	],
	123	{
	124	labels: ["Date","GapSeries1","GapSeries2"],
	125	showRoller: true,
44c6bc29	126	stepPlot: true,
27fd63fc DV	127	series: {
	128	GapSeries2: {
	129	axis: 'y2'
	130	}
	131	}
342b0985 NN	132	}
	133	);
	134	</script>
349dd9ba DW	135
	136	<p>8: Stacked filled step chart:</p>
	137	<div id="graphdiv8"></div>
	138	<script type="text/javascript">
	139	g8 = new Dygraph(document.getElementById("graphdiv8"),
	140	"Date,Idle,Used\n" +
	141	"2008-05-07,70,30\n" +
	142	"2008-05-08,12,88\n" +
	143	"2008-05-09,88,12\n" +
	144	"2008-05-10,63,37\n" +
	145	"2008-05-11,35,65\n",
	146	{
	147	stepPlot: true,
	148	fillGraph: true,
	149	stackedGraph: true,
	150	includeZero: true
	151	});
	152	</script>
104d87c5	153
	154	<p>9: Mixed mode - step and line:</p>
	155	<div id="graphdiv9"></div>
	156	<script type="text/javascript">
	157	g8 = new Dygraph(document.getElementById("graphdiv9"),
	158	"Date,Idle,Used\n" +
	159	"2008-05-07,70,30\n" +
	160	"2008-05-08,12,88\n" +
	161	"2008-05-09,88,12\n" +
	162	"2008-05-10,63,37\n" +
	163	"2008-05-11,35,65\n",
	164	{
	165	series: {
	166	Idle: {stepPlot: true},
	167	Used: {stepPlot: false}
	168	},
	169
	170	fillGraph: false,
	171	stackedGraph: false,
	172	includeZero: true
	173	});
	174	</script>
	175
	176
	177	<p>10: Mixed mode - step and line (filled):</p>
	178	<div id="graphdiv10"></div>
	179	<script type="text/javascript">
	180	g8 = new Dygraph(document.getElementById("graphdiv10"),
	181	"Date,Idle,Used\n" +
	182	"2008-05-07,70,30\n" +
	183	"2008-05-08,12,88\n" +
	184	"2008-05-09,88,12\n" +
	185	"2008-05-10,63,37\n" +
	186	"2008-05-11,35,65\n",
	187	{
	188	series: {
	189	Idle: {stepPlot: false},
	190	Used: {stepPlot: true}
	191	},
	192
	193	fillGraph: true,
	194	stackedGraph: false,
	195	includeZero: true
	196	});
	197	</script>
	198
	199	<p>11: Mixed mode - step and line (stacked and filled):</p>
	200	<div id="graphdiv11"></div>
	201	<script type="text/javascript">
	202	g8 = new Dygraph(document.getElementById("graphdiv11"),
	203	"Date,Idle,Used,NotUsed,Active\n" +
	204	"2008-05-07,60,30,5,5\n" +
	205	"2008-05-08,12,73,5,10\n" +
	206	"2008-05-09,38,12,30,20\n" +
	207	"2008-05-10,50,17,23,10\n" +
	208	"2008-05-11,35,25,35,5\n",
	209	{
	210	series: {
	211	Idle: {stepPlot: false},
	212	Used: {stepPlot: true},
	213	NotUsed: {stepPlot: false},
	214	Active: {stepPlot: true}
	215	},
	216	fillGraph: true,
217	stackedGraph: true,
218	includeZero: true
219	});
220	</script>
221
222	<p>12: Mixed mode - step and line (errorbars):</p>
223	<div id="graphdiv12"></div>
224	<script type="text/javascript">
225	g8 = new Dygraph(document.getElementById("graphdiv12"),
226	[
227	[1, [75, 2], [50, 3]],
228	[2, [70, 5], [90, 4]],
229	[3, [80, 7], [112, 5]],
230	[4, [55, 3], [100, 2]],
231	[5, [69, 4], [85, 6]]
232	],
233	{
234	errorBars: true,
235	labels: ["X", "Data1", "Data2"],
236	series: {
237	Data1: {stepPlot: true},
238	Data2: {stepPlot: false}
239	}
240	}
241	);
242	</script>
243
244	<p>13: Mixed mode - step and line (custombars):</p>
245	<div id="graphdiv13"></div>
246	<script type="text/javascript">
247	g8 = new Dygraph(document.getElementById("graphdiv13"),
248	[
249	[1, [73, 75, 78], [50, 55, 70]],
250	[2, [65, 70, 75], [83, 91, 99]],
251	[3, [75, 85, 90], [98, 107, 117]],
252	[4, [55, 58, 61], [93, 102, 105]],
253	[5, [69, 73, 85], [80, 85, 87]]
254	],
255	{
256	customBars: true,
257	labels: ["X", "Data1", "Data2"],
258	series: {
259	Data1: {stepPlot: true},
260	Data2: {stepPlot: false}
261	}
262	}
263	);
264	</script>
342b0985 NN	265
	266	</body>
	267	</html>