X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=docs%2Fper-axis.html;h=09c6ebc1a149744cc7c4e28d50a429b59b03a1a8;hb=93ec1094eb75477b455efaa7adeb10190b87992b;hp=25f632b1d2c7a84394e90c6d1650c846da8ca16b;hpb=48e614acf3084b9836803f8b014bf0e65f1ca119;p=dygraphs.git diff --git a/docs/per-axis.html b/docs/per-axis.html index 25f632b..09c6ebc 100644 --- a/docs/per-axis.html +++ b/docs/per-axis.html @@ -1,110 +1,89 @@ - - - - - dygraphs per-series and per-axis options - - - -

dygraphs per-series and per-axis options

- -

When you create a Dygraph object, your code looks something like - this:

- - - g = new Dygraph(document.getElementById("div"), - data, - { options }); - - -

This document is about some of the values you can put in the - options parameter.

- -

per-series options

- -

Typically, an option applies to the whole chart: if you set the - strokeWidth option, it will apply to all data-series equally:

- - - g = new Dygraph(document.getElementById("div"), - "X,Y1,Y2,Y3\n" + - "1,2,3,4\n" + - ..., - { - strokeWidth: 5 - }); - - -

Some options, however, can be applied on a per-series or a per-axis - basis. For instance, to set three different strokeWidths, you could - write:

- - - g = new Dygraph(document.getElementById("div"), - "X,Y1,Y2,Y3\n" + - "1,2,3,4\n" + - ..., - { - strokeWidth: 5, // default stroke width - 'Y1': { - strokeWidth: 3 // Y1 gets a special value. - }, - 'Y3': { - strokeWidth: 1 // so does Y3. + +

dygraphs per-series and per-axis options

+ +

When you create a Dygraph object, your code looks something like +this:

+ +
+  g = new Dygraph(document.getElementById("div"),
+                  data,
+                  { options });
+
+ +

This document is about some of the values you can put in the +options parameter.

+ +

per-series options

+ +

Typically, an option applies to the whole chart: if you set the +strokeWidth option, it will apply to all data-series equally:

+ +
+  g = new Dygraph(document.getElementById("div"),
+                  "X,Y1,Y2,Y3\n" +
+                  "1,2,3,4\n" +
+                  ...,
+                  {
+                    strokeWidth: 5
+                  });
+
+ +

Some options, however, can be applied on a per-series or a per-axis +basis. For instance, to set three different strokeWidths, you could +write:

+ +
+  g = new Dygraph(document.getElementById("div"),
+                  "X,Y1,Y2,Y3\n" +
+                  "1,2,3,4\n" +
+                  ...,
+                  {
+                    strokeWidth: 5,  // default stroke width
+                    series: {
+                      Y1: {
+                        strokeWidth: 3  // Y1 gets a special value.
+                      },
+                      Y3: {
+                        strokeWidth: 1  // so does Y3.
+                      }
+                    }
+                  });
+
+ +

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 here.

+ +

per-axis options

+ +

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.

+ +

Here's how you can do that:

+ +
+  g = new Dygraph(document.getElementById("div"),
+                  "X,Y1,Y2,Y3\n" +
+                  "1,2,3,4\n" +
+                  ...,
+                  {
+                    axes: {
+                      x: {
+                        axisLabelFormatter: function(x) {
+                          return 'x' + x;
                         }
-                      });
-    
-
-    
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 here.

-
-    
per-axis options

-
-    
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.

-
-    
Here's how you can do that:

-
-    
-      g = new Dygraph(document.getElementById("div"),
-                      "X,Y1,Y2,Y3\n" +
-                      "1,2,3,4\n" +
-                      ...,
-                      {
-                        axes: {
-                          x: {
-                            axisLabelFormatter: function(x) {
-                              return 'x' + x;
-                            }
-                          },
-                          y: {
-                            axisLabelFormatter: function(y) {
-                              return 'y' + y;
-                            }
-                          }
+                      },
+                      y: {
+                        axisLabelFormatter: function(y) {
+                          return 'y' + y;
                         }
-                      });
-    
-
-    
The keys in the 'axes' option are always 'x', 'y' and, if you have a
-    secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
-    top level, it will apply to all axes.

-
-    
To see this in practice, check out the two-axes test.

-
-  
-
-  
-
+                      }
+                    }
+                  });
+
+ +

The keys in the 'axes' option are always 'x', 'y' and, if you have a +secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the +top level, it will apply to all axes.

+ +

To see this in practice, check out the two-axes test.

+ +