tests/value-axis-formatters.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>valueFormatter and axisLabelFormatter</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 style="max-width: 800px;">
  17     <h2>Multiple y-axes</h2>
  18     <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>
  19     <div id="demodiv"></div>
  20
  21     <ul>
  22       <li>xvf = x-axis valueFormatter
  23       <li>yvf = y-axis valueFormatter
  24       <li>y2vf = secondary y-axis valueFormatter
  25       <li>xalf = x-axis axisLabelFormatter
  26       <li>yalf = y-axis axisLabelFormatter
  27       <li>y2alf = secondary y-axis axisLabelFormatter
  28     </ul>
  29
  30     <script type="text/javascript">
  31       var data = [];
  32       for (var i = 1; i <= 100; i++) {
  33         var m = "01", d = i;
  34         if (d > 31) { m = "02"; d -= 31; }
  35         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  36         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  37         if (d < 10) d = "0" + d;
  38         // two series, one with range 1-100, one with range 1-2M
  39         data.push([new Date("2010/" + m + "/" + d),
  40                    i,
  41                    100 - i,
  42                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  43                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  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             'Y3': {
  54               axis: {
  55               }
  56             },
  57             'Y4': {
  58               axis: 'Y3'  // use the same y-axis as series Y3
  59             },
  60             xAxisLabelWidth: 100,
  61             yAxisLabelWidth: 100,
  62             axes: {
  63               x: {
  64                 valueFormatter: function(ms) {
  65                   return 'xvf(' + new Date(ms).strftime('%Y-%m-%d') + ')';
  66                 },
  67                 axisLabelFormatter: function(d) {
  68                   return 'xalf(' + d.strftime('%Y-%m-%d') + ')';
  69                 },
  70                 pixelsPerLabel: 100,
  71               },
  72               y: {
  73                 valueFormatter: function(y) {
  74                   return 'yvf(' + y.toPrecision(2) + ')';
  75                 },
  76                 axisLabelFormatter: function(y) {
  77                   return 'yalf(' + y.toPrecision(2) + ')';
  78                 }
  79               },
  80               y2: {
  81                 valueFormatter: function(y2) {
  82                   return 'y2vf(' + y2.toPrecision(2) + ')';
  83                 },
  84                 axisLabelFormatter: function(y2) {
  85                   return 'y2alf(' + y2.toPrecision(2) + ')';
  86                 }
  87               }
  88             }
  89           }
  90       );
  91     </script>
  92 </body>
  93 </html>