tests/y-axis-formatter.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>dygraph</title>
   5         <!--[if IE]>
   6         <script type="text/javascript" src="../excanvas.js"></script>
   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>