tests/value-axis-formatters.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>valueFormatter and axisLabelFormatter</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7
   8   </head>
   9   <body style="max-width: 800px;">
  10     <h2>Multiple y-axes</h2>
  11     <p>This demonstrates how the valueFormatter and axisLabelFormatter options work. The valueFormatter controls the display of the legend. The axisLabelFormatter controls the display of axis tick marks. These can be set on a per-axis basis.</p>
  12     <div id="demodiv"></div>
  13
  14     <ul>
  15       <li>xvf = x-axis valueFormatter
  16       <li>yvf = y-axis valueFormatter
  17       <li>y2vf = secondary y-axis valueFormatter
  18       <li>xalf = x-axis axisLabelFormatter
  19       <li>yalf = y-axis axisLabelFormatter
  20       <li>y2alf = secondary y-axis axisLabelFormatter
  21     </ul>
  22
  23     <script type="text/javascript">
  24       var data = [];
  25       for (var i = 1; i <= 100; i++) {
  26         var m = "01", d = i;
  27         if (d > 31) { m = "02"; d -= 31; }
  28         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  29         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  30         if (d < 10) d = "0" + d;
  31         // two series, one with range 1-100, one with range 1-2M
  32         data.push([new Date("2010/" + m + "/" + d),
  33                    i,
  34                    100 - i,
  35                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  36                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  37       }
  38
  39       function formatDate(d) {
  40         var yyyy = d.getFullYear(),
  41             mm = d.getMonth() + 1,
  42             dd = d.getDate();
  43         return yyyy + '-' + (mm < 10 ? '0' : '') + mm + (dd < 10 ? '0' : '') + dd;
  44       }
  45
  46       g = new Dygraph(
  47           document.getElementById("demodiv"),
  48           data,
  49           {
  50             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  51             width: 640,
  52             height: 350,
  53             series: {
  54               'Y3': { axis: 'y2' },
  55               'Y4': { axis: 'y2' }
  56             },
  57             axes: {
  58               x: {
  59                 valueFormatter: function(ms) {
  60                   return 'xvf(' + formatDate(new Date(ms)) + ')';
  61                 },
  62                 axisLabelFormatter: function(d) {
  63                   return 'xalf(' + formatDate(d) + ')';
  64                 },
  65                 pixelsPerLabel: 100,
  66                 axisLabelWidth: 100,
  67               },
  68               y: {
  69                 valueFormatter: function(y) {
  70                   return 'yvf(' + y.toPrecision(2) + ')';
  71                 },
  72                 axisLabelFormatter: function(y) {
  73                   return 'yalf(' + y.toPrecision(2) + ')';
  74                 },
  75                 axisLabelWidth: 100
  76               },
  77               y2: {
  78                 valueFormatter: function(y2) {
  79                   return 'y2vf(' + y2.toPrecision(2) + ')';
  80                 },
  81                 axisLabelFormatter: function(y2) {
  82                   return 'y2alf(' + y2.toPrecision(2) + ')';
  83                 }
  84               }
  85             }
  86           }
  87       );
  88     </script>
  89 </body>
  90 </html>