Mercurial > ~darius > hgwebdir.cgi > iwws

comparison static/jquery.flot.direction.js @ 0:2d9ee2b3ae82

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Initial commit of iWWS.
author Daniel O'Connor <darius@dons.net.au>
date Mon, 15 Aug 2011 17:44:56 +0930
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:2d9ee2b3ae82
1 /*
2 Flot plugin direction is used to show a visual arraw. Can be show wind data(wind speed and wind direction).
3 The data points you give in your data series should be three dimentions, like:[x_value, y_value, the_direction_value].
4
5 default options:
6 direction: {
7 show: true,
8 lineWidth: 1,
9 color: "rgb(100, 60, 60)",
10 fillColor: "rgb(100, 60, 60)",
11 arrawLength: 8,
12 angleType: "degree", //degree or radian
13 openAngle: 30,
14 zeroShow: false,
15 threshold: 0.000001,
16 angleStart: 0
17 }
18
19 =========
20 options
21 =========
22 "show" enable or disable the direction arraw show. Value: true or false.
23 "lineWidth", "color", "fillColor" is to set direction arraw's size, outline color, fill color.
24 "angleType" is default set to 'degree', another value is 'radian'. This set the direction value's type(the third dimentions' value).
25 "openAngle" set the arraw's head shape, used to be a sharp angle in degree, default is 30.
26 "zeroShow" when you want show zero value(value tha is less than "threshold" in abs), set it to true. see <attention> 2. Default is false, not show zero value.
27 "threshold" this is used when the "zeroShow" set to true only.
28 "angleStart" if you want change the start angle direction from north to east, set this value to -90 in degree, or from west set it to 90. See <attention> 1.
29
30 ===========
31 attention
32 ===========
33 1. The angle diretion is start from north, and clockwise by default.
34 2. While the y's abosolut value is less than 0.000001 and zeroShow set to false(the default value), the direction arraw will not show.
35
36 =========
37 changes
38 =========
39 version 1.4
40 -------------
41 fix bug that set options in separate serie does not work well
42 fix bug that series ploted against the first axis only
43
44 version 1.3
45 -----------
46 fix bug that options can't set in sigle series
47 remove "disablePoints" options
48
49 version 1.2
50 ------------
51 fix the bug when use radian angleType{bug: just show 0 ~ PI}
52 add options "zeroShow", "threshold", "angleStart"
53
54 version 1.1
55 -----------
56 fix bug that nonsense when change default options. {thanks Jernej Jerin}
57
58
59 =========
60 example
61 =========
62 $.plot(
63 "#place_holder",
64 [
65 {data: [1, 13, 50], [2, 20, 40], [3, 33, 50], [4, 13, 120], [5, 8, 270], [6, 26, 230]}
66 ],
67 {
68 series: {
69 points: {
70 show: true,
71 radius: 3,
72 fill: false,
73 symbol: 'circle'
74 },
75 lines: {
76 show: true,
77 lineWidth: 2
78 }
79 direction: {
80 show: true,
81 }
82 }
83 }
84 );
85
86 =============
87 acknowledge
88 =============
89 Jernej Jerin: Thank you for your testing any version of the plugin and reporting the bugs.
90 */
91
92
93 (function ($) {
94 var options = {
95 series: {
96 direction: {
97 show: true,
98 lineWidth: 1,
99 color: "rgb(100, 60, 60)",
100 fillColor: "rgb(100, 60, 60)",
101 arrawLength: 8,
102 angleType: "degree", //degree or radian
103 openAngle: 30,
104 zeroShow: false,
105 threshold: 0.000001,
106 angleStart: 0
107 }
108 }
109 };
110
111 function init(plot) {
112 function draw(plot, ctx) {
113 $.each(plot.getData(), function(ii, series) {
114 drawSeries(plot, ctx, series);
115 });
116 }
117
118 function drawSeries(plot, ctx, series) {
119 var direction = plot.getOptions().series.direction;
120 series = $.extend(true, {}, direction, series, series.direction);
121 if (!series.show || series.data.length < 1 || series.data[0].length < 3) {
122 return;
123 }
124
125 var i, x, y;
126 var points = series.data;
127
128 var radius = series.arrawLength;
129
130 for (i = 0; i < points.length; i++) {
131 if (points.length < 3 || points[i][1] === null) {
132 continue;
133 }
134
135 x = points[i][0];
136 y = points[i][1];
137
138 var offset = plot.pointOffset({ x: x, y: y, xaxis: series.xaxis, yaxis: series.yaxis});
139 x = offset.left;
140 y = offset.top;
141
142 if (!series.zeroShow && (Math.abs(points[i][1]) < series.threshold)) {
143 ctx.beginPath();
144 ctx.strokeStyle = series.color;
145 ctx.lineWidth = series.lineWidth || 1;
146 ctx.arc(x, y, radius, 0, series.shadow ? Math.PI : Math.PI * 2, false);
147 ctx.closePath();
148 continue;
149 }
150
151 if (series.angleType == "degree") {
152 direct = ((90 - points[i][2]) + series.angleStart) * Math.PI / 180;
153 }
154 else {
155 direct = Math.PI/2 - points[i][2] + series.angleStart;
156 }
157
158 var tail_percent = 0.5;
159 var t_x = x + radius * Math.cos(direct);
160 var t_y = y - radius * Math.sin(direct);
161 var f_x = x - radius * Math.cos(direct) * tail_percent;
162 var f_y = y + radius * Math.sin(direct) * tail_percent;
163
164 var sharp_angle = (series.openAngle * Math.PI / 180) % 90; //arraw open angle
165
166 var r_x = f_x - radius / Math.cos(sharp_angle) * Math.cos(direct + sharp_angle);
167 var r_y = f_y + radius / Math.cos(sharp_angle) * Math.sin(direct + sharp_angle);
168
169 var l_x = f_x - radius / Math.cos(sharp_angle) * Math.cos(direct - sharp_angle);
170 var l_y = f_y + radius / Math.cos(sharp_angle) * Math.sin(direct - sharp_angle);
171
172 ctx.beginPath();
173
174 ctx.strokeStyle = series.color;
175 ctx.lineWidth = 1;
176
177 ctx.moveTo(f_x, f_y);
178 ctx.lineTo(r_x, r_y);
179 ctx.lineTo(t_x, t_y);
180 ctx.lineTo(l_x, l_y);
181 ctx.lineTo(f_x, f_y);
182 ctx.closePath();
183
184 ctx.fillStyle = series.fillColor;
185 ctx.fill();
186
187 ctx.stroke();
188 }
189
190 }
191
192 plot.hooks.draw.push(draw);
193 }
194
195 $.plot.plugins.push({
196 init: init,
197 options: options,
198 name: 'direction',
199 version: '1.4'
200 });
201 })(jQuery);
202