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