add HTML5 doctype to all tests
[dygraphs.git] / tests / y-axis-formatter.html
CommitLineData
54425b14 1<!DOCTYPE html>
84fc6aa7
NN
2<html>
3 <head>
4 <title>dygraph</title>
5 <!--[if IE]>
e1fb3740 6 <script type="text/javascript" src="../excanvas.js"></script>
84fc6aa7
NN
7 <![endif]-->
8 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
9 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
10 <script type="text/javascript" src="../dygraph-canvas.js"></script>
11 <script type="text/javascript" src="../dygraph.js"></script>
12 </head>
13 <body>
14
15 <h1>Potential Y Axis formatting problems for small values</h1>
16
17 <p>The problem using default y axis formatting for very small values:</p>
18 <div id="graph1"></div>
19 <script type="text/javascript">
20 new Dygraph(
21 document.getElementById("graph1"),
22 [
23 [1, 0.0],
24 [2, 0.0001],
25 [3, 0.0002],
26 [4, 0.0004],
27 [5, 0.0005]
28 ],
29 {
30 stepPlot: true,
31 labels: ["X", "Data"]
32 }
33 );
34 </script>
35
36 <p>The solution using a Y axis formatting function:</p>
37 <div id="graph2"></div>
38 <script type="text/javascript">
39 new Dygraph(
40 document.getElementById("graph2"),
41 [
42 [1, 0.0],
43 [2, 0.0001],
44 [3, 0.0002],
45 [4, 0.0004],
46 [5, 0.0005]
47 ],
48 {
49 stepPlot: true,
50 yValueFormatter: function(x) {
51 var shift = Math.pow(10, 5)
52 return Math.round(x * shift) / shift
53 },
54 labels: ["X", "Data"]
55 }
56 );
57 </script>
58
59 <p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
60 <div id="graph3"></div>
61 <script type="text/javascript">
62 new Dygraph(
63 document.getElementById("graph3"),
64 [
65 [1, 0.0],
66 [2, 0.0001],
67 [3, 0.0002],
68 [4, 0.0004],
69 [5, 0.0005]
70 ],
71 {
72 stepPlot: true,
73 yValueFormatter: function(x) {
74 var shift = Math.pow(10, 5)
75 return "*" + Math.round(x * shift) / shift
76 },
77 yAxisLabelFormatter: function(x) {
78 var shift = Math.pow(10, 5)
79 return "+" + Math.round(x * shift) / shift
80 },
81 labels: ["X", "Data"]
82 }
83 );
84 </script>
85
86 </body>
87</html>