Use "legend" option with "follow" value. Hide legend on deselect.
[dygraphs.git] / tests / temperature-sf-ny.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>Temperatures</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
15 <script type="text/javascript" src="data.js"></script>
16 <style type="text/css">
17 #bordered {
18 border: 1px solid red;
19 }
20 </style>
21 </head>
22 <body>
23 <p>Demo of a graph with many data points and custom error bars.</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.
30 </p>
31 <div id="roll14" style="width:800px; height:320px;"></div>
32 <script type="text/javascript">
33 g1 = new Dygraph(
34 document.getElementById("noroll"),
35 data_temp,
36 {
37 customBars: true,
38 title: 'Daily Temperatures in New York vs. San Francisco',
39 ylabel: 'Temperature (F)',
40 legend: 'always',
41 labelsDivStyles: { 'textAlign': 'right' }
42 }
43 );
44 g2 = new Dygraph(
45 document.getElementById("roll14"),
46 data_temp,
47 {
48 rollPeriod: 14,
49 showRoller: true,
50 customBars: true,
51 title: 'Daily Temperatures in New York vs. San Francisco',
52 ylabel: 'Temperature (F)',
53 legend: 'always',
54 labelsDivStyles: { 'textAlign': 'right' }
55 }
56 );
57 </script>
58 </body>
59 </html>