[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>
	
	<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>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
342b0985 NN	5	<title>dygraph</title>
342b0985 NN	6	<!--[if IE]>
a2b2c3a1	7	<script type="text/javascript" src="../excanvas.js"></script>
342b0985	8	<![endif]-->
7e5ddc94 DV	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
342b0985 NN	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" +
5d13ef68	106	"2009/12/04,,13\n" +
342b0985 NN	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],
5d13ef68	125	[ new Date("2009/12/04"), null, 13],
342b0985 NN	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,
44c6bc29 DV	133	stepPlot: true,
44c6bc29 DV	134	GapSeries2: { axis: {} }
342b0985 NN	135	}
	136	);
	137	</script>
349dd9ba DW	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>
104d87c5	156
	157	<p>9: Mixed mode - step and line:</p>
	158	<div id="graphdiv9"></div>
	159	<script type="text/javascript">
	160	g8 = new Dygraph(document.getElementById("graphdiv9"),
	161	"Date,Idle,Used\n" +
	162	"2008-05-07,70,30\n" +
	163	"2008-05-08,12,88\n" +
	164	"2008-05-09,88,12\n" +
	165	"2008-05-10,63,37\n" +
	166	"2008-05-11,35,65\n",
	167	{
	168	series: {
	169	Idle: {stepPlot: true},
	170	Used: {stepPlot: false}
	171	},
	172
	173	fillGraph: false,
	174	stackedGraph: false,
	175	includeZero: true
	176	});
	177	</script>
	178
	179
	180	<p>10: Mixed mode - step and line (filled):</p>
	181	<div id="graphdiv10"></div>
	182	<script type="text/javascript">
	183	g8 = new Dygraph(document.getElementById("graphdiv10"),
	184	"Date,Idle,Used\n" +
	185	"2008-05-07,70,30\n" +
	186	"2008-05-08,12,88\n" +
	187	"2008-05-09,88,12\n" +
	188	"2008-05-10,63,37\n" +
	189	"2008-05-11,35,65\n",
	190	{
	191	series: {
	192	Idle: {stepPlot: false},
	193	Used: {stepPlot: true}
	194	},
	195
	196	fillGraph: true,
	197	stackedGraph: false,
	198	includeZero: true
	199	});
	200	</script>
	201
	202	<p>11: Mixed mode - step and line (stacked and filled):</p>
	203	<div id="graphdiv11"></div>
	204	<script type="text/javascript">
	205	g8 = new Dygraph(document.getElementById("graphdiv11"),
	206	"Date,Idle,Used,NotUsed,Active\n" +
	207	"2008-05-07,60,30,5,5\n" +
	208	"2008-05-08,12,73,5,10\n" +
	209	"2008-05-09,38,12,30,20\n" +
	210	"2008-05-10,50,17,23,10\n" +
	211	"2008-05-11,35,25,35,5\n",
	212	{
	213	series: {
	214	Idle: {stepPlot: false},
	215	Used: {stepPlot: true},
	216	NotUsed: {stepPlot: false},
	217	Active: {stepPlot: true}
	218	},
	219	fillGraph: true,
220	stackedGraph: true,
221	includeZero: true
222	});
223	</script>
224
225	<p>12: Mixed mode - step and line (errorbars):</p>
226	<div id="graphdiv12"></div>
227	<script type="text/javascript">
228	g8 = new Dygraph(document.getElementById("graphdiv12"),
229	[
230	[1, [75, 2], [50, 3]],
231	[2, [70, 5], [90, 4]],
232	[3, [80, 7], [112, 5]],
233	[4, [55, 3], [100, 2]],
234	[5, [69, 4], [85, 6]]
235	],
236	{
237	errorBars: true,
238	labels: ["X", "Data1", "Data2"],
239	series: {
240	Data1: {stepPlot: true},
241	Data2: {stepPlot: false}
242	}
243	}
244	);
245	</script>
246
247	<p>13: Mixed mode - step and line (custombars):</p>
248	<div id="graphdiv13"></div>
249	<script type="text/javascript">
250	g8 = new Dygraph(document.getElementById("graphdiv13"),
251	[
252	[1, [73, 75, 78], [50, 55, 70]],
253	[2, [65, 70, 75], [83, 91, 99]],
254	[3, [75, 85, 90], [98, 107, 117]],
255	[4, [55, 58, 61], [93, 102, 105]],
256	[5, [69, 73, 85], [80, 85, 87]]
257	],
258	{
259	customBars: true,
260	labels: ["X", "Data1", "Data2"],
261	series: {
262	Data1: {stepPlot: true},
263	Data2: {stepPlot: false}
264	}
265	}
266	);
267	</script>
342b0985 NN	268
	269	</body>
	270	</html>