Commit c81f0af7 authored by olau@iola.dk's avatar olau@iola.dk

Added labelFormatter option

git-svn-id: https://flot.googlecode.com/svn/trunk@22 1e0a6537-2640-0410-bfb7-f154510ff394
parent 6963560d
...@@ -94,8 +94,9 @@ Customizing the legend ...@@ -94,8 +94,9 @@ Customizing the legend
legend: { legend: {
show: boolean, show: boolean,
noColumns: number, labelFormatter: null or (fn: string -> string),
labelBoxBorderColor: color, labelBoxBorderColor: color,
noColumns: number,
position: "ne" or "nw" or "se" or "sw", position: "ne" or "nw" or "se" or "sw",
margin: number of pixels, margin: number of pixels,
backgroundColor: null or color, backgroundColor: null or color,
...@@ -104,23 +105,33 @@ Customizing the legend ...@@ -104,23 +105,33 @@ Customizing the legend
} }
The legend is generated as a table with the data series labels and The legend is generated as a table with the data series labels and
small label boxes with the color of the series. "noColumns" is the small label boxes with the color of the series. If you want to format
number of columns to divide the legend table into. "position" the labels in some way, e.g. make them to links, you can pass in a
specifies the overall placement of the legend within the plot function for "labelFormatter". Here's an example that makes them
(top-right, top-left, etc.) and margin the distance to the plot edge. clickable:
"backgroundColor" and "backgroundOpacity" specifies the background.
The default is a partly transparent auto-detected background. labelFormatter: function(label) {
return '<a href="' + label + '">' + label + '</a>';
}
"noColumns" is the number of columns to divide the legend table into.
"position" specifies the overall placement of the legend within the
plot (top-right, top-left, etc.) and margin the distance to the plot
edge. "backgroundColor" and "backgroundOpacity" specifies the
background. The default is a partly transparent auto-detected
background.
If you want the legend to appear somewhere else in the DOM, you can
specify "container" as a jQuery object to put the legend table into.
The "position" and "margin" etc. options will then be ignored.
If you want the legend to appear somewhere else, you can specify
"container" as a jQuery object to put the legend table in. The
"position" and "margin" etc. will then be ignored.
Customizing the axes Customizing the axes
==================== ====================
xaxis, yaxis: { xaxis, yaxis: {
ticks: null or ticks array, ticks: null or ticks array or (fn: range -> ticks array),
noTicks: number, noTicks: number,
tickFormatter: fn: number -> string, tickFormatter: fn: number -> string,
tickDecimals: null or number, tickDecimals: null or number,
......
...@@ -10,6 +10,9 @@ The ticks options can now be a callback function that takes one ...@@ -10,6 +10,9 @@ The ticks options can now be a callback function that takes one
parameter, an object with the attributes min and max. The function parameter, an object with the attributes min and max. The function
should return a ticks array. should return a ticks array.
Added labelFormatter option in legend, useful for turning the legend
labels into links.
Fixed a couple of bugs. Fixed a couple of bugs.
The API should now be fully documented. The API should now be fully documented.
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
legend: { legend: {
show: true, show: true,
noColumns: 1, // number of colums in legend table noColumns: 1, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#ccc", // border color for the little label boxes labelBoxBorderColor: "#ccc", // border color for the little label boxes
container: null, // container (as jQuery object) to put legend in, null means default on top of graph container: null, // container (as jQuery object) to put legend in, null means default on top of graph
position: "ne", // position of default legend container within plot position: "ne", // position of default legend container within plot
...@@ -955,9 +956,13 @@ ...@@ -955,9 +956,13 @@
rowStarted = true; rowStarted = true;
} }
var label = series[i].label;
if (options.legend.labelFormatter != null)
label = options.legend.labelFormatter(label);
fragments.push( fragments.push(
'<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:14px;height:10px;background-color:' + series[i].color + '"></div></div></td>' + '<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:14px;height:10px;background-color:' + series[i].color + '"></div></div></td>' +
'<td class="legendLabel">' + series[i].label + '</td>'); '<td class="legendLabel">' + label + '</td>');
} }
if (rowStarted) if (rowStarted)
fragments.push('</tr>'); fragments.push('</tr>');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment