Pcolor - Gives Flot the ability to draw 2D pseudo-color plots.

README.fastline.md

@@ -0,0 +1,27 @@
+## Fast line plot plugin for Flot ##
+This plugin makes a very basic line plot. It is intended to efficiently render large and fast-updating data sets. I created this plugin when I needed to display lines of some thousands of points updating several times a second. While the original Flot implementation worked fine with Webkit (Safari and Chrome), the result on Firefox was catastrophic. This plugin gives the same performance on all three browsers.
+
+## Basic usage ##
+When creating a Flot chart, simply add the *fastline* tag to the series definition, like this:
+```
+var my_plot = $.plot($("#plot_container"), [data], series:{fastline:{ active:true, show:true }});
+```
+
+## Data format ##
+The pcolor plugin expects that the data is composed of 2 arrays, one for the horizontal coordinates and one for the vertical coordinates:
+```
+data = [x coordinates <1D array>, y coordinates <1D array>]
+```
+It is sorted differently than normal Flot lines to allow this sort of operations: ```Math.min.apply(null,vector)```.
+
+## Data range ##
+The displayed range can be adjusted in this way:
+```
+my_plot.getAxes().xaxis.options.min = new_x_min;
+my_plot.getAxes().xaxis.options.max = new_x_max;
+my_plot.getAxes().yaxis.options.min = new_y_min;
+my_plot.getAxes().yaxis.options.max = new_y_max;
+```
+
+## Example ##
+See included file example.fastline.html

README.pcolor.md

@@ -0,0 +1,72 @@
+## 2D pseudo-color plot plugin for Flot ##
+This plugin takes a 2D array and maps the values to a defined color map.
+## Basic usage ##
+When creating a Flot chart, simply add the *pcolor* tag to the series definition, like this:
+```
+var my_plot = $.plot($("#plot_container"), [data], series:{pcolor:{ active:true, show:true, colormap: my_colormap, scalebar: scalebar_options }});
+```
+
+## Data format ##
+The pcolor plugin expects that the data is composed of 3 arrays, one for the horizontal coordinates, one for the vertical coordinates, and one for the values:
+```
+data = [x coordinates <1D or 2D array>, y coordinates <1D or 2D array>, values <2D array>]
+```
+The coordinate arrays can be either 1D or 2D.
+
+## Data range ##
+The minima and maxima in x and y directions are accessible in this way:
+```
+var x_min = my_plot.getAxes().xaxis.datamin
+var x_max = my_plot.getAxes().xaxis.datamax
+var y_min = my_plot.getAxes().yaxis.datamin
+var y_max = my_plot.getAxes().yaxis.datamax
+```
+The displayed range can be adjusted in this way:
+```
+my_plot.getAxes().xaxis.options.min = new_x_min;
+my_plot.getAxes().xaxis.options.max = new_x_max;
+my_plot.getAxes().yaxis.options.min = new_y_min;
+my_plot.getAxes().yaxis.options.max = new_y_max;
+```
+
+## Color map ##
+The colormap is an array defining a linear gradient. Each element of the array must be [color position, color code].
+For example, a blue/white/red gradient would be defined as:
+```
+var colormap_bwr = [[0,"#0000ff"],[0.5,"#ffffff"],[1,"#ff0000"]];
+```
+Another popular color map is the *jet* color map:
+```
+var colormap_jet = [ [0,"#00007f"], [0.125,"#0000ff"], [0.25,"#007fff"], [0.375,"#00ffff"],
+[0.5,"#7fff7f"], [0.625,"#ffff00"], [0.75,"#ff7f00"], [0.875,"#ff0000"], [1.0,"#7f0000"] ];
+```
+
+## Scale bar ##
+By default, a scale bar showing the extent of the represented colours appears in the top right corner of the plot. The scale bar options are:
+```
+scalebar_options = {
+	location:"top right" // combination of top, left, right and bottom
+	orientation:"vertical" // horizontal or vertical
+	width:100,
+	height:15,
+	fontsize:"9px",
+	fontfamily:"times",
+	labels:3, // number of labels, >1 to display any
+	labelformat:"1f",
+	labelformatter: function(value,precision){ return "text"; },
+	textalign:"right"
+}
+```
+The label format number represents the truncation precision and the letter the JavaScript function used to format the numbers: *f* = toFixed, *p* = toPrecision, *e* = toExponential, *c* = custom function provided in the *labelformatter* option.
+The label alignment, set by the ```textalign``` property, can be *left*, *center*, *right*, or *spread*. The last option, when the bar is horizontally oriented, spreads the labels across the whole scale bar width.
+The scale bar is deactivated by settings ```scalebar_options = null```.
+
+## Grid ##
+The grid can be displayed by setting ```grid: {aboveData:true}``` in Flot options. Note that it will display above the color bar.
+Another option exists, which requires to expose the *drawGrid* function of Flot. If you did so, you can add ```grid:true``` to *pcolor* options. The grid will be drawn above the plot but below the scale bar.
+
+## Performances and compatibility ##
+The pcolor plugin has been tested to work on Safari, Chrome and Firefox under Mac OS X. The behaviour in terms of performance was similar.
+
+## Example ##
+See included file example.pcolor.html

