[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="../dist/dygraph.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
    #bordered {
      border: 1px solid red;
    }
    #dark-background {
      background-color: #101015;
      color: white;
    }
    </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>

    <h2 id="options">Range selector options</h2>
    <p>Here's a view of how the various <a href="../options.html#Range%20Selector">range selector options</a> affect the display:</p>
    <img width="954" height="354" src="range-selector-anatomy.png">

    <p>
      Roll period of 14 timesteps, various custom range selector options.
    </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>
    <div id="dark-background">
      <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p>
      <div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div>
      <div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div>
    </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: 80,
            rangeSelectorPlotStrokeColor: 'purple',
            rangeSelectorPlotFillColor: 'black',
            rangeSelectorBackgroundStrokeColor: 'orange',
            rangeSelectorBackgroundLineWidth: 4,
            rangeSelectorPlotLineWidth: 5,
            rangeSelectorForegroundStrokeColor: 'brown',
            rangeSelectorForegroundLineWidth: 8,
            rangeSelectorAlpha: 0.5,
            rangeSelectorPlotFillGradientColor: 'red'
          }
      );
      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
              }
            },
            labels: ['X', 'Y'],
            showRangeSelector: true,
            rangeSelectorHeight: 30
          }
      );
      g5 = new Dygraph(
          document.getElementById("darkbg1"),
          data_temp,
          {
              rollPeriod: 14,
              showRoller: true,
              customBars: true,
              title: 'Nightly Temperatures in NY vs. SF',
              ylabel: 'Temperature (F)',
              legend: 'always',
              labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
              showRangeSelector: true,
              rangeSelectorPlotFillColor: 'MediumSlateBlue',
              rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
              axisLabelColor: 'white',
              colorValue: 0.9,
              fillAlpha: 0.4
          }
      );
      g6 = new Dygraph(
          document.getElementById("darkbg2"),
          data_temp,
          {
              rollPeriod: 14,
              showRoller: true,
              customBars: true,
              title: 'Nightly Temperatures in NY vs. SF',
              ylabel: 'Temperature (F)',
              legend: 'always',
              labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
              showRangeSelector: true,
              rangeSelectorPlotFillColor: 'MediumSlateBlue',
              axisLabelColor: 'white',
              colorValue: 0.9,
              fillAlpha: 0.4
          }
      );
      g7 = 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	-->
fbd6834a	9	<script type="text/javascript" src="../dist/dygraph.js"></script>
ccd9d7c2 PF	10
	11	<script type="text/javascript" src="data.js"></script>
	12	<style type="text/css">
	13	#bordered {
	14	border: 1px solid red;
	15	}
79cb28dd	16	#dark-background {
	17	background-color: #101015;
	18	color: white;
	19	}
ccd9d7c2 PF	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>
2555a4ed DV	28
	29	<h2 id="options">Range selector options</h2>
	30	<p>Here's a view of how the various <a href="../options.html#Range%20Selector">range selector options</a> affect the display:</p>
	31	<img width="954" height="354" src="range-selector-anatomy.png">
	32
ccd9d7c2	33	<p>
31a319fe	34	Roll period of 14 timesteps, various custom range selector options.
ccd9d7c2 PF	35	</p>
ccd9d7c2 PF	36	<div id="roll14" style="width:800px; height:320px;"></div>
28dde896	37	<p>
0a0885d1	38	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	39	The default behaviour is to compute the average of <em>all</em> series.
	40	</p>
	41	<div id="selectcombined" style="width:800px; height:320px;"></div>
2555a4ed	42
1085dbce	43	<p>
28dde896 DE	44	Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
	45	</p>
	46	<div id="nochart" style="width:800px; height:30px;"></div>
79cb28dd	47	<div id="dark-background">
	48	<p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p>
	49	<div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div>
	50	<div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div>
	51	</div>
e03f3a93 DV	52	<p>Demo of range selector with stepPlot</p>
	53	<div id="stepplot" style="width:800px; height:320px;"></div>
	54
