UNPKG

8.94 kBHTMLView Raw
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><!-- /navbar-header -->
29 <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
30
31 <!-- TODO(danvk): fill in relevant links here -->
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><!-- /navbar-nav -->
78
79 </div><!-- /navbar-responsive-collapse -->
80 </div><!-- container-fluid -->
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
89this:</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
103strokeWidth 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
116basis. For instance, to set three different strokeWidths, you could
117write:</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
167secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
168top level, it will apply to all axes.</p>
169
170<p>To see this in practice, check out the <a
171href="tests/two-axes.html">two-axes</a> test.</p>
172
173 </div> <!-- .col-lg-12 -->
174 </div> <!-- /div.row -->
175</div> <!-- /div#main.container -->
176
177<!-- TODO(danvk): add a real footer -->
178<!--@@@IFIMPRINT:<div class="container" style="border:1px solid green; margin-bottom:1ex;">@@@PLACE_IMPRINT_LINK_HERE_IF_NECESSARY@@@</div>:FIIMPRINT@@@-->
179
180 </body>
181</html>