Set this for drawCallback
[dygraphs.git] / tests / plotters.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Plotters demo</title>
5 <script type="text/javascript" src="../dygraph-dev.js"></script>
6
7 <script type="text/javascript" src="data.js"></script>
8 <style type="text/css">
9 body {
10 max-width: 750px;
11 }
12 div.chart {
13 width: 640px;
14 height: 320px;
15 }
16 </style>
17 </head>
18 <body>
19 <p>This page demonstrates how to build custom plotters with dygraphs.
20 The <a href="http://dygraphs.com/options.html#plotter">plotter</a> option
21 allows you to write your own drawing logic. This can be used to achieve
22 powerful customization. View source to see how the examples work.</p>
23
24 <h2>Bar Chart</h2>
25 <p>Here a specialized <a
26 href="http://dygraphs.com/options.html#plotter">plotter</a> is used to draw
27 a bar plot rather than a line plot:</p>
28 <div id="demodiv" class=chart></div>
29
30 <h2>Candle Chart</h2>
31 <p>Here a specialized <a
32 href="http://dygraphs.com/options.html#plotter">plotter</a> is used to
33 combined four series into a unified "Candle" plot:</p>
34 <div id="candlechart" class=chart></div>
35
36 <h2>Bar &amp; Line Chart</h2>
37 <p>The <a href="http://dygraphs.com/options.html#plotter">plotter</a>
38 option may be set on a per-series basis to create mixed charts:</p>
39 <div id="barlinechart" class="chart"></div>
40
41 <h2>Multi-column Bar Chart</h2>
42 <div id="multibar" class="chart"></div>
43
44 <h2>Mixed Error Bars and Lines</h2>
45 <p>You can tweak the standard plotters list to achieve effects which would
46 be difficult otherwise, e.g. drawing series with only confidence intervals
47 and showing error bars only for some series.</p>
48 <div id="mixed-error" class="chart"></div>
49
50 <h2>Smooth Lines</h2>
51 <p>See the <a href="smooth-plots.html">smooth-plots demo</a> for an example of a custom plotter which connects points using bezier curves instead of straight lines.</p>
52
53 <script type="text/javascript">
54 // Darken a color
55 function darkenColor(colorStr) {
56 // Defined in dygraph-utils.js
57 var color = Dygraph.toRGB_(colorStr);
58 color.r = Math.floor((255 + color.r) / 2);
59 color.g = Math.floor((255 + color.g) / 2);
60 color.b = Math.floor((255 + color.b) / 2);
61 return 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';
62 }
63
64 // This function draws bars for a single series. See
65 // multiColumnBarPlotter below for a plotter which can draw multi-series
66 // bar charts.
67 function barChartPlotter(e) {
68 var ctx = e.drawingContext;
69 var points = e.points;
70 var y_bottom = e.dygraph.toDomYCoord(0);
71
72 ctx.fillStyle = darkenColor(e.color);
73
74 // Find the minimum separation between x-values.
75 // This determines the bar width.
76 var min_sep = Infinity;
77 for (var i = 1; i < points.length; i++) {
78 var sep = points[i].canvasx - points[i - 1].canvasx;
79 if (sep < min_sep) min_sep = sep;
80 }
81 var bar_width = Math.floor(2.0 / 3 * min_sep);
82
83 // Do the actual plotting.
84 for (var i = 0; i < points.length; i++) {
85 var p = points[i];
86 var center_x = p.canvasx;
87
88 ctx.fillRect(center_x - bar_width / 2, p.canvasy,
89 bar_width, y_bottom - p.canvasy);
90
91 ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
92 bar_width, y_bottom - p.canvasy);
93 }
94 }
95
96 g = new Dygraph(
97 document.getElementById("demodiv"),
98 "Date,Widgets Sold\n" +
99 "2012/07/21,10\n" +
100 "2012/07/22,12\n" +
101 "2012/07/23,9\n" +
102 "2012/07/24,16\n" +
103 "2012/07/25,10\n",
104 {
105 legend: 'always',
106 title: 'Daily Widget Sales',
107 includeZero: true,
108 dateWindow: [ Date.parse("2012/07/20"), Date.parse("2012/07/26") ],
109 animatedZooms: true,
110 plotter: barChartPlotter,
111 axes: {
112 x: {
113 drawGrid: false
114 }
115 }
116 }
117 );
118
119 // The Candle chart plotter is adapted from code written by
120 // Zhenlei Cai (jpenguin@gmail.com)
121 // https://github.com/danvk/dygraphs/pull/141/files
122
123 var BAR_WIDTH = 8;
124 function candlePlotter(e) {
125 // This is the officially endorsed way to plot all the series at once.
126 if (e.seriesIndex !== 0) return;
127
128 var setCount = e.seriesCount;
129 if (setCount != 4) {
130 throw "Exactly 4 prices each point must be provided for candle chart (open close high low)";
131 }
132
133 var prices = [];
134 var price;
135 var sets = e.allSeriesPoints;
136 for (var p = 0 ; p < sets[0].length; p++) {
137 price = {
138 open : sets[0][p].yval,
139 close : sets[1][p].yval,
140 high : sets[2][p].yval,
141 low : sets[3][p].yval,
142 openY : sets[0][p].y,
143 closeY : sets[1][p].y,
144 highY : sets[2][p].y,
145 lowY : sets[3][p].y
146 };
147 prices.push(price);
148 }
149
150 var area = e.plotArea;
151 var ctx = e.drawingContext;
152 ctx.strokeStyle = '#202020';
153 ctx.lineWidth = 0.6;
154
155 for (p = 0 ; p < prices.length; p++) {
156 ctx.beginPath();
157
158 price = prices[p];
159 var topY = area.h * price.highY + area.y;
160 var bottomY = area.h * price.lowY + area.y;
161 var centerX = area.x + sets[0][p].x * area.w;
162 ctx.moveTo(centerX, topY);
163 ctx.lineTo(centerX, bottomY);
164 ctx.closePath();
165 ctx.stroke();
166 var bodyY;
167 if (price.open > price.close) {
168 ctx.fillStyle ='rgba(244,44,44,1.0)';
169 bodyY = area.h * price.openY + area.y;
170 }
171 else {
172 ctx.fillStyle ='rgba(44,244,44,1.0)';
173 bodyY = area.h * price.closeY + area.y;
174 }
175 var bodyHeight = area.h * Math.abs(price.openY - price.closeY);
176 ctx.fillRect(centerX - BAR_WIDTH / 2, bodyY, BAR_WIDTH, bodyHeight);
177 }
178
179 }
180
181 var candleData = "Date,Open,Close,High,Low\n" +
182 "2011-12-06,392.54,390.95,394.63,389.38\n" +
183 "2011-12-07,389.93,389.09,390.94,386.76\n" +
184 "2011-12-08,391.45,390.66,395.50,390.23\n" +
185 "2011-12-09,392.85,393.62,394.04,391.03\n" +
186 "2011-12-12,391.68,391.84,393.90,389.45\n" +
187 "2011-12-13,393.00,388.81,395.40,387.10\n" +
188 "2011-12-14,386.70,380.19,387.38,377.68\n" +
189 "2011-12-15,383.33,378.94,383.74,378.31\n" +
190 "2011-12-16,380.36,381.02,384.15,379.57\n" +
191 "2011-12-19,382.47,382.21,384.85,380.48\n" +
192 "2011-12-20,387.76,395.95,396.10,387.26\n" +
193 "2011-12-21,396.69,396.45,397.30,392.01\n" +
194 "2011-12-22,397.00,398.55,399.13,396.10\n" +
195 "2011-12-23,399.69,403.33,403.59,399.49\n" +
196 "2011-12-27,403.10,406.53,409.09,403.02\n" +
197 "2011-12-28,406.89,402.64,408.25,401.34\n" +
198 "2011-12-29,403.40,405.12,405.65,400.51\n" +
199 "2011-12-30,403.51,405.00,406.28,403.49\n" +
200 "2012-01-03,409.50,411.23,412.50,409.00\n" +
201 "2012-01-04,410.21,413.44,414.68,409.28\n" +
202 "2012-01-05,414.95,418.03,418.55,412.67\n" +
203 "2012-01-06,419.77,422.40,422.75,419.22\n" +
204 "2012-01-09,425.52,421.73,427.75,421.35\n" +
205 "2012-01-10,425.91,423.24,426.00,421.50\n" +
206 "2012-01-11,422.59,422.55,422.85,419.31\n" +
207 "2012-01-12,422.41,421.39,422.90,418.75\n" +
208 "2012-01-13,419.53,419.81,420.45,418.66\n" +
209 "2012-01-17,424.20,424.70,425.99,422.96\n" +
210 "2012-01-18,426.87,429.11,429.47,426.30\n" +
211 "2012-01-19,430.03,427.75,431.37,426.51\n" +
212 "2012-01-20,427.49,420.30,427.50,419.75\n" +
213 "2012-01-23,422.67,427.41,428.45,422.30\n" +
214 "2012-01-24,425.10,420.41,425.10,419.55\n" +
215 "2012-01-25,454.26,446.66,454.45,443.73\n" +
216 "2012-01-26,448.45,444.63,448.79,443.14\n" +
217 "2012-01-27,444.37,447.28,448.48,443.77\n" +
218 "2012-01-30,445.71,453.01,453.90,445.39\n" +
219 "2012-01-31,455.85,456.48,458.24,453.07\n" +
220 "2012-02-01,458.49,456.19,458.99,455.55\n" +
221 "2012-02-02,455.90,455.12,457.17,453.98\n" +
222 "2012-02-03,457.30,459.68,460.00,455.56\n" +
223 "2012-02-06,458.38,463.97,464.98,458.20\n" +
224 "2012-02-07,465.25,468.83,469.75,464.58\n" +
225 "2012-02-08,470.50,476.68,476.79,469.70\n" +
226 "2012-02-09,480.95,493.17,496.75,480.56\n" +
227 "2012-02-10,491.17,493.42,497.62,488.55\n" +
228 "2012-02-13,499.74,502.60,503.83,497.09\n" +
229 "2012-02-14,504.70,509.46,509.56,502.00\n" ;
230
231 g2 = new Dygraph(
232 document.getElementById("candlechart"),
233 candleData,
234 {
235 plotter: candlePlotter
236 });
237
238
239 // Bar and Line chart
240 var short_data = data_nolabel();
241 short_data = short_data.split('\n').slice(0, 20).join('\n');
242
243 g3 = new Dygraph(
244 document.getElementById("barlinechart"),
245 short_data,
246 {
247 labels: ['Date', 'A', 'B'],
248 includeZero: true,
249 series: {
250 "A": {
251 strokeWidth: 2
252 },
253 "B": {
254 plotter: barChartPlotter
255 }
256 }
257 });
258
259
260 // Multiple column bar chart
261 function multiColumnBarPlotter(e) {
262 // We need to handle all the series simultaneously.
263 if (e.seriesIndex !== 0) return;
264
265 var g = e.dygraph;
266 var ctx = e.drawingContext;
267 var sets = e.allSeriesPoints;
268 var y_bottom = e.dygraph.toDomYCoord(0);
269
270 // Find the minimum separation between x-values.
271 // This determines the bar width.
272 var min_sep = Infinity;
273 for (var j = 0; j < sets.length; j++) {
274 var points = sets[j];
275 for (var i = 1; i < points.length; i++) {
276 var sep = points[i].canvasx - points[i - 1].canvasx;
277 if (sep < min_sep) min_sep = sep;
278 }
279 }
280 var bar_width = Math.floor(2.0 / 3 * min_sep);
281
282 var fillColors = [];
283 var strokeColors = g.getColors();
284 for (var i = 0; i < strokeColors.length; i++) {
285 fillColors.push(darkenColor(strokeColors[i]));
286 }
287
288 for (var j = 0; j < sets.length; j++) {
289 ctx.fillStyle = fillColors[j];
290 ctx.strokeStyle = strokeColors[j];
291 for (var i = 0; i < sets[j].length; i++) {
292 var p = sets[j][i];
293 var center_x = p.canvasx;
294 var x_left = center_x - (bar_width / 2) * (1 - j/(sets.length-1));
295
296 ctx.fillRect(x_left, p.canvasy,
297 bar_width/sets.length, y_bottom - p.canvasy);
298
299 ctx.strokeRect(x_left, p.canvasy,
300 bar_width/sets.length, y_bottom - p.canvasy);
301 }
302 }
303 }
304
305 g4 = new Dygraph(
306 document.getElementById("multibar"),
307 short_data,
308 {
309 includeZero: true,
310 plotter: multiColumnBarPlotter
311 });
312
313 // Mixed Error Bars and Lines
314 g5 = new Dygraph(
315 document.getElementById("mixed-error"),
316 NoisyData(),
317 {
318 errorBars: true,
319 series: {
320 'A': {
321 plotter: Dygraph.Plotters.errorPlotter
322 },
323 'B': {
324 plotter: Dygraph.Plotters.linePlotter,
325 strokePattern: Dygraph.DASHED_LINE
326 }
327 }
328 });
329
330 </script>
331 </body>
332 </html>