[dygraphs.git] / tests / range-selector.html

<!DOCTYPE html>
<html>
  <head>
    <title>Temperatures with Range Selector</title>
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
    #bordered {
      border: 1px solid red;
    }
    </style>
  </head>
  <body>
    <p>Demo of a graph with the range selector.</p>
    <p>
      No roll period.
    </p>
    <div id="noroll" style="width:800px; height:320px;"></div>
    <p>
      Roll period of 14 timesteps, custom range selector height and plot color.
    </p>
    <div id="roll14" style="width:800px; height:320px;"></div>
    <p>
      Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test).
      The default behaviour is to compute the average of <em>all</em> series.
    </p>
    <div id="selectcombined" style="width:800px; height:320px;"></div>
    <p>
      Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
    </p>
    <div id="nochart" style="width:800px; height:30px;"></div>
    <p>Demo of range selector with stepPlot</p>
    <div id="stepplot" style="width:800px; height:320px;"></div>

    <script type="text/javascript">
      g1 = new Dygraph(
          document.getElementById("noroll"),
          data_temp,
          {
            customBars: true,
            title: 'Daily Temperatures in New York vs. San Francisco',
            ylabel: 'Temperature (F)',
            legend: 'always',
            labelsDivStyles: { 'textAlign': 'right' },
            showRangeSelector: true
          }
      );
      g2 = new Dygraph(
          document.getElementById("roll14"),
          data_temp,
          {
            rollPeriod: 14,
            showRoller: true,
            customBars: true,
            title: 'Daily Temperatures in New York vs. San Francisco',
            ylabel: 'Temperature (F)',
            legend: 'always',
            labelsDivStyles: { 'textAlign': 'right' },
            xAxisHeight: 14,
            showRangeSelector: true,
            rangeSelectorHeight: 30,
            rangeSelectorPlotStrokeColor: 'yellow',
            rangeSelectorPlotFillColor: 'lightyellow'
          }
      );
      g3 = new Dygraph(
          document.getElementById("selectcombined"),
          [
            [0, 1, 4, 10],
            [10, 2, 8, 19],
            [25, 15, 4, 2],
            [35, 0, 3, 2]
          ],
          {
            title: 'Daily Temperatures in New York vs. San Francisco',
            ylabel: 'Temperature (F)',
            showRangeSelector: true,
            labels: ['X', 'Y1', 'Y2', 'Y3'],
            series: {
              'Y1': { showInRangeSelector: true }
            }
          }
      );
      g4 = new Dygraph(
          document.getElementById("nochart"),
          [[0,1],[10,1]],
          {
            xAxisHeight: 30,
            axes : {
              x : {
                drawAxis : false
              }
            },
            showRangeSelector: true,
            rangeSelectorHeight: 30
          }
      );
      g5 = new Dygraph(document.getElementById("stepplot"),
                      "Date,Idle,Used\n" +
                      "2008-05-07,70,30\n" +
                      "2008-05-08,42,88\n" +
                      "2008-05-09,88,42\n" +
                      "2008-05-10,33,37\n" +
                      "2008-05-11,30,35\n",
                       {
                          stepPlot: true,
                          fillGraph: true,
                          stackedGraph: true,
                          includeZero: true,
                          showRangeSelector: true
                       });
    </script>
  </body>
</html>
Commit	Line	Data
ccd9d7c2 PF	1	<!DOCTYPE html>
	2	<html>
	3	<head>
ccd9d7c2	4	<title>Temperatures with Range Selector</title>
ccd9d7c2 PF	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	<script type="text/javascript" src="data.js"></script>
	12	<style type="text/css">
	13	#bordered {
	14	border: 1px solid red;
	15	}
	16	</style>
	17	</head>
	18	<body>
	19	<p>Demo of a graph with the range selector.</p>
	20	<p>
	21	No roll period.
	22	</p>
	23	<div id="noroll" style="width:800px; height:320px;"></div>
	24	<p>
	25	Roll period of 14 timesteps, custom range selector height and plot color.
	26	</p>
	27	<div id="roll14" style="width:800px; height:320px;"></div>
28dde896	28	<p>
0a0885d1	29	Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test).
1085dbce PP	30	The default behaviour is to compute the average of <em>all</em> series.
	31	</p>
	32	<div id="selectcombined" style="width:800px; height:320px;"></div>
	33	<p>
28dde896 DE	34	Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
	35	</p>
	36	<div id="nochart" style="width:800px; height:30px;"></div>
e03f3a93 DV	37	<p>Demo of range selector with stepPlot</p>
	38	<div id="stepplot" style="width:800px; height:320px;"></div>
	39
ccd9d7c2 PF	40	<script type="text/javascript">
	41	g1 = new Dygraph(
	42	document.getElementById("noroll"),
	43	data_temp,
	44	{
	45	customBars: true,
	46	title: 'Daily Temperatures in New York vs. San Francisco',
	47	ylabel: 'Temperature (F)',
	48	legend: 'always',
	49	labelsDivStyles: { 'textAlign': 'right' },
	50	showRangeSelector: true
	51	}
	52	);
	53	g2 = new Dygraph(
	54	document.getElementById("roll14"),
	55	data_temp,
	56	{
	57	rollPeriod: 14,
	58	showRoller: true,
	59	customBars: true,
	60	title: 'Daily Temperatures in New York vs. San Francisco',
	61	ylabel: 'Temperature (F)',
	62	legend: 'always',
	63	labelsDivStyles: { 'textAlign': 'right' },
de8f284f	64	xAxisHeight: 14,
ccd9d7c2 PF	65	showRangeSelector: true,
	66	rangeSelectorHeight: 30,
	67	rangeSelectorPlotStrokeColor: 'yellow',
	68	rangeSelectorPlotFillColor: 'lightyellow'
	69	}
	70	);
28dde896	71	g3 = new Dygraph(
1085dbce PP	72	document.getElementById("selectcombined"),
	73	[
	74	[0, 1, 4, 10],
	75	[10, 2, 8, 19],
	76	[25, 15, 4, 2],
	77	[35, 0, 3, 2]
	78	],
	79	{
	80	title: 'Daily Temperatures in New York vs. San Francisco',
	81	ylabel: 'Temperature (F)',
	82	showRangeSelector: true,
0a0885d1 DV	83	labels: ['X', 'Y1', 'Y2', 'Y3'],
	84	series: {
	85	'Y1': { showInRangeSelector: true }
	86	}
1085dbce PP	87	}
	88	);
	89	g4 = new Dygraph(
28dde896 DE	90	document.getElementById("nochart"),
	91	[[0,1],[10,1]],
	92	{
	93	xAxisHeight: 30,
bfb3e0a4 RK	94	axes : {
	95	x : {
	96	drawAxis : false
	97	}
	98	},
28dde896	99	showRangeSelector: true,
8ef9d44d	100	rangeSelectorHeight: 30
28dde896 DE	101	}
28dde896 DE	102	);
e03f3a93 DV	103	g5 = new Dygraph(document.getElementById("stepplot"),
	104	"Date,Idle,Used\n" +
	105	"2008-05-07,70,30\n" +
	106	"2008-05-08,42,88\n" +
	107	"2008-05-09,88,42\n" +
	108	"2008-05-10,33,37\n" +
	109	"2008-05-11,30,35\n",
	110	{
	111	stepPlot: true,
	112	fillGraph: true,
	113	stackedGraph: true,
	114	includeZero: true,
	115	showRangeSelector: true
	116	});
ccd9d7c2 PF	117	</script>
	118	</body>
	119	</html>