example.fastline.html

@@ -0,0 +1,37 @@
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+<script type="text/javascript" src="../jquery.js"></script>
+<script type="text/javascript" src="jquery.flot.js"></script>
+<script type="text/javascript" src='jquery.flot.fastline.js'></script>
+<div id="myplot" style="width:640px;height:480px"></div>
+<script language="javascript">
+var options = { series: {fastline:{active:true,show:true}}};
+
+var plt = $.plot($("#myplot"),[],options);
+var twist = 0;
+var xaxis = new Array(10000);
+var yaxis = new Array(10000);
+setInterval(function () {
+	var pixels = [];
+	seed = (0.5-Math.random())/500;
+	twist = (0.5-Math.random())/500;
+	for (var i=0;i<10000;i++) {
+		xaxis[i] = i;
+		yaxis[i] = Math.pow(i,2+twist)*(1+Math.random());
+	}
+	plt.setData([[xaxis,yaxis]]);
+	plt.getAxes().yaxis.options.min = 0;
+	plt.getAxes().yaxis.options.max = 1e8;
+	plt.getAxes().xaxis.options.min = 0;
+	plt.getAxes().xaxis.options.max = 1e4;
+
+	plt.setupGrid();
+	plt.draw();
+}, 10);
+</script>
+</body>
+</html>

example.pcolor.html

@@ -0,0 +1,62 @@
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+<script type="text/javascript" src="../jquery.js"></script>
+<script type="text/javascript" src="jquery.flot.js"></script>
+<script type="text/javascript" src="jquery.flot.pcolor.js"></script>
+<div id="myplot" style="width:320px;height:240px"></div>
+
+<script language="javascript">
+
+var colormap_brw = [[0,"#0000ff"],[0.5,"#ffffff"],[1,"#ff0000"]];
+var colormap_jet = [[0,"#00007f"], [0.125,"#0000ff"], [0.25,"#007fff"], [0.375,"#00ffff"],
+[0.5,"#7fff7f"], [0.625,"#ffff00"], [0.75,"#ff7f00"], [0.875,"#ff0000"], [1.0,"#7f0000"] ];
+
+var options = { 
+    series:{pcolor:{active:true,show:true,grid:true,colormap:colormap_jet,scalebar:{location:"top right",orientation:"vertical",width:15,height:100,fontsize:"12px",fontfamily:"times",labels:3,labelformat:"1f",textalign:"right"}}}
+};
+
+var plt = $.plot($("#myplot"),[],options);
+
+var twist = 0;
+
+setInterval(function () {
+	var pixels = [];
+	seed = (Math.random()-0.5)/500;
+	twist += (Math.random()-0.5);
+	var bendx = 0, bendy = 0;
+	xaxis = [];
+	yaxis = [];
+	var x_min=1e32, y_min=1e32, x_max=-1e32, y_max=-1e32;
+	for (var i=0;i<240;i++) {
+		pixels[i] = [];
+		xaxis[i] = [];
+		yaxis[i] = [];
+		bendy+=(Math.random()-0.5);
+		for (var j=0;j<320;j++) {
+			bendx+=(Math.random()-0.5)/20;
+			xaxis[i][j] = j+bendy;
+			yaxis[i][j] = i+bendx;
+			pixels[i][j]=((1+Math.sin(twist+((i-120)*(j-160)+twist)*seed))/2)*twist*100;
+		}
+		x_min = Math.min.apply(x_min,xaxis[i]);
+		x_max = Math.max.apply(x_max,xaxis[i]);
+		y_min = Math.min.apply(y_min,yaxis[i]);
+		y_max = Math.max.apply(y_max,yaxis[i]);
+	}
+	plt.setData([[xaxis,yaxis,pixels]]);
+
+	plt.getAxes().yaxis.options.min = 0;
+	plt.getAxes().yaxis.options.max = 239;
+	plt.getAxes().xaxis.options.min = 0;
+	plt.getAxes().xaxis.options.max = 319;
+
+	plt.setupGrid();
+	plt.draw();
+}, 500);
+</script>
+</body>
+</html>

