tests/y-axis-formatter.html

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