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