Ooh more code cleanup; all 155 tests pass.
[dygraphs.git] / tests / styled-chart-labels.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>two series</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 #div_g .dygraph-label {
18 /* This applies to the title, x-axis label and y-axis label */
19 font-family: Arial, Helvetica, sans-serif;
20 }
21 #div_g .dygraph-title {
22 /* This rule only applies to the chart title */
23 font-size: 24px;
24 text-shadow: gray 2px 2px 2px; /* color, delta-x, delta-y, blur radius */
25 }
26 #div_g .dygraph-ylabel {
27 /* This rule only applies to the y-axis label */
28 font-size: 18px;
29 text-shadow: gray -2px 2px 2px; /* (offsets are in a rotated frame) */
30 }
31 .chart {
32 border: 1px dashed black;
33 margin: 5px;
34 padding: 2px;
35 }
36 </style>
37 </head>
38 <body>
39 <p>In this chart, each chart label is styled independently. View source to
40 see how it works.</p>
41
42 <div class="chart" id="div_g" style="width:600px; height:300px;"></div>
43
44 <p>This version of the chart uses the default styles:</p>
45 <div class="chart" id="div_g2" style="width:600px; height:300px;"></div>
46
47 <script type="text/javascript">
48 g = new Dygraph(
49 document.getElementById("div_g"),
50 data, {
51 rollPeriod: 7,
52 legend: 'always',
53 title: 'High and Low Temperatures',
54 titleHeight: 32,
55 ylabel: 'Temperature (F)',
56 xlabel: 'Date (Ticks indicate the start of the indicated time period)',
57 labelsDivStyles: {
58 'text-align': 'right',
59 'background': 'none'
60 },
61 strokeWidth: 1.5
62 }
63 );
64
65 g2 = new Dygraph(
66 document.getElementById("div_g2"),
67 data, {
68 rollPeriod: 30,
69 legend: 'always',
70 title: 'High and Low Temperatures (30-day average)',
71 ylabel: 'Temperature (F)',
72 xlabel: 'Date (Ticks indicate the start of the indicated time period)',
73 labelsDivStyles: {
74 'text-align': 'right',
75 'background': 'none'
76 },
77 strokeWidth: 1.5
78 }
79 );
80 </script>
81 </body>
82 </html>