[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;
    }
    #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>
    <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>
    <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: 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("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	-->
	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	}
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>
	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>
79cb28dd	41	<div id="dark-background">
	42	<p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p>
	43	<div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div>
	44	<div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div>
	45	</div>
e03f3a93 DV	46	<p>Demo of range selector with stepPlot</p>
	47	<div id="stepplot" style="width:800px; height:320px;"></div>
	48
ccd9d7c2 PF	49	<script type="text/javascript">
	50	g1 = new Dygraph(
	51	document.getElementById("noroll"),
	52	data_temp,
	53	{
	54	customBars: true,
	55	title: 'Daily Temperatures in New York vs. San Francisco',
	56	ylabel: 'Temperature (F)',
	57	legend: 'always',
	58	labelsDivStyles: { 'textAlign': 'right' },
	59	showRangeSelector: true
	60	}
	61	);
	62	g2 = new Dygraph(
	63	document.getElementById("roll14"),
	64	data_temp,
	65	{
	66	rollPeriod: 14,
	67	showRoller: true,
	68	customBars: true,
	69	title: 'Daily Temperatures in New York vs. San Francisco',
	70	ylabel: 'Temperature (F)',
	71	legend: 'always',
	72	labelsDivStyles: { 'textAlign': 'right' },
de8f284f	73	xAxisHeight: 14,
ccd9d7c2 PF	74	showRangeSelector: true,
	75	rangeSelectorHeight: 30,
	76	rangeSelectorPlotStrokeColor: 'yellow',
	77	rangeSelectorPlotFillColor: 'lightyellow'
	78	}
	79	);
28dde896	80	g3 = new Dygraph(
1085dbce PP	81	document.getElementById("selectcombined"),
	82	[
	83	[0, 1, 4, 10],
	84	[10, 2, 8, 19],
	85	[25, 15, 4, 2],
	86	[35, 0, 3, 2]
	87	],
	88	{
	89	title: 'Daily Temperatures in New York vs. San Francisco',
	90	ylabel: 'Temperature (F)',
	91	showRangeSelector: true,
0a0885d1 DV	92	labels: ['X', 'Y1', 'Y2', 'Y3'],
	93	series: {
	94	'Y1': { showInRangeSelector: true }
	95	}
1085dbce PP	96	}
	97	);
	98	g4 = new Dygraph(
28dde896 DE	99	document.getElementById("nochart"),
	100	[[0,1],[10,1]],
	101	{
	102	xAxisHeight: 30,
bfb3e0a4 RK	103	axes : {
	104	x : {
	105	drawAxis : false
	106	}
	107	},
28dde896	108	showRangeSelector: true,
8ef9d44d	109	rangeSelectorHeight: 30
28dde896 DE	110	}
28dde896 DE	111	);
79cb28dd	112	g5 = new Dygraph(
	113	document.getElementById("darkbg1"),
	114	data_temp,
	115	{
	116	rollPeriod: 14,
	117	showRoller: true,
	118	customBars: true,
	119	title: 'Nightly Temperatures in NY vs. SF',
	120	ylabel: 'Temperature (F)',
	121	legend: 'always',
	122	labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
	123	showRangeSelector: true,
	124	rangeSelectorPlotFillColor: 'MediumSlateBlue',
	125	rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
	126	axisLabelColor: 'white',
	127	colorValue: 0.9,
	128	fillAlpha: 0.4
	129	}
	130	);
	131	g6 = new Dygraph(
	132	document.getElementById("darkbg2"),
	133	data_temp,
	134	{
	135	rollPeriod: 14,
	136	showRoller: true,
	137	customBars: true,
	138	title: 'Nightly Temperatures in NY vs. SF',
	139	ylabel: 'Temperature (F)',
	140	legend: 'always',
	141	labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
	142	showRangeSelector: true,
	143	rangeSelectorPlotFillColor: 'MediumSlateBlue',
	144	axisLabelColor: 'white',
	145	colorValue: 0.9,
	146	fillAlpha: 0.4
	147	}
	148	);
	149	g7 = new Dygraph(document.getElementById("stepplot"),
e03f3a93 DV	150	"Date,Idle,Used\n" +
	151	"2008-05-07,70,30\n" +
	152	"2008-05-08,42,88\n" +
	153	"2008-05-09,88,42\n" +
	154	"2008-05-10,33,37\n" +
	155	"2008-05-11,30,35\n",
	156	{
	157	stepPlot: true,
	158	fillGraph: true,
	159	stackedGraph: true,
	160	includeZero: true,
	161	showRangeSelector: true
	162	});
ccd9d7c2 PF	163	</script>
	164	</body>
	165	</html>