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

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