From ea9cdc598bba8898735740c0a196822cdc694fab Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 14:05:54 +0200 Subject: [PATCH 01/25] 2D pseudo-color plot plugin basic 2D pseudo-color plot --- plugins/jquery.flot.pcolor.js | 187 ++++++++++++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 plugins/jquery.flot.pcolor.js diff --git a/plugins/jquery.flot.pcolor.js b/plugins/jquery.flot.pcolor.js new file mode 100644 index 0000000..6192ac4 --- /dev/null +++ b/plugins/jquery.flot.pcolor.js @@ -0,0 +1,187 @@ +(function ($) { + "use strict"; + var pluginName = "pcolor", pluginVersion = "0.1"; + var options = { + series: { + pcolor: { + active: false, + show: false, + } + } + }; + var defaultOptions = { + }; + function init(plot) { + var offset = null,opt = null,series = null; + plot.hooks.processOptions.push(processOptions); + function processOptions(plot,options){ + if(options.series.pcolor.active){ + opt = options; + plot.hooks.processRawData.push(processRawData); + plot.hooks.drawSeries.push(drawSeries); + } + } + function processRawData(plot,s,data,datapoints){ + if (s.pcolor.active) { + var ocnv = $("")[0]; + var octx = ocnv.getContext("2d"); + var grd = octx.createLinearGradient(0,0,16384,0); + if (s.pcolor.colormap==undefined) { + var colormap = [[0,"#0000ff"],[0.5,"#ffffff"],[1,"#ff0000"]]; + } else { + var colormap = s.pcolor.colormap; + } + for (var n=0; n0) { + offset = plot.getPlotOffset(); + var w = serie.data[2][0].length, h = serie.data[2].length; + var pw = plot.width()+offset.left+offset.right, ph = plot.height()+offset.top+offset.bottom; + var cw = ctx.canvas.width, ch = ctx.canvas.height; + var ocnv = $("")[0]; + var octx = ocnv.getContext("2d"); + var img = octx.createImageData(w, h); + + if (typeof serie.data[0][0] == "number") { // 1D map for x coordinates => makes 2D map + var new_map_x = new Array(h); + var x_min = Math.min.apply(null, serie.data[0]); + var x_max = Math.max.apply(null, serie.data[0]); + for (var i=0; i=x_min && serie.data[0][i][j]<=x_max && + serie.data[1][i][j]>=y_min && serie.data[1][i][j]<=y_max) { + var px = (w-1)*(serie.data[0][i][j]-x_min)/dx; + var py = (h-1)*(serie.data[1][i][j]-y_min)/dy; + var pxm = Math.floor(px); + var pym = Math.floor(py); + var pxp = Math.ceil(px); + var pyp = Math.ceil(py); + var idxmm = (pym*w+pxm)*4; + var idxpm = (pyp*w+pxm)*4; + var idxmp = (pym*w+pxp)*4; + var idxpp = (pyp*w+pxp)*4; + var v = 4*parseInt((serie.data[2][i][j]-c_min)/dc*16383); + var r = plot.colormap.data[v]; + var g = plot.colormap.data[v+1]; + var b = plot.colormap.data[v+2]; + img.data[idxmm] = r; + img.data[idxmm+1] = g; + img.data[idxmm+2] = b; + img.data[idxmm+3] = 255; + if (idxmp!=idxmm) { + img.data[idxmp] = r; + img.data[idxmp+1] = g; + img.data[idxmp+2] = b; + img.data[idxmp+3] = 255; + } + if (idxpm!=idxmm) { + img.data[idxpm] = r; + img.data[idxpm+1] = g; + img.data[idxpm+2] = b; + img.data[idxpm+3] = 255; + } + if (idxpp!=idxmm) { + img.data[idxpp] = r; + img.data[idxpp+1] = g; + img.data[idxpp+2] = b; + img.data[idxpp+3] = 255; + } + } + } + } + octx.putImageData(img,0,0); + ctx.save(); + ctx.beginPath(); + ctx.rect(offset.left,offset.top,pw-offset.left-offset.right,ph-offset.top-offset.bottom); + ctx.clip(); + ctx.setTransform(sw,0,0,sh,0,0); + ctx.drawImage(ocnv,offset.left/sw*cw/pw,offset.top/sh*ch/ph); + ctx.restore(); + ctx.setTransform(cw/pw,0,0,ch/ph,0,0); + } + } + }; + $.plot.plugins.push({ + init: init, + options: options, + name: pluginName, + version: pluginVersion + }); +})(jQuery); \ No newline at end of file From 061892e9da22dece7b3fc916a21e79c866a70524 Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 14:12:08 +0200 Subject: [PATCH 02/25] pseudo-color plot example --- pcolor.html | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 pcolor.html diff --git a/pcolor.html b/pcolor.html new file mode 100644 index 0000000..dc823e6 --- /dev/null +++ b/pcolor.html @@ -0,0 +1,58 @@ + + + + + + + + + +
+ + + + From f74ad74abb2bb71e060f67345ab67c030e540d87 Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 14:35:57 +0200 Subject: [PATCH 03/25] Description and usage --- README.md | 43 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8485738..b0a5196 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,45 @@ -## flot.github.com ## +## 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 }}); +``` + +## Data format ## +The pcolor plugin expects that the that 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"] ]; +``` ### Credits ### From 3c98e7dc121dbcd3418dbb4ee45acecbe45ed5e1 Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 14:44:09 +0200 Subject: [PATCH 04/25] typo and additions --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b0a5196..82d909f 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ var my_plot = $.plot($("#plot_container"), [data], series:{pcolor:{ active:true, ``` ## Data format ## -The pcolor plugin expects that the that is composed of 3 arrays, one for the horizontal coordinates, one for the vertical coordinates, and one for the values: +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>] ``` @@ -41,6 +41,12 @@ var colormap_jet = [ [0,"#00007f"], [0.125,"#0000ff"], [0.25,"007fff"], [0.375," [0.5,"#7fff7f"], [0.625,"#ffff00"], [0.75,"#ff7f00"], [0.875,"#ff0000"], [1.0,"#7f0000"] ]; ``` +## Grid ## +The grid can be displayed by setting ```grid: {aboveData:true}``` in Flot options. + +## 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. + ### Credits ### This site uses the [Jekyll RSS Feed Templates](http://github.com/snaptortoise/jekyll-rss-feeds) From 9a2113afb67bed1c5e590d198ebaf5d553a70e5e Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 14:46:17 +0200 Subject: [PATCH 05/25] renamed readme --- README.md => README.pcolor.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename README.md => README.pcolor.md (100%) diff --git a/README.md b/README.pcolor.md similarity index 100% rename from README.md rename to README.pcolor.md From 3f17756600546bd20e677adea31c0f7a7472a0e1 Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 14:46:43 +0200 Subject: [PATCH 06/25] renamed example --- pcolor.html => example.pcolor.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename pcolor.html => example.pcolor.html (100%) diff --git a/pcolor.html b/example.pcolor.html similarity index 100% rename from pcolor.html rename to example.pcolor.html From b5eb264b469126c96c6da772a854a4248c4a5d4e Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 14:47:45 +0200 Subject: [PATCH 07/25] added mention to example --- README.pcolor.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.pcolor.md b/README.pcolor.md index 82d909f..26a658d 100644 --- a/README.pcolor.md +++ b/README.pcolor.md @@ -47,6 +47,9 @@ The grid can be displayed by setting ```grid: {aboveData:true}``` in Flot option ## 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 + ### Credits ### This site uses the [Jekyll RSS Feed Templates](http://github.com/snaptortoise/jekyll-rss-feeds) From 5f4ddfff748f8e0b31b3aa1a11bd2efd0c5053b0 Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 14:50:25 +0200 Subject: [PATCH 08/25] corrected example --- example.pcolor.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example.pcolor.html b/example.pcolor.html index dc823e6..bf33a24 100644 --- a/example.pcolor.html +++ b/example.pcolor.html @@ -11,12 +11,12 @@ + + +
+ + + From 29fb722f6f7a8823127432c7459aed819139652d Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 16:45:34 +0200 Subject: [PATCH 16/25] performance hacks --- plugins/jquery.flot.pcolor.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/plugins/jquery.flot.pcolor.js b/plugins/jquery.flot.pcolor.js index 095649f..18b8548 100644 --- a/plugins/jquery.flot.pcolor.js +++ b/plugins/jquery.flot.pcolor.js @@ -23,7 +23,7 @@ ocnv.width = 16384; ocnv.height = 1; var octx = ocnv.getContext("2d"); - var grd = octx.createLinearGradient(0,0,16384,0); + var grd = octx.createLinearGradient(0,0,16385,0); if (opt.series.pcolor.colormap==undefined) { var colormap = [[0,"#0000ff"],[0.5,"#ffffff"],[1,"#ff0000"]]; } else { @@ -33,8 +33,8 @@ grd.addColorStop(colormap[n][0],colormap[n][1]); } octx.fillStyle = grd; - octx.fillRect(0,0,16384,1); - plot.colormap = octx.getImageData(0,0,16384,1); + octx.fillRect(0,0,16385,1); + plot.colormap = octx.getImageData(0,0,16385,1); // creates off-screen canvas and context for plot rendering plot.ocnv = document.createElement("canvas"); plot.octx = plot.ocnv.getContext("2d"); @@ -56,9 +56,9 @@ var new_map_x = new Array(h); var x_min = Math.min.apply(null, serie.data[0]); var x_max = Math.max.apply(null, serie.data[0]); - for (var i=0; i=x_min && serie.data[0][i][j]<=x_max && serie.data[1][i][j]>=y_min && serie.data[1][i][j]<=y_max) { var px = (w-1)*(serie.data[0][i][j]-x_min)/dx; @@ -140,7 +140,7 @@ var idxpm = (pyp*w+pxm)*4; var idxmp = (pym*w+pxp)*4; var idxpp = (pyp*w+pxp)*4; - var v = 4*parseInt((serie.data[2][i][j]-c_min)/dc*16383); + var v = 4*parseInt(((serie.data[2][i][j]-c_min)/dc)*16384); var r = plot.colormap.data[v]; var g = plot.colormap.data[v+1]; var b = plot.colormap.data[v+2]; @@ -187,4 +187,4 @@ name: pluginName, version: pluginVersion }); -})(jQuery); +})(jQuery); \ No newline at end of file From 9ca7399fb97c11e226c4bc0ffeed0672729709f2 Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 16:55:54 +0200 Subject: [PATCH 17/25] color bug --- plugins/jquery.flot.pcolor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/jquery.flot.pcolor.js b/plugins/jquery.flot.pcolor.js index 18b8548..12e46ca 100644 --- a/plugins/jquery.flot.pcolor.js +++ b/plugins/jquery.flot.pcolor.js @@ -20,7 +20,7 @@ plot.hooks.drawSeries.push(drawSeries); // creates colormap var ocnv = document.createElement("canvas"); - ocnv.width = 16384; + ocnv.width = 16385; ocnv.height = 1; var octx = ocnv.getContext("2d"); var grd = octx.createLinearGradient(0,0,16385,0); From ea408c4cf136240eaf7ad5b26756fa313ae95b2c Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 19:54:12 +0200 Subject: [PATCH 18/25] color map typo --- README.pcolor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.pcolor.md b/README.pcolor.md index 8ec0f27..513317d 100644 --- a/README.pcolor.md +++ b/README.pcolor.md @@ -37,7 +37,7 @@ 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"], +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"] ]; ``` From a516923c57ba162b738f4a0ae452540a2454f4e6 Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Fri, 24 Jul 2015 19:56:36 +0200 Subject: [PATCH 19/25] rewind --- plugins/jquery.flot.pcolor.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/plugins/jquery.flot.pcolor.js b/plugins/jquery.flot.pcolor.js index 12e46ca..110014a 100644 --- a/plugins/jquery.flot.pcolor.js +++ b/plugins/jquery.flot.pcolor.js @@ -56,9 +56,9 @@ var new_map_x = new Array(h); var x_min = Math.min.apply(null, serie.data[0]); var x_max = Math.max.apply(null, serie.data[0]); - for (var i = 0; i !== h; i++) { + for (var i=0; i=x_min && serie.data[0][i][j]<=x_max && serie.data[1][i][j]>=y_min && serie.data[1][i][j]<=y_max) { var px = (w-1)*(serie.data[0][i][j]-x_min)/dx; From cd4472ab2e2c658638d1bb9f0dcda34345d90b0e Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Sat, 25 Jul 2015 14:10:23 +0200 Subject: [PATCH 20/25] added colorbar --- README.pcolor.md | 21 +++- example.pcolor.html | 26 +++-- plugins/jquery.flot.pcolor.js | 194 +++++++++++++++++++++++++++++++++- 3 files changed, 223 insertions(+), 18 deletions(-) diff --git a/README.pcolor.md b/README.pcolor.md index 513317d..9088183 100644 --- a/README.pcolor.md +++ b/README.pcolor.md @@ -3,7 +3,7 @@ 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 }}); +var my_plot = $.plot($("#plot_container"), [data], series:{pcolor:{ active:true, show:true, colormap: my_colormap, scalebar: scalebar_options }}); ``` ## Data format ## @@ -41,8 +41,25 @@ var colormap_jet = [ [0,"#00007f"], [0.125,"#0000ff"], [0.25,"#007fff"], [0.375, [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" +} +``` +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. +The scale bar is deactivated by settings ```scalebar_options = null```. + ## Grid ## -The grid can be displayed by setting ```grid: {aboveData:true}``` in Flot options. +The grid can be displayed by setting ```grid: {aboveData:true}``` in Flot options. Note that it will display above the color 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. diff --git a/example.pcolor.html b/example.pcolor.html index bf33a24..fcd4832 100644 --- a/example.pcolor.html +++ b/example.pcolor.html @@ -7,16 +7,16 @@ -
+
diff --git a/plugins/jquery.flot.pcolor.js b/plugins/jquery.flot.pcolor.js index 110014a..60f70da 100644 --- a/plugins/jquery.flot.pcolor.js +++ b/plugins/jquery.flot.pcolor.js @@ -1,11 +1,23 @@ (function ($) { "use strict"; - var pluginName = "pcolor", pluginVersion = "0.1.2"; + var pluginName = "pcolor", pluginVersion = "0.2.0"; var options = { series: { pcolor: { active: false, show: false, + scalebar: + { + location: "top right", // can be a combination of top, right, left, bottom + orientation: "vertical", // horizontal or vertical + width:15, // pixel width + height:100, // pixel height + fontsize:"10px", // font size + fontfamily:"times", // font family + labels:3, // number of labels (>1 or not displayed) + labelformat:"1f" // label format: number = truncation accuracy + // letter = "f":toFixed, "p":toPrecision, "e":toExponential + } } } }; @@ -15,29 +27,75 @@ var offset = null,opt = null,series = null; plot.hooks.processOptions.push(processOptions); function processOptions(plot,options){ + // parses options for pcolor plot if(options.series.pcolor.active){ - opt = options; + // hook for pcolor rendering plot.hooks.drawSeries.push(drawSeries); - // creates colormap + + if (options.series.pcolor.scalebar) { + // parses position string + var tags = options.series.pcolor.scalebar.location.split(" "); + var left = (tags.indexOf("left")>-1); + var right = (tags.indexOf("right")>-1); + var top = (tags.indexOf("top")>-1); + var bottom = (tags.indexOf("bottom")>-1); + plot.scalebar_position = [top && left, + top && right, + bottom && right, + bottom && left].indexOf(true); + // determines if the scale bar is rendered + plot.scalebar = (tags.length>0) && (tags.indexOf("none")==-1); + // orientation: horizontal=true, vertical=false (default) + plot.scalebar_orientation = (options.series.pcolor.scalebar.orientation.indexOf("horizontal")>-1); + // creates canvas with scale bar gradient + plot._sbar_gcnv = document.createElement("canvas"); + var sctx = plot._sbar_gcnv.getContext("2d"); + plot._sbar_gcnv.width = options.series.pcolor.scalebar.width; + plot._sbar_gcnv.height = options.series.pcolor.scalebar.height; + if (plot.scalebar_orientation) { + var cgrd = sctx.createLinearGradient(0,0,plot._sbar_gcnv.width,0); + } else { + var cgrd = sctx.createLinearGradient(0,plot._sbar_gcnv.height,0,0); + } + } else { + plot.scalebar = false; + } + // creates color map + // most convenient way found so far: draw a gradient on an off-screen canvas + // and store it as a bitmap var ocnv = document.createElement("canvas"); ocnv.width = 16385; ocnv.height = 1; var octx = ocnv.getContext("2d"); var grd = octx.createLinearGradient(0,0,16385,0); - if (opt.series.pcolor.colormap==undefined) { + if (options.series.pcolor.colormap==undefined) { var colormap = [[0,"#0000ff"],[0.5,"#ffffff"],[1,"#ff0000"]]; } else { - var colormap = opt.series.pcolor.colormap; + var colormap = options.series.pcolor.colormap; } for (var n=0; n1) { + ctx.font = serie.pcolor.scalebar.fontsize + " " + serie.pcolor.scalebar.fontfamily; + // computes the maximum width of the scale bar labels + var labels = new Array(serie.pcolor.scalebar.labels); + var dt = dc/(serie.pcolor.scalebar.labels-1); + // couldn't find a standard way to obtain the font height + // using the full block character trick instead. + var tmh = ctx.measureText('\u2588').width; + var tmw = 0; + for (var t=0; t1, as otherwise it makes no sense + if (serie.pcolor.scalebar.labels>1) { + // positions the background for the labels and the labels inside + ctx.fillStyle="rgba(255,255,255,0.66)"; + if (plot.scalebar_orientation) { + ctx.fillRect(cpx+ocpx, cpy+ocpy, plot._sbar_gcnv.width, tmh+4); + ctx.fillStyle="#000000"; + var cdw = (plot._sbar_gcnv.width-tmw-4)/(serie.pcolor.scalebar.labels-1); + for (t=0; t Date: Sat, 25 Jul 2015 17:33:10 +0200 Subject: [PATCH 21/25] some additions - label alignment - custom formatting function --- README.pcolor.md | 8 ++++-- example.pcolor.html | 4 +-- plugins/jquery.flot.pcolor.js | 54 +++++++++++++++++++++++++++++------ 3 files changed, 53 insertions(+), 13 deletions(-) diff --git a/README.pcolor.md b/README.pcolor.md index 9088183..b538c69 100644 --- a/README.pcolor.md +++ b/README.pcolor.md @@ -52,14 +52,18 @@ scalebar_options = { fontsize:"9px", fontfamily:"times", labels:3, // number of labels, >1 to display any - labelformat:"1f" + 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. +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. diff --git a/example.pcolor.html b/example.pcolor.html index fcd4832..a182e6f 100644 --- a/example.pcolor.html +++ b/example.pcolor.html @@ -16,7 +16,7 @@ [0.5,"#7fff7f"], [0.625,"#ffff00"], [0.75,"#ff7f00"], [0.875,"#ff0000"], [1.0,"#7f0000"] ]; var options = { - series:{pcolor:{active:true,show:true,colormap:colormap_jet,colorbar:{location:"bottom right",orientation:"horizontal",width:100,height:15,fontsize:"9px",fontfamily:"times",labels:3,labelformat:"1f"}}} + 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); @@ -40,7 +40,7 @@ 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; + 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]); diff --git a/plugins/jquery.flot.pcolor.js b/plugins/jquery.flot.pcolor.js index 60f70da..a7021de 100644 --- a/plugins/jquery.flot.pcolor.js +++ b/plugins/jquery.flot.pcolor.js @@ -15,14 +15,14 @@ fontsize:"10px", // font size fontfamily:"times", // font family labels:3, // number of labels (>1 or not displayed) - labelformat:"1f" // label format: number = truncation accuracy - // letter = "f":toFixed, "p":toPrecision, "e":toExponential + labelformat:"1f", // label format: number = truncation accuracy + // letter = "f":toFixed, "p":toPrecision, "e":toExponential, "c":custom + labelformatter: function(value,precision){return ""}, + textalign:"right" // alignment of labels: left (default), center, right or spread } } } }; - var defaultOptions = { - }; function init(plot) { var offset = null,opt = null,series = null; plot.hooks.processOptions.push(processOptions); @@ -47,6 +47,17 @@ plot.scalebar = (tags.length>0) && (tags.indexOf("none")==-1); // orientation: horizontal=true, vertical=false (default) plot.scalebar_orientation = (options.series.pcolor.scalebar.orientation.indexOf("horizontal")>-1); + // alignment of labels + var align_left = (options.series.pcolor.scalebar.textalign=="left"); + var align_center = (options.series.pcolor.scalebar.textalign=="center"); + var align_right = (options.series.pcolor.scalebar.textalign=="right"); + var align_spread = (options.series.pcolor.scalebar.textalign=="spread"); + plot.sbar_textalign = [align_left,align_center,align_right,align_spread].indexOf(true); + plot.sbar_textalign = (plot.sbar_textalign>-1)*plot.sbar_textalign; + // spread not allowed for vertical configuration + if (!plot.scalebar_orientation && plot.sbar_textalign==3) { + plot.sbar_textalign = 0; + } // creates canvas with scale bar gradient plot._sbar_gcnv = document.createElement("canvas"); var sctx = plot._sbar_gcnv.getContext("2d"); @@ -241,13 +252,13 @@ // prepares labels if (serie.pcolor.scalebar.labels>1) { ctx.font = serie.pcolor.scalebar.fontsize + " " + serie.pcolor.scalebar.fontfamily; - // computes the maximum width of the scale bar labels + // formats labels and computes their width var labels = new Array(serie.pcolor.scalebar.labels); + var lwidths = new Array(serie.pcolor.scalebar.labels); var dt = dc/(serie.pcolor.scalebar.labels-1); // couldn't find a standard way to obtain the font height // using the full block character trick instead. var tmh = ctx.measureText('\u2588').width; - var tmw = 0; for (var t=0; t1, as otherwise it makes no sense if (serie.pcolor.scalebar.labels>1) { // positions the background for the labels and the labels inside ctx.fillStyle="rgba(255,255,255,0.66)"; if (plot.scalebar_orientation) { + // for horizontal orientation ctx.fillRect(cpx+ocpx, cpy+ocpy, plot._sbar_gcnv.width, tmh+4); ctx.fillStyle="#000000"; var cdw = (plot._sbar_gcnv.width-tmw-4)/(serie.pcolor.scalebar.labels-1); + var labx = cpx+ocpx+otx+2; // horizontal offset + var laby = cpy+ocpy+oty; // vertical position for (t=0; t Date: Sat, 25 Jul 2015 17:34:25 +0200 Subject: [PATCH 22/25] version bump --- plugins/jquery.flot.pcolor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/jquery.flot.pcolor.js b/plugins/jquery.flot.pcolor.js index a7021de..f344529 100644 --- a/plugins/jquery.flot.pcolor.js +++ b/plugins/jquery.flot.pcolor.js @@ -1,6 +1,6 @@ (function ($) { "use strict"; - var pluginName = "pcolor", pluginVersion = "0.2.0"; + var pluginName = "pcolor", pluginVersion = "0.2.1"; var options = { series: { pcolor: { From 0fffb96bf9d626daa47b7adb45c769738c1ddef3 Mon Sep 17 00:00:00 2001 From: Vincent Paeder Date: Sat, 25 Jul 2015 18:15:34 +0200 Subject: [PATCH 23/25] some reorganization --- plugins/jquery.flot.pcolor.js | 120 +++++++++++++++++----------------- 1 file changed, 61 insertions(+), 59 deletions(-) diff --git a/plugins/jquery.flot.pcolor.js b/plugins/jquery.flot.pcolor.js index f344529..6d3c5c9 100644 --- a/plugins/jquery.flot.pcolor.js +++ b/plugins/jquery.flot.pcolor.js @@ -32,6 +32,8 @@ // hook for pcolor rendering plot.hooks.drawSeries.push(drawSeries); + // creates plot scale bar object + plot.scalebar = {} if (options.series.pcolor.scalebar) { // parses position string var tags = options.series.pcolor.scalebar.location.split(" "); @@ -39,37 +41,37 @@ var right = (tags.indexOf("right")>-1); var top = (tags.indexOf("top")>-1); var bottom = (tags.indexOf("bottom")>-1); - plot.scalebar_position = [top && left, + plot.scalebar.position = [top && left, top && right, bottom && right, bottom && left].indexOf(true); // determines if the scale bar is rendered - plot.scalebar = (tags.length>0) && (tags.indexOf("none")==-1); + plot.scalebar.show = (tags.length>0) && (tags.indexOf("none")==-1); // orientation: horizontal=true, vertical=false (default) - plot.scalebar_orientation = (options.series.pcolor.scalebar.orientation.indexOf("horizontal")>-1); + plot.scalebar.orientation = (options.series.pcolor.scalebar.orientation.indexOf("horizontal")>-1); // alignment of labels var align_left = (options.series.pcolor.scalebar.textalign=="left"); var align_center = (options.series.pcolor.scalebar.textalign=="center"); var align_right = (options.series.pcolor.scalebar.textalign=="right"); var align_spread = (options.series.pcolor.scalebar.textalign=="spread"); - plot.sbar_textalign = [align_left,align_center,align_right,align_spread].indexOf(true); - plot.sbar_textalign = (plot.sbar_textalign>-1)*plot.sbar_textalign; + plot.scalebar.textalign = [align_left,align_center,align_right,align_spread].indexOf(true); + plot.scalebar.textalign = (plot.scalebar.textalign>-1)*plot.scalebar.textalign; // spread not allowed for vertical configuration - if (!plot.scalebar_orientation && plot.sbar_textalign==3) { - plot.sbar_textalign = 0; + if (!plot.scalebar.orientation && plot.scalebar.textalign==3) { + plot.scalebar.textalign = 0; } // creates canvas with scale bar gradient - plot._sbar_gcnv = document.createElement("canvas"); - var sctx = plot._sbar_gcnv.getContext("2d"); - plot._sbar_gcnv.width = options.series.pcolor.scalebar.width; - plot._sbar_gcnv.height = options.series.pcolor.scalebar.height; - if (plot.scalebar_orientation) { - var cgrd = sctx.createLinearGradient(0,0,plot._sbar_gcnv.width,0); + plot.scalebar.grdcnv = document.createElement("canvas"); + var sctx = plot.scalebar.grdcnv.getContext("2d"); + plot.scalebar.grdcnv.width = options.series.pcolor.scalebar.width; + plot.scalebar.grdcnv.height = options.series.pcolor.scalebar.height; + if (plot.scalebar.orientation) { + var cgrd = sctx.createLinearGradient(0,0,plot.scalebar.grdcnv.width,0); } else { - var cgrd = sctx.createLinearGradient(0,plot._sbar_gcnv.height,0,0); + var cgrd = sctx.createLinearGradient(0,plot.scalebar.grdcnv.height,0,0); } } else { - plot.scalebar = false; + plot.scalebar.show = false; } // creates color map // most convenient way found so far: draw a gradient on an off-screen canvas @@ -86,7 +88,7 @@ } for (var n=0; n1) { @@ -261,18 +263,18 @@ var tmh = ctx.measureText('\u2588').width; for (var t=0; t1) { // positions the background for the labels and the labels inside ctx.fillStyle="rgba(255,255,255,0.66)"; - if (plot.scalebar_orientation) { + if (plot.scalebar.orientation) { // for horizontal orientation - ctx.fillRect(cpx+ocpx, cpy+ocpy, plot._sbar_gcnv.width, tmh+4); + ctx.fillRect(cpx+ocpx, cpy+ocpy, plot.scalebar.grdcnv.width, tmh+4); ctx.fillStyle="#000000"; - var cdw = (plot._sbar_gcnv.width-tmw-4)/(serie.pcolor.scalebar.labels-1); + var cdw = (plot.scalebar.grdcnv.width-tmw-4)/(serie.pcolor.scalebar.labels-1); var labx = cpx+ocpx+otx+2; // horizontal offset var laby = cpy+ocpy+oty; // vertical position for (t=0; t Date: Sat, 25 Jul 2015 21:17:05 +0200 Subject: [PATCH 24/25] reorganization moved all persistent objects into one pcolor parent --- plugins/jquery.flot.pcolor.js | 138 +++++++++++++++++----------------- 1 file changed, 69 insertions(+), 69 deletions(-) diff --git a/plugins/jquery.flot.pcolor.js b/plugins/jquery.flot.pcolor.js index 6d3c5c9..b49d535 100644 --- a/plugins/jquery.flot.pcolor.js +++ b/plugins/jquery.flot.pcolor.js @@ -32,8 +32,8 @@ // hook for pcolor rendering plot.hooks.drawSeries.push(drawSeries); - // creates plot scale bar object - plot.scalebar = {} + // creates pcolor objects + plot.pcolor = {scalebar:{}} if (options.series.pcolor.scalebar) { // parses position string var tags = options.series.pcolor.scalebar.location.split(" "); @@ -41,37 +41,37 @@ var right = (tags.indexOf("right")>-1); var top = (tags.indexOf("top")>-1); var bottom = (tags.indexOf("bottom")>-1); - plot.scalebar.position = [top && left, + plot.pcolor.scalebar.position = [top && left, top && right, bottom && right, bottom && left].indexOf(true); // determines if the scale bar is rendered - plot.scalebar.show = (tags.length>0) && (tags.indexOf("none")==-1); + plot.pcolor.scalebar.show = (tags.length>0) && (tags.indexOf("none")==-1); // orientation: horizontal=true, vertical=false (default) - plot.scalebar.orientation = (options.series.pcolor.scalebar.orientation.indexOf("horizontal")>-1); + plot.pcolor.scalebar.orientation = (options.series.pcolor.scalebar.orientation.indexOf("horizontal")>-1); // alignment of labels var align_left = (options.series.pcolor.scalebar.textalign=="left"); var align_center = (options.series.pcolor.scalebar.textalign=="center"); var align_right = (options.series.pcolor.scalebar.textalign=="right"); var align_spread = (options.series.pcolor.scalebar.textalign=="spread"); - plot.scalebar.textalign = [align_left,align_center,align_right,align_spread].indexOf(true); - plot.scalebar.textalign = (plot.scalebar.textalign>-1)*plot.scalebar.textalign; + plot.pcolor.scalebar.textalign = [align_left,align_center,align_right,align_spread].indexOf(true); + plot.pcolor.scalebar.textalign = (plot.pcolor.scalebar.textalign>-1)*plot.pcolor.scalebar.textalign; // spread not allowed for vertical configuration - if (!plot.scalebar.orientation && plot.scalebar.textalign==3) { - plot.scalebar.textalign = 0; + if (!plot.pcolor.scalebar.orientation && plot.pcolor.scalebar.textalign==3) { + plot.pcolor.scalebar.textalign = 0; } // creates canvas with scale bar gradient - plot.scalebar.grdcnv = document.createElement("canvas"); - var sctx = plot.scalebar.grdcnv.getContext("2d"); - plot.scalebar.grdcnv.width = options.series.pcolor.scalebar.width; - plot.scalebar.grdcnv.height = options.series.pcolor.scalebar.height; - if (plot.scalebar.orientation) { - var cgrd = sctx.createLinearGradient(0,0,plot.scalebar.grdcnv.width,0); + plot.pcolor.scalebar.grdcnv = document.createElement("canvas"); + var sctx = plot.pcolor.scalebar.grdcnv.getContext("2d"); + plot.pcolor.scalebar.grdcnv.width = options.series.pcolor.scalebar.width; + plot.pcolor.scalebar.grdcnv.height = options.series.pcolor.scalebar.height; + if (plot.pcolor.scalebar.orientation) { + var cgrd = sctx.createLinearGradient(0,0,plot.pcolor.scalebar.grdcnv.width,0); } else { - var cgrd = sctx.createLinearGradient(0,plot.scalebar.grdcnv.height,0,0); + var cgrd = sctx.createLinearGradient(0,plot.pcolor.scalebar.grdcnv.height,0,0); } } else { - plot.scalebar.show = false; + plot.pcolor.scalebar.show = false; } // creates color map // most convenient way found so far: draw a gradient on an off-screen canvas @@ -88,26 +88,26 @@ } for (var n=0; n1) { @@ -263,18 +263,18 @@ var tmh = ctx.measureText('\u2588').width; for (var t=0; t1) { // positions the background for the labels and the labels inside ctx.fillStyle="rgba(255,255,255,0.66)"; - if (plot.scalebar.orientation) { + if (plot.pcolor.scalebar.orientation) { // for horizontal orientation - ctx.fillRect(cpx+ocpx, cpy+ocpy, plot.scalebar.grdcnv.width, tmh+4); + ctx.fillRect(cpx+ocpx, cpy+ocpy, plot.pcolor.scalebar.grdcnv.width, tmh+4); ctx.fillStyle="#000000"; - var cdw = (plot.scalebar.grdcnv.width-tmw-4)/(serie.pcolor.scalebar.labels-1); + var cdw = (plot.pcolor.scalebar.grdcnv.width-tmw-4)/(serie.pcolor.scalebar.labels-1); var labx = cpx+ocpx+otx+2; // horizontal offset var laby = cpy+ocpy+oty; // vertical position for (t=0; t Date: Sat, 25 Jul 2015 22:53:44 +0200 Subject: [PATCH 25/25] simplifications --- README.fastline.md | 5 +---- example.fastline.html | 2 +- plugins/jquery.flot.fastline.js | 23 +++++------------------ 3 files changed, 7 insertions(+), 23 deletions(-) diff --git a/README.fastline.md b/README.fastline.md index fe794e5..32ec876 100644 --- a/README.fastline.md +++ b/README.fastline.md @@ -4,7 +4,7 @@ This plugin makes a very basic line plot. It is intended to efficiently render l ## 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, colors: my_colors }}); +var my_plot = $.plot($("#plot_container"), [data], series:{fastline:{ active:true, show:true }}); ``` ## Data format ## @@ -23,8 +23,5 @@ my_plot.getAxes().yaxis.options.min = new_y_min; my_plot.getAxes().yaxis.options.max = new_y_max; ``` -## Colors ## -The *colors* option is a list of color codes. It should be at least as long as the number of data sets. - ## Example ## See included file example.fastline.html diff --git a/example.fastline.html b/example.fastline.html index 0574302..d5819bb 100644 --- a/example.fastline.html +++ b/example.fastline.html @@ -9,7 +9,7 @@