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

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