diff --git a/API.txt b/API.txt index 106a5f1..cae0c4a 100644 --- a/API.txt +++ b/API.txt @@ -506,6 +506,7 @@ Customizing the grid ==================== grid: { + show: boolean color: color backgroundColor: color/gradient or null tickColor: color @@ -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 background color inside the grid area. The default value of null means 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 between tick labels and the grid. Note that you can style the tick @@ -747,10 +749,11 @@ can call: ticks, legend etc. will not be recomputed (use setupGrid() to do that). You'll probably want to call draw() afterwards. - You can use this function to speed up redrawing a plot if 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 - go. + You can use this function to speed up redrawing a small plot if + you know that the axes won't change. Put in the new data with + setData(newdata), call draw(), and you're good to go. Note that + for large datasets, almost all the time is consumed in draw() + plotting the data so in this case don't bother. - setupGrid() @@ -807,7 +810,9 @@ Flot to keep track of its state, so be careful. A notable other interesting field besides color is datapoints 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() @@ -882,8 +887,10 @@ Currently available hooks (when in doubt, check the Flot source): function(plot, options) - Called after Flot has parsed and merged options. Rarely useful, but - does allow customizations beyond simple merging of default values. + Called after Flot has parsed and merged options. Useful in the + 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] diff --git a/NEWS.txt b/NEWS.txt index 44f6875..5e605a3 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -75,6 +75,8 @@ Changes: don't have to start from the axis. This can be used to make stacked bars. +- New option to disable the (grid.show). + - Plugin system: register an init method in the $.flot.plugins array to get started, see PLUGINS.txt for details on how to write plugins. diff --git a/jquery.flot.js b/jquery.flot.js index 575ca9b..6b9c79e 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -80,6 +80,7 @@ shadowSize: 3 }, grid: { + show: true, color: "#545454", // primary color used for outline and labels backgroundColor: null, // null for transparent, else color tickColor: "#dddddd", // color used for the ticks @@ -530,29 +531,54 @@ } function setupGrid() { - function setupAxis(axis, options) { - setRange(axis, options); - prepareTickGeneration(axis, options); - setTicks(axis, options); - + function setTransformationHelpers(axis) { + var s, m; + // add transformation helpers 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 - axis.p2c = function (p) { return (p - axis.min) * axis.scale; }; + axis.p2c = function (p) { return (p - m) * s; }; // canvas coordinate to data point - axis.c2p = function (c) { return axis.min + c / axis.scale; }; + axis.c2p = function (c) { return m + c / s; }; } else { - axis.p2c = function (p) { return (axis.max - p) * axis.scale; }; - axis.c2p = function (p) { return axis.max - p / axis.scale; }; + s = axis.scale = plotHeight / (axis.max - axis.min) + m = axis.max; + + axis.p2c = function (p) { return (m - p) * s; }; + axis.c2p = function (p) { return m - p / s; }; } } - for (var axis in axes) - setupAxis(axes[axis], options[axis]); + 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 (axis in axes) + setTransformationHelpers(axes[axis]); - setSpacing(); - insertLabels(); + if (options.grid.show) + insertLabels(); + insertLegend(); } @@ -880,7 +906,7 @@ } } - function setSpacing() { + function setGridSpacing() { function measureXLabels(axis) { // to avoid measuring the widths of the labels, we // construct fixed-size boxes and put the labels inside @@ -934,45 +960,40 @@ axis.labelHeight = 0; } } - - measureXLabels(axes.xaxis); - measureYLabels(axes.yaxis); - measureXLabels(axes.x2axis); - measureYLabels(axes.y2axis); // get the most space needed around the grid for things // that may stick out var maxOutset = options.grid.borderWidth; for (i = 0; i < series.length; ++i) maxOutset = Math.max(maxOutset, 2 * (series[i].points.radius + series[i].points.lineWidth/2)); - + plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = maxOutset; - + 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) plotOffset.bottom = Math.max(maxOutset, axes.xaxis.labelHeight + margin); if (axes.yaxis.labelWidth > 0) - plotOffset.left = Math.max(maxOutset, axes.yaxis.labelWidth + margin); - + plotOffset.left = Math.max(maxOutset, axes.yaxis.labelWidth + margin); + if (axes.x2axis.labelHeight > 0) plotOffset.top = Math.max(maxOutset, axes.x2axis.labelHeight + margin); if (axes.y2axis.labelWidth > 0) plotOffset.right = Math.max(maxOutset, axes.y2axis.labelWidth + margin); - + plotWidth = canvasWidth - plotOffset.left - plotOffset.right; 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() { - drawGrid(); + if (options.grid.show) + drawGrid(); for (var i = 0; i < series.length; ++i) drawSeries(series[i]); }