1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="UTF-8">
|
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 | <title>Dygraphs — per-series and per-axis options</title>
|
7 |
|
8 | <link rel="stylesheet" type="text/css" href=".jslibs/bootstrap.min.css" />
|
9 | <link rel="stylesheet" type="text/css" href="dist/dygraph.css" />
|
10 | <link rel="stylesheet" type="text/css" href="common/vextlnk.css" />
|
11 | <link rel="stylesheet" type="text/css" href="site.css" />
|
12 |
|
13 | <script type="text/javascript" src=".jslibs/jquery.min.js"></script>
|
14 | <script type="text/javascript" src=".jslibs/bootstrap.min.js"></script>
|
15 | <script type="text/javascript" src="dist/dygraph.js"></script>
|
16 | </head>
|
17 | <body>
|
18 | <nav id="header" class="navbar navbar-default navbar-fixed-top">
|
19 | <div class="container-fluid">
|
20 | <div class="navbar-header">
|
21 | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-responsive-collapse" aria-expanded="false">
|
22 | <span class="sr-only">Toggle navigation</span>
|
23 | <span class="icon-bar"></span>
|
24 | <span class="icon-bar"></span>
|
25 | <span class="icon-bar"></span>
|
26 | </button>
|
27 | <a class="navbar-brand" href="/">dygraphs</a>
|
28 | </div>
|
29 | <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
|
30 |
|
31 |
|
32 | <ul class="nav navbar-nav">
|
33 | <li class="dropdown">
|
34 | <a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Documentation<b class="caret"></b></a>
|
35 | <ul id="menu0" class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
36 | <li role="presentation"><a role="menuitem" tabindex="-1" href="tutorial.html">Tutorial</a></li>
|
37 | <li role="presentation"><a role="menuitem" tabindex="-1" href="options.html">Options Reference</a></li>
|
38 | <li role="presentation"><a role="menuitem" tabindex="-1" href="jsdoc/symbols/Dygraph.html">API Reference</a></li>
|
39 | <li role="presentation"><a role="menuitem" tabindex="-1" href="data.html">Data Format</a></li>
|
40 | <li role="presentation"><a role="menuitem" tabindex="-1" href="annotations.html">Annotations</a></li>
|
41 | <li role="presentation"><a role="menuitem" tabindex="-1" href="css.html">CSS Reference</a></li>
|
42 | <li role="presentation"><a role="menuitem" tabindex="-1" href="versions.html">Version History</a></li>
|
43 | <li role="separator" class="divider"></li>
|
44 | <li role="presentation"><a role="menuitem" tabindex="-1" href="ie.html">Notes on Internet Explorer</a></li>
|
45 | </ul>
|
46 | </li>
|
47 | <li class="dropdown">
|
48 | <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Examples<b class="caret"></b></a>
|
49 | <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
50 | <li role="presentation"><a role="menuitem" tabindex="-1" href="gallery/">Demo Gallery</a></li>
|
51 | <li role="presentation"><a role="menuitem" tabindex="-1" href="users.html">List of Users</a></li>
|
52 | <li role="separator" class="divider"></li>
|
53 | <li role="presentation"><a role="menuitem" tabindex="-1" href="tests/">Test Cases</a></li>
|
54 | <li role="separator" class="divider"></li>
|
55 | <li role="presentation"><a role="menuitem" tabindex="-1" href="https://dygraphs.com/fiddle/">Play</a></li>
|
56 | </ul>
|
57 | </li>
|
58 | <li><a class="xnavbar-link" href="download.html">Download</a></li>
|
59 | <li class="dropdown">
|
60 | <a class="dropdown-toggle" id="drop7" role="button" data-toggle="dropdown" href="#">Community <b class="caret"></b></a>
|
61 | <ul id="menu4" class="dropdown-menu" role="menu" aria-labelledby="drop7">
|
62 | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://blog.dygraphs.com/">Blog</a></li>
|
63 | <li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/ask?tags=dygraphs+javascript">Ask a Question</a></li>
|
64 | <li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/tagged/dygraphs">Stack Overflow</a></li>
|
65 | <li role="presentation"><a role="menuitem" tabindex="-1" href="https://groups.google.com/g/dygraphs-users">Mailing List</a></li>
|
66 | </ul>
|
67 | </li>
|
68 | <li class="dropdown">
|
69 | <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Contribute <b class="caret"></b></a>
|
70 | <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
|
71 | <li role="presentation"><a role="menuitem" tabindex="-1" href="changes.html">Contributors Guide</a></li>
|
72 | <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs">Source (Github)</a></li>
|
73 | <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues">Issue Tracker</a></li>
|
74 | <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues/new">Report a Bug</a></li>
|
75 | </ul>
|
76 | </li>
|
77 | </ul>
|
78 |
|
79 | </div>
|
80 | </div>
|
81 | </nav>
|
82 |
|
83 | <div class="container" id="main">
|
84 | <div class="row">
|
85 | <div class="col-lg-12">
|
86 | <h2>dygraphs per-series and per-axis options</h2>
|
87 |
|
88 | <p>When you create a Dygraph object, your code looks something like
|
89 | this:</p>
|
90 |
|
91 | <pre>
|
92 | g = new Dygraph(document.getElementById("div"),
|
93 | <i>data</i>,
|
94 | { <i>options</i> });
|
95 | </pre>
|
96 |
|
97 | <p>This document is about some of the values you can put in the
|
98 | <i>options</i> parameter.</p>
|
99 |
|
100 | <h3>per-series options</h3>
|
101 |
|
102 | <p>Typically, an option applies to the whole chart: if you set the
|
103 | strokeWidth option, it will apply to all data-series equally:</p>
|
104 |
|
105 | <pre>
|
106 | g = new Dygraph(document.getElementById("div"),
|
107 | "X,Y1,Y2,Y3\n" +
|
108 | "1,2,3,4\n" +
|
109 | ...,
|
110 | {
|
111 | strokeWidth: 5
|
112 | });
|
113 | </pre>
|
114 |
|
115 | <p>Some options, however, can be applied on a per-series or a per-axis
|
116 | basis. For instance, to set three different strokeWidths, you could
|
117 | write:</p>
|
118 |
|
119 | <pre>
|
120 | g = new Dygraph(document.getElementById("div"),
|
121 | "X,Y1,Y2,Y3\n" +
|
122 | "1,2,3,4\n" +
|
123 | ...,
|
124 | {
|
125 | strokeWidth: 5, // default stroke width
|
126 | series: {
|
127 | Y1: {
|
128 | strokeWidth: 3 // Y1 gets a special value.
|
129 | },
|
130 | Y3: {
|
131 | strokeWidth: 1 // so does Y3.
|
132 | }
|
133 | }
|
134 | });
|
135 | </pre>
|
136 |
|
137 | <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>
|
138 |
|
139 | <h3>per-axis options</h3>
|
140 |
|
141 | <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>
|
142 |
|
143 | <p>Here's how you can do that:</p>
|
144 |
|
145 | <pre>
|
146 | g = new Dygraph(document.getElementById("div"),
|
147 | "X,Y1,Y2,Y3\n" +
|
148 | "1,2,3,4\n" +
|
149 | ...,
|
150 | {
|
151 | axes: {
|
152 | x: {
|
153 | axisLabelFormatter: function(x) {
|
154 | return 'x' + x;
|
155 | }
|
156 | },
|
157 | y: {
|
158 | axisLabelFormatter: function(y) {
|
159 | return 'y' + y;
|
160 | }
|
161 | }
|
162 | }
|
163 | });
|
164 | </pre>
|
165 |
|
166 | <p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
|
167 | secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
|
168 | top level, it will apply to all axes.</p>
|
169 |
|
170 | <p>To see this in practice, check out the <a
|
171 | href="tests/two-axes.html">two-axes</a> test.</p>
|
172 |
|
173 | </div>
|
174 | </div>
|
175 | </div>
|
176 |
|
177 |
|
178 |
|
179 |
|
180 | </body>
|
181 | </html>
|