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     <!--
  10     For production (minified) code, use:
  11     <script type="text/javascript" src="dygraph-combined.js"></script>
  12     -->
  13     <script type="text/javascript" src="../dygraph-dev.js"></script>
  14
  15     </head>
  16     <body>
  17
  18         <h1>Potential Y Axis formatting problems for small values</h1>
  19
  20         <p>The problem using default y axis formatting for very small values:<br/>
  21         (this was more of a problem before dygraphs automatically switched to scientific notation)</p>
  22         <div id="graph1"></div>
  23         <script type="text/javascript">
  24             var g1 = new Dygraph(
  25                 document.getElementById("graph1"),
  26                 [
  27                     [1, 0.0],
  28                     [2, 0.0001],
  29                     [3, 0.0002],
  30                     [4, 0.0004],
  31                     [5, 0.0005]
  32                 ],
  33                 {
  34                     stepPlot: true,
  35                     labels: ["X", "Data"]
  36                 }
  37             );
  38         </script>
  39
  40         <p>The solution using a Y axis formatting function:</p>
  41         <div id="graph2"></div>
  42         <script type="text/javascript">
  43             var g2 = new Dygraph(
  44                 document.getElementById("graph2"),
  45                 [
  46                     [1, 0.0],
  47                     [2, 0.0001],
  48                     [3, 0.0002],
  49                     [4, 0.0004],
  50                     [5, 0.0005]
  51                 ],
  52                 {
  53                     stepPlot: true,
  54                     labels: ["X", "Data"],
  55                     axes: {
  56                       y: {
  57                         valueFormatter: function(x) {
  58                           var shift = Math.pow(10, 5)
  59                           return Math.round(x * shift) / shift
  60                         },
  61                       }
  62                     }
  63                 }
  64             );
  65         </script>
  66
  67         <p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
  68         <div id="graph3"></div>
  69         <script type="text/javascript">
  70             var g3 = new Dygraph(
  71                 document.getElementById("graph3"),
  72                 [
  73                     [1, 0.0],
  74                     [2, 0.0001],
  75                     [3, 0.0002],
  76                     [4, 0.0004],
  77                     [5, 0.0005]
  78                 ],
  79                 {
  80                     stepPlot: true,
  81                     labels: ["X", "Data"],
  82                     axes: {
  83                       y: {
  84                         valueFormatter: function(x) {
  85                           var shift = Math.pow(10, 5)
  86                           return "*" + Math.round(x * shift) / shift
  87                         },
  88                         axisLabelFormatter: function(x) {
  89                           var shift = Math.pow(10, 5)
  90                           return "+" + Math.round(x * shift) / shift
  91                         }
  92                       }
  93                     }
  94                 }
  95             );
  96         </script>
  97
  98     </body>
  99 </html>