[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
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<link rel="stylesheet" href="../css/dygraph.css">
	5	<title>Temperatures with Range Selector</title>
	6	<!--
	7	For production (minified) code, use:
	8	<script type="text/javascript" src="dygraph-combined.js"></script>
	9	-->
	10	<script type="text/javascript" src="../dist/dygraph.js"></script>
	11
	12	<script type="text/javascript" src="data.js"></script>
	13	<style type="text/css">
	14	#bordered {
	15	border: 1px solid red;
	16	}
	17	#dark-background {
	18	background-color: #101015;
	19	color: white;
	20	}
	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	}
	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>
	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
	49	<p>
	50	Roll period of 14 timesteps, various custom range selector options.
	51	</p>
	52	<div id="roll14" style="width:800px; height:320px;"></div>
	53	<p>
	54	Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test).
	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>
	58
	59	<p>
	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>
	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>
	68	<p>Demo of range selector with stepPlot</p>
	69	<div id="stepplot" style="width:800px; height:320px;"></div>
	70
	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',
	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',
	93	xAxisHeight: 14,
	94	showRangeSelector: true,
	95	rangeSelectorHeight: 80,
	96	rangeSelectorPlotStrokeColor: 'purple',
	97	rangeSelectorPlotFillColor: 'black',
	98	rangeSelectorBackgroundStrokeColor: 'orange',
	99	rangeSelectorBackgroundLineWidth: 4,
	100	rangeSelectorPlotLineWidth: 5,
	101	rangeSelectorForegroundStrokeColor: 'brown',
	102	rangeSelectorForegroundLineWidth: 8,
	103	rangeSelectorAlpha: 0.5,
	104	rangeSelectorPlotFillGradientColor: 'red'
	105	}
	106	);
	107	g3 = new Dygraph(
	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,
	119	labels: ['X', 'Y1', 'Y2', 'Y3'],
	120	series: {
	121	'Y1': { showInRangeSelector: true }
	122	}
	123	}
	124	);
	125	g4 = new Dygraph(
	126	document.getElementById("nochart"),
	127	[[0,1],[10,1]],
	128	{
	129	xAxisHeight: 30,
	130	axes : {
	131	x : {
	132	drawAxis : false
	133	}
	134	},
	135	labels: ['X', 'Y'],
	136	showRangeSelector: true,
	137	rangeSelectorHeight: 30
	138	}
	139	);
	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',
	150	showRangeSelector: true,
	151	rangeSelectorPlotFillColor: 'MediumSlateBlue',
	152	rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
	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',
	167	showRangeSelector: true,
	168	rangeSelectorPlotFillColor: 'MediumSlateBlue',
	169	colorValue: 0.9,
	170	fillAlpha: 0.4
	171	}
	172	);
	173	g7 = new Dygraph(document.getElementById("stepplot"),
	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	});
	187	</script>
	188	</body>
	189	</html>