docs/per-axis.html

   1 <!--#include virtual="header.html" -->
   2 <h2>dygraphs per-series and per-axis options</h2>
   3
   4 <p>When you create a Dygraph object, your code looks something like
   5 this:</p>
   6
   7 <pre>
   8   g = new Dygraph(document.getElementById("div"),
   9                   <i>data</i>,
  10                   { <i>options</i> });
  11 </pre>
  12
  13 <p>This document is about some of the values you can put in the
  14 <i>options</i> parameter.</p>
  15
  16 <h3>per-series options</h3>
  17
  18 <p>Typically, an option applies to the whole chart: if you set the
  19 strokeWidth option, it will apply to all data-series equally:</p>
  20
  21 <pre>
  22   g = new Dygraph(document.getElementById("div"),
  23                   "X,Y1,Y2,Y3\n" +
  24                   "1,2,3,4\n" +
  25                   ...,
  26                   {
  27                     strokeWidth: 5
  28                   });
  29 </pre>
  30
  31 <p>Some options, however, can be applied on a per-series or a per-axis
  32 basis. For instance, to set three different strokeWidths, you could
  33 write:</p>
  34
  35 <pre>
  36   g = new Dygraph(document.getElementById("div"),
  37                   "X,Y1,Y2,Y3\n" +
  38                   "1,2,3,4\n" +
  39                   ...,
  40                   {
  41                     strokeWidth: 5,  // default stroke width
  42                     series: {
  43                       Y1: {
  44                         strokeWidth: 3  // Y1 gets a special value.
  45                       },
  46                       Y3: {
  47                         strokeWidth: 1  // so does Y3.
  48                       }
  49                     }
  50                   });
  51 </pre>
  52
  53 <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>
  54
  55 <h3>per-axis options</h3>
  56
  57 <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>
  58
  59 <p>Here's how you can do that:</p>
  60
  61 <pre>
  62   g = new Dygraph(document.getElementById("div"),
  63                   "X,Y1,Y2,Y3\n" +
  64                   "1,2,3,4\n" +
  65                   ...,
  66                   {
  67                     axes: {
  68                       x: {
  69                         axisLabelFormatter: function(x) {
  70                           return 'x' + x;
  71                         }
  72                       },
  73                       y: {
  74                         axisLabelFormatter: function(y) {
  75                           return 'y' + y;
  76                         }
  77                       }
  78                     }
  79                   });
  80 </pre>
  81
  82 <p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
  83 secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
  84 top level, it will apply to all axes.</p>
  85
  86 <p>To see this in practice, check out the <a
  87 href="tests/two-axes.html">two-axes</a> test.</p>
  88
  89 <!--#include virtual="footer.html" -->