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

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Temperatures with Range Selector</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>

    <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,
            drawXAxis: 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>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	5	<title>Temperatures with Range Selector</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	<script type="text/javascript" src="data.js"></script>
	16	<style type="text/css">
	17	#bordered {
	18	border: 1px solid red;
	19	}
	20	</style>
	21	</head>
	22	<body>
	23	<p>Demo of a graph with the range selector.</p>
	24	<p>
	25	No roll period.
	26	</p>
	27	<div id="noroll" style="width:800px; height:320px;"></div>
	28	<p>
	29	Roll period of 14 timesteps, custom range selector height and plot color.
	30	</p>
	31	<div id="roll14" style="width:800px; height:320px;"></div>
28dde896	32	<p>
0a0885d1	33	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	34	The default behaviour is to compute the average of <em>all</em> series.
	35	</p>
	36	<div id="selectcombined" style="width:800px; height:320px;"></div>
	37	<p>
28dde896 DE	38	Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
	39	</p>
	40	<div id="nochart" style="width:800px; height:30px;"></div>
e03f3a93 DV	41	<p>Demo of range selector with stepPlot</p>
	42	<div id="stepplot" style="width:800px; height:320px;"></div>
	43
ccd9d7c2 PF	44	<script type="text/javascript">
	45	g1 = new Dygraph(
	46	document.getElementById("noroll"),
	47	data_temp,
	48	{
	49	customBars: true,
	50	title: 'Daily Temperatures in New York vs. San Francisco',
	51	ylabel: 'Temperature (F)',
	52	legend: 'always',
	53	labelsDivStyles: { 'textAlign': 'right' },
	54	showRangeSelector: true
	55	}
	56	);
	57	g2 = new Dygraph(
	58	document.getElementById("roll14"),
	59	data_temp,
	60	{
	61	rollPeriod: 14,
	62	showRoller: true,
	63	customBars: true,
	64	title: 'Daily Temperatures in New York vs. San Francisco',
	65	ylabel: 'Temperature (F)',
	66	legend: 'always',
	67	labelsDivStyles: { 'textAlign': 'right' },
de8f284f	68	xAxisHeight: 14,
ccd9d7c2 PF	69	showRangeSelector: true,
	70	rangeSelectorHeight: 30,
	71	rangeSelectorPlotStrokeColor: 'yellow',
	72	rangeSelectorPlotFillColor: 'lightyellow'
	73	}
	74	);
28dde896	75	g3 = new Dygraph(
1085dbce PP	76	document.getElementById("selectcombined"),
	77	[
	78	[0, 1, 4, 10],
	79	[10, 2, 8, 19],
	80	[25, 15, 4, 2],
	81	[35, 0, 3, 2]
	82	],
	83	{
	84	title: 'Daily Temperatures in New York vs. San Francisco',
	85	ylabel: 'Temperature (F)',
	86	showRangeSelector: true,
0a0885d1 DV	87	labels: ['X', 'Y1', 'Y2', 'Y3'],
	88	series: {
	89	'Y1': { showInRangeSelector: true }
	90	}
1085dbce PP	91	}
	92	);
	93	g4 = new Dygraph(
28dde896 DE	94	document.getElementById("nochart"),
	95	[[0,1],[10,1]],
	96	{
	97	xAxisHeight: 30,
	98	drawXAxis: false,
	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>