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

New option grid.show, set to false to disable the grid


git-svn-id: https://flot.googlecode.com/svn/trunk@166 1e0a6537-2640-0410-bfb7-f154510ff394
parent 825b1a3a
...@@ -506,6 +506,7 @@ Customizing the grid ...@@ -506,6 +506,7 @@ Customizing the grid
==================== ====================
grid: { grid: {
show: boolean
color: color color: color
backgroundColor: color/gradient or null backgroundColor: color/gradient or null
tickColor: color tickColor: color
...@@ -523,7 +524,8 @@ The grid is the thing with the axes and a number of ticks. "color" is ...@@ -523,7 +524,8 @@ 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 the color of the grid itself whereas "backgroundColor" specifies the
background color inside the grid area. The default value of null means background color inside the grid area. The default value of null means
that the background is transparent. You can also set a gradient, see that the background is transparent. You can also set a gradient, see
the gradient documentation below. the gradient documentation below. You can turn off the whole grid
including tick labels by setting "show" to false.
"tickColor" is the color of the ticks and "labelMargin" is the spacing "tickColor" is the color of the ticks and "labelMargin" is the spacing
between tick labels and the grid. Note that you can style the tick between tick labels and the grid. Note that you can style the tick
...@@ -747,10 +749,11 @@ can call: ...@@ -747,10 +749,11 @@ can call:
ticks, legend etc. will not be recomputed (use setupGrid() to do ticks, legend etc. will not be recomputed (use setupGrid() to do
that). You'll probably want to call draw() afterwards. that). You'll probably want to call draw() afterwards.
You can use this function to speed up redrawing a plot if you know You can use this function to speed up redrawing a small plot if
that the axes won't change. Put in the new data with you know that the axes won't change. Put in the new data with
setData(newdata) and call draw() afterwards, and you're good to setData(newdata), call draw(), and you're good to go. Note that
go. for large datasets, almost all the time is consumed in draw()
plotting the data so in this case don't bother.
- setupGrid() - setupGrid()
...@@ -807,7 +810,9 @@ Flot to keep track of its state, so be careful. ...@@ -807,7 +810,9 @@ Flot to keep track of its state, so be careful.
A notable other interesting field besides color is datapoints A notable other interesting field besides color is datapoints
which has a field "points" with the normalized data points in a which has a field "points" with the normalized data points in a
flat array. flat array (the field "pointsize" is the increment in the flat
array to get to the next point so for a dataset consisting only of
(x,y) pairs it would be 2).
- getAxes() - getAxes()
...@@ -882,8 +887,10 @@ Currently available hooks (when in doubt, check the Flot source): ...@@ -882,8 +887,10 @@ Currently available hooks (when in doubt, check the Flot source):
function(plot, options) function(plot, options)
Called after Flot has parsed and merged options. Rarely useful, but Called after Flot has parsed and merged options. Useful in the
does allow customizations beyond simple merging of default values. instance where customizations beyond simple merging of default
values is needed. A plugin might use it to detect that it has been
enabled and then turn on or off other options.
- processRawData [phase 3] - processRawData [phase 3]
......
...@@ -75,6 +75,8 @@ Changes: ...@@ -75,6 +75,8 @@ Changes:
don't have to start from the axis. This can be used to make stacked don't have to start from the axis. This can be used to make stacked
bars. bars.
- New option to disable the (grid.show).
- Plugin system: register an init method in the $.flot.plugins array - Plugin system: register an init method in the $.flot.plugins array
to get started, see PLUGINS.txt for details on how to write plugins. to get started, see PLUGINS.txt for details on how to write plugins.
......
...@@ -80,6 +80,7 @@ ...@@ -80,6 +80,7 @@
shadowSize: 3 shadowSize: 3
}, },
grid: { grid: {
show: true,
color: "#545454", // primary color used for outline and labels color: "#545454", // primary color used for outline and labels
backgroundColor: null, // null for transparent, else color backgroundColor: null, // null for transparent, else color
tickColor: "#dddddd", // color used for the ticks tickColor: "#dddddd", // color used for the ticks
...@@ -530,29 +531,54 @@ ...@@ -530,29 +531,54 @@
} }
function setupGrid() { function setupGrid() {
function setupAxis(axis, options) { function setTransformationHelpers(axis) {
setRange(axis, options); var s, m;
prepareTickGeneration(axis, options);
setTicks(axis, options);
// add transformation helpers // add transformation helpers
if (axis == axes.xaxis || axis == axes.x2axis) { if (axis == axes.xaxis || axis == axes.x2axis) {
// precompute how much the axis is scaling a point
// in canvas space
s = axis.scale = plotWidth / (axis.max - axis.min);
m = axis.min;
// data point to canvas coordinate // data point to canvas coordinate
axis.p2c = function (p) { return (p - axis.min) * axis.scale; }; axis.p2c = function (p) { return (p - m) * s; };
// canvas coordinate to data point // canvas coordinate to data point
axis.c2p = function (c) { return axis.min + c / axis.scale; }; axis.c2p = function (c) { return m + c / s; };
} }
else { else {
axis.p2c = function (p) { return (axis.max - p) * axis.scale; }; s = axis.scale = plotHeight / (axis.max - axis.min)
axis.c2p = function (p) { return axis.max - p / axis.scale; }; m = axis.max;
axis.p2c = function (p) { return (m - p) * s; };
axis.c2p = function (p) { return m - p / s; };
}
}
var axis;
for (axis in axes)
setRange(axes[axis], options[axis]);
if (options.grid.show) {
for (axis in axes) {
prepareTickGeneration(axes[axis], options[axis]);
setTicks(axes[axis], options[axis]);
}
setGridSpacing();
} }
else {
plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = 0;
plotWidth = canvasWidth;
plotHeight = canvasHeight;
} }
for (var axis in axes) for (axis in axes)
setupAxis(axes[axis], options[axis]); setTransformationHelpers(axes[axis]);
setSpacing(); if (options.grid.show)
insertLabels(); insertLabels();
insertLegend(); insertLegend();
} }
...@@ -880,7 +906,7 @@ ...@@ -880,7 +906,7 @@
} }
} }
function setSpacing() { function setGridSpacing() {
function measureXLabels(axis) { function measureXLabels(axis) {
// to avoid measuring the widths of the labels, we // to avoid measuring the widths of the labels, we
// construct fixed-size boxes and put the labels inside // construct fixed-size boxes and put the labels inside
...@@ -935,11 +961,6 @@ ...@@ -935,11 +961,6 @@
} }
} }
measureXLabels(axes.xaxis);
measureYLabels(axes.yaxis);
measureXLabels(axes.x2axis);
measureYLabels(axes.y2axis);
// get the most space needed around the grid for things // get the most space needed around the grid for things
// that may stick out // that may stick out
var maxOutset = options.grid.borderWidth; var maxOutset = options.grid.borderWidth;
...@@ -950,6 +971,11 @@ ...@@ -950,6 +971,11 @@
var margin = options.grid.labelMargin + options.grid.borderWidth; var margin = options.grid.labelMargin + options.grid.borderWidth;
measureXLabels(axes.xaxis);
measureYLabels(axes.yaxis);
measureXLabels(axes.x2axis);
measureYLabels(axes.y2axis);
if (axes.xaxis.labelHeight > 0) if (axes.xaxis.labelHeight > 0)
plotOffset.bottom = Math.max(maxOutset, axes.xaxis.labelHeight + margin); plotOffset.bottom = Math.max(maxOutset, axes.xaxis.labelHeight + margin);
if (axes.yaxis.labelWidth > 0) if (axes.yaxis.labelWidth > 0)
...@@ -963,15 +989,10 @@ ...@@ -963,15 +989,10 @@
plotWidth = canvasWidth - plotOffset.left - plotOffset.right; plotWidth = canvasWidth - plotOffset.left - plotOffset.right;
plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top; plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top;
// precompute how much the axis is scaling a point in canvas space
axes.xaxis.scale = plotWidth / (axes.xaxis.max - axes.xaxis.min);
axes.yaxis.scale = plotHeight / (axes.yaxis.max - axes.yaxis.min);
axes.x2axis.scale = plotWidth / (axes.x2axis.max - axes.x2axis.min);
axes.y2axis.scale = plotHeight / (axes.y2axis.max - axes.y2axis.min);
} }
function draw() { function draw() {
if (options.grid.show)
drawGrid(); drawGrid();
for (var i = 0; i < series.length; ++i) for (var i = 0; i < series.length; ++i)
drawSeries(series[i]); drawSeries(series[i]);
......
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