plugins/jquery.flot.fastline.js

@@ -0,0 +1,83 @@
+(function ($) {
+    "use strict";
+    var pluginName = "fastline", pluginVersion = "0.1";
+    var options = {
+        series: { 
+            fastline: {
+                active: false,
+                show: false,
+            }
+        }
+    };
+    var defaultOptions = {
+    };
+    function init(plot) {
+        plot.hooks.processOptions.push(processOptions);
+        function processOptions(plot,options){
+            if(options.series.fastline.active){
+                plot.hooks.drawSeries.push(drawSeries);
+            }
+        }
+        function drawSeries(plot, ctx, serie){
+            if (serie.fastline.show) {
+                var offset = plot.getPlotOffset();
+				if (serie.xaxis.min!=undefined) {var x_min = serie.xaxis.min;}
+				else {var x_min = Math.min.apply(null, serie.data[0]);}
+
+				if (serie.xaxis.max!=undefined) {var x_max = serie.xaxis.max;}
+				else {var x_max = Math.max.apply(null, serie.data[0]);}
+
+				if (serie.yaxis.min!=undefined) {var y_min = serie.yaxis.min;}
+				else {var y_min = Math.min.apply(null, serie.data[1]);}
+
+				if (serie.yaxis.max!=undefined) {var y_max = serie.yaxis.max;}
+				else {var y_max = Math.max.apply(null, serie.data[1]);}
+
+				var dx = x_max - x_min;
+				var dy = y_max - y_min;
+				var np = serie.data[0].length;
+				var w = plot.width();
+				var h = plot.height();
+
+				// builds line
+				ctx.save();
+				ctx.beginPath();
+				ctx.lineWidth=1;
+				ctx.strokeStyle=serie.color;
+				var ox = offset.left;
+				var oh = h+offset.top;
+				var oy = offset.top;
+				var ow = w+offset.left;
+				var px = ox, py=oy;
+				var xscale = w/dx;
+				var yscale = h/dy;
+				var first = true;
+				var pnx = ox, pny = oh;
+                for (var i = 0; i < np; i++) {
+					px = ox + parseInt((serie.data[0][i]-x_min)*xscale);
+					py = oh - parseInt((serie.data[1][i]-y_min)*yscale);
+					if (pnx!=px || pny!=py) {
+						if (px>=ox && py>=oy && px<=ow && py<=oh) {
+							if (first) {
+								ctx.moveTo(px,py);
+								first = false;
+							} else {
+								ctx.lineTo(px,py);
+							}
+							pnx = px;
+							pny = py;
+						}
+					}
+				}
+				ctx.stroke();
+				ctx.restore();
+            }
+        }
+    }
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: pluginName,
+        version: pluginVersion
+    });
+})(jQuery);