Merge branch 'master' of github.com:danvk/dygraphs
[dygraphs.git] / tests / x-axis-formatter.html
CommitLineData
54425b14 1<!DOCTYPE html>
bf640e56
AV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
31eddad3 5 <title>X Axis Label Formatting</title>
bf640e56 6 <!--[if IE]>
a2b2c3a1 7 <script type="text/javascript" src="../excanvas.js"></script>
bf640e56 8 <![endif]-->
7e5ddc94
DV
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
bf640e56
AV
15 </head>
16 <body>
17 <p>Original data:</p>
18 <div id="normal" style="width:600px; height:300px;"></div>
19
20 <p>Same data, but offset by 2 hours with the date formatter:</p>
21 <div id="offby2" style="width:600px; height:300px;"></div>
22
23 <p>Same data, but always displaying HH:MM:SS:</p>
24 <div id="seconds" style="width:600px; height:300px;"></div>
25
26 <script type="text/javascript">
27 function HourlyData() {
28 return "" +
29 "Date,A,B\n" +
30 "2009/07/12 00:00:00,3,4\n" +
31 "2009/07/12 01:00:00,5,6\n" +
32 "2009/07/12 02:00:00,7,6\n" +
33 "2009/07/12 03:00:00,6,5\n" +
34 "2009/07/12 04:00:00,4,7\n" +
35 "2009/07/12 05:00:00,3,6\n" +
36 "2009/07/12 06:00:00,4,6"
37 }
38
f6fbf9e0 39 var g1 = new Dygraph(
bf640e56
AV
40 document.getElementById("normal"),
41 HourlyData()
42 );
43
f6fbf9e0 44 var g2 = new Dygraph(
bf640e56
AV
45 document.getElementById("offby2"),
46 HourlyData(),
47 {
48e614ac
DV
48 axes: {
49 x: {
50 axisLabelFormatter: function(d, gran) {
51 return Dygraph.dateAxisFormatter(new Date(d.getTime() + 7200*1000), gran);
52 }
bf640e56 53 }
48e614ac 54 }
bf640e56
AV
55 });
56
f6fbf9e0 57 var g3 = new Dygraph(
bf640e56
AV
58 document.getElementById("seconds"),
59 HourlyData(),
60 {
61 xAxisLabelWidth: 70,
48e614ac
DV
62 axes: {
63 x: {
64 axisLabelFormatter: function(d, gran) {
65 return Dygraph.zeropad(d.getHours()) + ":"
66 + Dygraph.zeropad(d.getMinutes()) + ":"
67 + Dygraph.zeropad(d.getSeconds());
68 }
bf640e56 69 }
48e614ac 70 }
bf640e56
AV
71 });
72 </script>
73 </body>
74</html>