ccd9d7c2 PF	55	<script type="text/javascript">
	56	g1 = new Dygraph(
	57	document.getElementById("noroll"),
	58	data_temp,
	59	{
	60	customBars: true,
	61	title: 'Daily Temperatures in New York vs. San Francisco',
	62	ylabel: 'Temperature (F)',
	63	legend: 'always',
	64	labelsDivStyles: { 'textAlign': 'right' },
	65	showRangeSelector: true
	66	}
	67	);
	68	g2 = new Dygraph(
	69	document.getElementById("roll14"),
	70	data_temp,
	71	{
	72	rollPeriod: 14,
	73	showRoller: true,
	74	customBars: true,
	75	title: 'Daily Temperatures in New York vs. San Francisco',
	76	ylabel: 'Temperature (F)',
	77	legend: 'always',
	78	labelsDivStyles: { 'textAlign': 'right' },
de8f284f	79	xAxisHeight: 14,
ccd9d7c2	80	showRangeSelector: true,
2555a4ed DV	81	rangeSelectorHeight: 80,
2555a4ed DV	82	rangeSelectorPlotStrokeColor: 'purple',
31a319fe	83	rangeSelectorPlotFillColor: 'black',
2555a4ed	84	rangeSelectorBackgroundStrokeColor: 'orange',
31a319fe	85	rangeSelectorBackgroundLineWidth: 4,
2555a4ed	86	rangeSelectorPlotLineWidth: 5,
31a319fe	87	rangeSelectorForegroundStrokeColor: 'brown',
2555a4ed DV	88	rangeSelectorForegroundLineWidth: 8,
	89	rangeSelectorAlpha: 0.5,
	90	rangeSelectorPlotFillGradientColor: 'red'
ccd9d7c2 PF	91	}
ccd9d7c2 PF	92	);
28dde896	93	g3 = new Dygraph(
1085dbce PP	94	document.getElementById("selectcombined"),
	95	[
	96	[0, 1, 4, 10],
	97	[10, 2, 8, 19],
	98	[25, 15, 4, 2],
	99	[35, 0, 3, 2]
	100	],
	101	{
	102	title: 'Daily Temperatures in New York vs. San Francisco',
	103	ylabel: 'Temperature (F)',
	104	showRangeSelector: true,
0a0885d1 DV	105	labels: ['X', 'Y1', 'Y2', 'Y3'],
	106	series: {
	107	'Y1': { showInRangeSelector: true }
	108	}
1085dbce PP	109	}
	110	);
	111	g4 = new Dygraph(
28dde896 DE	112	document.getElementById("nochart"),
	113	[[0,1],[10,1]],
	114	{
	115	xAxisHeight: 30,
bfb3e0a4 RK	116	axes : {
	117	x : {
	118	drawAxis : false
	119	}
	120	},
2b66af4f	121	labels: ['X', 'Y'],
28dde896	122	showRangeSelector: true,
8ef9d44d	123	rangeSelectorHeight: 30
28dde896 DE	124	}
28dde896 DE	125	);
79cb28dd	126	g5 = new Dygraph(
	127	document.getElementById("darkbg1"),
	128	data_temp,
	129	{
	130	rollPeriod: 14,
	131	showRoller: true,
	132	customBars: true,
	133	title: 'Nightly Temperatures in NY vs. SF',
	134	ylabel: 'Temperature (F)',
	135	legend: 'always',
	136	labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
	137	showRangeSelector: true,
	138	rangeSelectorPlotFillColor: 'MediumSlateBlue',
	139	rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
	140	axisLabelColor: 'white',
	141	colorValue: 0.9,
	142	fillAlpha: 0.4
	143	}
	144	);
	145	g6 = new Dygraph(
	146	document.getElementById("darkbg2"),
	147	data_temp,
	148	{
	149	rollPeriod: 14,
	150	showRoller: true,
	151	customBars: true,
	152	title: 'Nightly Temperatures in NY vs. SF',
	153	ylabel: 'Temperature (F)',
	154	legend: 'always',
	155	labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
	156	showRangeSelector: true,
	157	rangeSelectorPlotFillColor: 'MediumSlateBlue',
	158	axisLabelColor: 'white',
	159	colorValue: 0.9,
	160	fillAlpha: 0.4
	161	}
	162	);
	163	g7 = new Dygraph(document.getElementById("stepplot"),
e03f3a93 DV	164	"Date,Idle,Used\n" +
	165	"2008-05-07,70,30\n" +
	166	"2008-05-08,42,88\n" +
	167	"2008-05-09,88,42\n" +
	168	"2008-05-10,33,37\n" +
	169	"2008-05-11,30,35\n",
	170	{
	171	stepPlot: true,
	172	fillGraph: true,
	173	stackedGraph: true,
	174	includeZero: true,
	175	showRangeSelector: true
	176	});
ccd9d7c2 PF	177	</script>
	178	</body>
	179	</html>