docs/per-axis.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>dygraphs per-series and per-axis options</title>
   6     <style type="text/css">
   7       code { white-space: pre; border: 1px dashed black; display: block; }
   8       pre  { white-space: pre; border: 1px dashed black; }
   9       body { max-width: 800px; }
  10     </style>
  11   </head>
  12   <body>
  13     <h2>dygraphs per-series and per-axis options</h2>
  14
  15     <p>When you create a Dygraph object, your code looks something like
  16     this:</p>
  17
  18     <code>
  19       g = new Dygraph(document.getElementById("div"),
  20                       <i>data</i>,
  21                       { <i>options</i> });
  22     </code>
  23
  24     <p>This document is about some of the values you can put in the
  25     <i>options</i> parameter.</p>
  26
  27     <h3>per-series options</h3>
  28
  29     <p>Typically, an option applies to the whole chart: if you set the
  30     strokeWidth option, it will apply to all data-series equally:</p>
  31
  32     <code>
  33       g = new Dygraph(document.getElementById("div"),
  34                       "X,Y1,Y2,Y3\n" +
  35                       "1,2,3,4\n" +
  36                       ...,
  37                       {
  38                         strokeWidth: 5
  39                       });
  40     </code>
  41
  42     <p>Some options, however, can be applied on a per-series or a per-axis
  43     basis. For instance, to set three different strokeWidths, you could
  44     write:</p>
  45
  46     <code>
  47       g = new Dygraph(document.getElementById("div"),
  48                       "X,Y1,Y2,Y3\n" +
  49                       "1,2,3,4\n" +
  50                       ...,
  51                       {
  52                         strokeWidth: 5,  // default stroke width
  53                         'Y1': {
  54                           strokeWidth: 3  // Y1 gets a special value.
  55                         },
  56                         'Y3': {
  57                           strokeWidth: 1  // so does Y3.
  58                         }
  59                       });
  60     </code>
  61
  62     <p>The result of these options is that Y1 will have a strokeWidth of 1, Y2 will have a strokeWidth of 5 and Y3 will have a strokeWidth of 1. You can see a demonstration of this <a href='tests/per-series.html'>here</a>.</p>
  63
  64     <h3>per-axis options</h3>
  65
  66     <p>Some options make more sense when applied to an entire axis, rather than to individual series. For instance, the axisLabelFormatter option lets you specify a function for format the labels on axis tick marks for display. You might want one function for the x-axis and another one for the y-axis.</p>
  67
  68     <p>Here's how you can do that:</p>
  69
  70     <code>
  71       g = new Dygraph(document.getElementById("div"),
  72                       "X,Y1,Y2,Y3\n" +
  73                       "1,2,3,4\n" +
  74                       ...,
  75                       {
  76                         axes: {
  77                           x: {
  78                             axisLabelFormatter: function(x) {
  79                               return 'x' + x;
  80                             }
  81                           },
  82                           y: {
  83                             axisLabelFormatter: function(y) {
  84                               return 'y' + y;
  85                             }
  86                           }
  87                         }
  88                       });
  89     </code>
  90
  91     <p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
  92     secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
  93     top level, it will apply to all axes.</p>
  94
  95     <p>To see this in practice, check out the <a
  96     href="tests/two-axes.html">two-axes</a> test.</p>
  97
  98   <!-- Google Analytics -->
  99 <script type="text/javascript">
 100   var _gaq = _gaq || [];
 101   _gaq.push(['_setAccount', 'UA-769809-2']);
 102   _gaq.push(['_trackPageview']);
 103   (function() {
 104     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 105     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 106     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 107   })();
 108 </script>
 109   </body>
 110 </html>