tests/y-axis-formatter.html

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