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

Initial commit of iWWS.
author Daniel O'Connor <darius@dons.net.au>
date Mon, 15 Aug 2011 17:44:56 +0930
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/static/jquery.flot.direction.js	Mon Aug 15 17:44:56 2011 +0930
@@ -0,0 +1,202 @@
+/*
+Flot plugin direction is used to show a visual arraw. Can be show wind data(wind speed and wind direction).
+The data points you give in your data series should be three dimentions, like:[x_value, y_value, the_direction_value].
+
+default options:
+direction: {
+            show: true,
+            lineWidth: 1,
+            color: "rgb(100, 60, 60)",
+            fillColor: "rgb(100, 60, 60)",
+            arrawLength: 8,
+            angleType: "degree", //degree or radian
+            openAngle: 30,
+            zeroShow: false,
+            threshold: 0.000001,
+            angleStart: 0
+        }
+
+=========
+ options
+=========
+"show" enable or disable the direction arraw show. Value: true or false.
+"lineWidth", "color", "fillColor" is to set direction arraw's size, outline color, fill color.
+"angleType" is default set to 'degree', another value is 'radian'. This set the direction value's type(the third dimentions' value).
+"openAngle" set the arraw's head shape, used to be a sharp angle in degree, default is 30.
+"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.
+"threshold" this is used when the "zeroShow" set to true only.
+"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.
+
+===========
+ attention
+===========
+1. The angle diretion is start from north, and clockwise by default.
+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.
+
+=========
+ changes
+=========
+version 1.4
+-------------
+fix bug that set options in separate serie does not work well
+fix bug that series ploted against the first axis only
+
+version 1.3
+-----------
+fix bug that options can't set in sigle series
+remove "disablePoints" options
+
+version 1.2
+------------
+fix the bug when use radian angleType{bug: just show 0 ~ PI}
+add options "zeroShow", "threshold", "angleStart"
+
+version 1.1
+-----------
+fix bug that nonsense when change default options. {thanks Jernej Jerin}
+
+
+=========
+ example
+=========
+$.plot(
+    "#place_holder",
+    [
+        {data: [1, 13, 50], [2, 20, 40], [3, 33, 50], [4, 13, 120], [5, 8, 270], [6, 26, 230]}
+    ],
+    {
+        series: {
+            points: {
+                show: true,
+                radius: 3,
+                fill: false,
+                symbol: 'circle'
+            },
+            lines: {
+                show: true,
+                lineWidth: 2
+            }
+           direction: {
+                show: true,
+            }
+        }
+    }
+);
+
+=============
+ acknowledge
+=============
+Jernej Jerin: Thank you for your testing any version of the plugin and reporting the bugs.
+*/
+
+
+(function ($) {
+    var options = {
+        series: {
+            direction: {
+                show: true,
+                lineWidth: 1,
+                color: "rgb(100, 60, 60)",
+                fillColor: "rgb(100, 60, 60)",
+                arrawLength: 8,
+                angleType: "degree", //degree or radian
+                openAngle: 30,
+                zeroShow: false,
+                threshold: 0.000001,
+                angleStart: 0
+            }
+        }
+    };
+    
+    function init(plot) {
+        function draw(plot, ctx) {
+            $.each(plot.getData(), function(ii, series) {
+                drawSeries(plot, ctx, series);
+            });
+        }
+        
+        function drawSeries(plot, ctx, series) {
+            var direction = plot.getOptions().series.direction;
+            series = $.extend(true, {}, direction, series, series.direction);
+            if (!series.show || series.data.length < 1 ||  series.data[0].length < 3) {
+                return;
+            }
+
+            var i, x, y;
+            var points = series.data;
+
+            var radius = series.arrawLength;
+            
+            for (i = 0; i < points.length; i++) {
+                if (points.length < 3 || points[i][1] === null) {
+                    continue;
+                }
+                
+                x = points[i][0];
+                y = points[i][1];
+                
+                var offset = plot.pointOffset({ x: x, y: y, xaxis: series.xaxis, yaxis: series.yaxis});
+                x = offset.left;
+                y = offset.top;
+                
+                if (!series.zeroShow && (Math.abs(points[i][1]) < series.threshold)) {
+                    ctx.beginPath();
+                    ctx.strokeStyle = series.color;
+                    ctx.lineWidth = series.lineWidth || 1;
+                    ctx.arc(x, y, radius, 0, series.shadow ? Math.PI : Math.PI * 2, false);
+                    ctx.closePath();
+                    continue;
+                }
+                
+                if (series.angleType == "degree") {
+                    direct = ((90 - points[i][2]) + series.angleStart) * Math.PI / 180;
+                }
+                else {
+                    direct = Math.PI/2 - points[i][2] + series.angleStart;
+                }                
+                
+                var tail_percent = 0.5;
+                var t_x = x + radius * Math.cos(direct);
+                var t_y = y - radius * Math.sin(direct);
+                var f_x = x - radius * Math.cos(direct) * tail_percent;
+                var f_y = y + radius * Math.sin(direct) * tail_percent;
+                                
+                var sharp_angle = (series.openAngle * Math.PI / 180) % 90; //arraw open angle
+                
+                var r_x = f_x - radius / Math.cos(sharp_angle) * Math.cos(direct + sharp_angle);
+                var r_y = f_y + radius / Math.cos(sharp_angle) * Math.sin(direct + sharp_angle);
+                
+                var l_x = f_x - radius / Math.cos(sharp_angle) * Math.cos(direct - sharp_angle);
+                var l_y = f_y + radius / Math.cos(sharp_angle) * Math.sin(direct - sharp_angle);
+                
+                ctx.beginPath();
+
+                ctx.strokeStyle = series.color;
+                ctx.lineWidth = 1;
+                
+                ctx.moveTo(f_x, f_y);
+                ctx.lineTo(r_x, r_y);
+                ctx.lineTo(t_x, t_y);
+                ctx.lineTo(l_x, l_y);
+                ctx.lineTo(f_x, f_y);
+                ctx.closePath();
+                
+                ctx.fillStyle = series.fillColor;
+                ctx.fill();
+                
+                ctx.stroke();
+            }
+            
+        }
+        
+        plot.hooks.draw.push(draw);
+    }
+    
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'direction',
+        version: '1.4'
+    });
+})(jQuery);
+