From 947c16638550d8fb1efc5ac5454dfce69958b4e8 Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Wed, 28 Apr 2010 15:44:41 +0000 Subject: [PATCH] Support for coloring axes, and automatic tick color selection git-svn-id: https://flot.googlecode.com/svn/trunk@257 1e0a6537-2640-0410-bfb7-f154510ff394 --- API.txt | 43 ++++++++++++++++++++++++++----------------- NEWS.txt | 17 ++++++++++++++--- jquery.flot.js | 33 +++++++++++++++++++++++---------- 3 files changed, 63 insertions(+), 30 deletions(-) diff --git a/API.txt b/API.txt index 1cf2c46..fe297d9 100644 --- a/API.txt +++ b/API.txt @@ -174,6 +174,10 @@ Customizing the axes xaxis, yaxis: { position: "bottom" or "top" or "left" or "right" mode: null or "time" + + color: null or color spec + tickColor: null or color spec + min: null or number max: null or number autoscaleMargin: null or number @@ -203,17 +207,23 @@ how the data is interpreted, the default of null means as decimal numbers. Use "time" for time series data, see the time series data section. +The "color" option determines the color of the labels and ticks for +the axis (default is the grid color). For more fine-grained control +you can also set the color of the ticks separately with "tickColor" +(otherwise it's autogenerated as the base color with some +transparency). + The options "min"/"max" are the precise minimum/maximum value on the scale. If you don't specify either of them, a value will automatically be chosen based on the minimum/maximum data values. The "autoscaleMargin" is a bit esoteric: it's the fraction of margin that the scaling algorithm will add to avoid that the outermost points -ends up on the grid border. Note that this margin is only applied -when a min or max value is not explicitly set. If a margin is -specified, the plot will furthermore extend the axis end-point to the -nearest whole tick. The default value is "null" for the x axis and -0.02 for the y axis which seems appropriate for most cases. +ends up on the grid border. Note that this margin is only applied when +a min or max value is not explicitly set. If a margin is specified, +the plot will furthermore extend the axis end-point to the nearest +whole tick. The default value is "null" for the x axes and 0.02 for y +axes which seems appropriate for most cases. "transform" and "inverseTransform" are callbacks you can put in to change the way the data is drawn. You can design a function to @@ -591,7 +601,6 @@ Customizing the grid aboveData: boolean color: color backgroundColor: color/gradient or null - tickColor: color labelMargin: number axisMargin: number markings: array of markings or (fn: axes -> array of markings) @@ -603,9 +612,10 @@ Customizing the grid mouseActiveRadius: number } -The grid is the thing with the axes and a number of ticks. "color" is -the color of the grid itself whereas "backgroundColor" specifies the -background color inside the grid area. The default value of null means +The grid is the thing with the axes and a number of ticks. Many of the +things in the grid are configured under the individual axes, but not +all. "color" is the color of the grid itself whereas "backgroundColor" +specifies the background color inside the grid area, here null means that the background is transparent. You can also set a gradient, see the gradient documentation below. @@ -613,14 +623,13 @@ You can turn off the whole grid including tick labels by setting "show" to false. "aboveData" determines whether the grid is drawn above the data or below (below is default). -"tickColor" is the color of the ticks, "labelMargin" is the space in -pixels between tick labels and axis line, and "axisMargin" is the -space in pixels between axes when there are two next to each other. -Note that you can style the tick labels with CSS, e.g. to change the -color. They have class "tickLabel". "borderWidth" is the width of the -border around the plot. Set it to 0 to disable the border. You can -also set "borderColor" if you want the border to have a different -color than the grid lines. +"labelMargin" is the space in pixels between tick labels and axis +line, and "axisMargin" is the space in pixels between axes when there +are two next to each other. Note that you can style the tick labels +with CSS, e.g. to change the color. They have class "tickLabel". +"borderWidth" is the width of the border around the plot. Set it to 0 +to disable the border. You can also set "borderColor" if you want the +border to have a different color than the grid lines. "markings" is used to draw simple lines and rectangular areas in the background of the plot. You can either specify an array of ranges on diff --git a/NEWS.txt b/NEWS.txt index 14fe460..c36775c 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -24,7 +24,13 @@ xaxis/yaxis directly (it now sets the default settings for the arrays). Plugins touching the axes must be ported to take the extra axes into account, a couple of helper functions have been added for that purpose, check the source. - + +"tickColor" on the grid options is now deprecated in favour of a +corresponding option on the axes, so { grid: { tickColor: "#000" }} +becomes { xaxis: { tickColor: "#000"}, yaxis: { tickColor: "#000"} }, +but if you just configure a base color Flot will now autogenerate a +tick color by adding transparency. Backwards-compatibility hooks are +in place. Changes: @@ -48,8 +54,13 @@ Changes: www.flightdataservices.com). - New setting on axes, "tickLength", to control the size of ticks or turn them off without turning off the labels. -- Axes are now put in container divs with classes, for instance labels - in the x axes can be reached via ".xAxis .tickLabels". +- Axis labels are now put in container divs with classes, for instance + labels in the x axes can be reached via ".xAxis .tickLabel". +- Support for setting the color of an axis (sponsored by Flight Data + Services, www.flightdataservices.com). +- Tick color is now auto-generated as the base color with some + transparency (unless you override it). + - New hooks: drawSeries Bug fixes: diff --git a/jquery.flot.js b/jquery.flot.js index ebb64e9..b6eb238 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -53,6 +53,8 @@ xaxis: { position: "bottom", // or "top" mode: null, // null or "time" + color: null, // base color, labels, ticks + tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)" transform: null, // null or f: number -> number to transform axis inverseTransform: null, // if transform is set, this should be the inverse function min: null, // min. value to show, null means set automatically @@ -110,11 +112,11 @@ aboveData: false, color: "#545454", // primary color used for outline and labels backgroundColor: null, // null for transparent, else color - tickColor: "rgba(0,0,0,0.15)", // color used for the ticks + borderColor: null, // set if different from the grid color + tickColor: null, // color for the ticks, e.g. "rgba(0,0,0,0.15)" labelMargin: 5, // in pixels axisMargin: 8, // in pixels borderWidth: 2, // in pixels - borderColor: null, // set if different from the grid color markings: null, // array of ranges or fn: axes -> array of ranges markingsColor: "#f4f4f4", markingsLineWidth: 2, @@ -130,8 +132,6 @@ overlay = null, // canvas for interactive stuff on top of plot eventHolder = null, // jQuery object that events should be bound to ctx = null, octx = null, - /*axes = { xaxis: { n: 1 }, yaxis: { n: 1 }, - x2axis: { n: 2 }, y2axis: { n: 2 } },*/ xaxes = [], yaxes = [], plotOffset = { left: 0, right: 0, top: 0, bottom: 0}, canvasWidth = 0, canvasHeight = 0, @@ -232,9 +232,22 @@ var i; $.extend(true, options, opts); + + if (options.xaxis.color == null) + options.xaxis.color = options.grid.color; + if (options.yaxis.color == null) + options.yaxis.color = options.grid.color; + + if (options.xaxis.tickColor == null) // backwards-compatibility + options.xaxis.tickColor = options.grid.tickColor; + if (options.yaxis.tickColor == null) // backwards-compatibility + options.yaxis.tickColor = options.grid.tickColor; + if (options.grid.borderColor == null) options.grid.borderColor = options.grid.color; - + if (options.grid.tickColor == null) + options.grid.tickColor = $.color.parse(options.grid.color).scale('a', 0.22).toString(); + // fill in defaults in axes, copy at least always the // first as the rest of the code assumes it'll be there for (i = 0; i < Math.max(1, options.xaxes.length); ++i) @@ -1438,13 +1451,15 @@ } // draw the ticks - ctx.strokeStyle = options.grid.tickColor; var axes = getUsedAxes(), bw = options.grid.borderWidth; for (var j = 0; j < axes.length; ++j) { var axis = axes[j], box = axis.box, t = axis.tickLength, x, y, xoff, yoff; + ctx.strokeStyle = axis.options.tickColor || $.color.parse(axis.options.color).scale('a', 0.22).toString(); + ctx.lineWidth = 1; + // find the edges if (axis.direction == "x") { x = 0; @@ -1460,8 +1475,6 @@ else x = box.left - plotOffset.left; } - - ctx.lineWidth = 1; // draw tick bar if (!axis.innermost) { @@ -1536,13 +1549,13 @@ function insertAxisLabels() { placeholder.find(".tickLabels").remove(); - var html = ['
']; + var html = ['
']; var axes = getUsedAxes(); for (var j = 0; j < axes.length; ++j) { var axis = axes[j], box = axis.box; //debug: html.push('
') - html.push('
'); + html.push('
'); for (var i = 0; i < axis.ticks.length; ++i) { var tick = axis.ticks[i]; if (!tick.label || tick.v < axis.min || tick.v > axis.max)