|
0
|
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
|
