[dygraphs.git] / tests / steps.html

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