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