more chart label tweaks -- getting close!
[dygraphs.git] / tests / styled-chart-labels.html
CommitLineData
ca49434a
DV
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 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
10 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
11 <script type="text/javascript" src="../dygraph-canvas.js"></script>
12 <script type="text/javascript" src="../dygraph.js"></script>
13 <script type="text/javascript" src="data.js"></script>
14 <style type="text/css">
15 .dygraph-label {
16 /* This applies to the title, x-axis label and y-axis label */
17 font-family: Arial, Helvetica, sans-serif;
18 }
19 .dygraph-title {
20 /* This rule only applies to the chart title */
21 font-size: 24px;
22 text-shadow: gray 2px 2px 2px; /* color, delta-x, delta-y, blur radius */
23 }
24 .dygraph-ylabel {
25 /* This rule only applies to the y-axis label */
26 font-size: 18px;
27 text-shadow: gray -2px 2px 2px; /* (offsets are in a rotated frame) */
28 }
29 </style>
30 </head>
31 <body>
32 <div id="div_g" style="width:600px; height:300px;"></div>
33
34 <p>Each chart label is styled independently. View source to see how it
35 works.</p>
36
37 <script type="text/javascript">
38 g = new Dygraph(
39 document.getElementById("div_g"),
40 data, {
41 rollPeriod: 7,
42 legend: 'always',
43 title: 'High and Low Temperatures',
44 titleHeight: 32,
45 ylabel: 'Temperature (F)',
46 xlabel: 'Date (Pacific Time Zone)',
47 labelsDivStyles: {
48 'text-align': 'right',
49 'background': 'none'
50 },
51 strokeWidth: 1.5
52 }
53 );
54 </script>
55 </body>
56</html>