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