github-mirrors
/
thingsboard-flot
mirror of https://github.com/thingsboard/flot.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added more members to the Plot object + a few cleanups

Browse Source 
git-svn-id: https://flot.googlecode.com/svn/trunk@57 1e0a6537-2640-0410-bfb7-f154510ff394
pull/1/head
olau@iola.dk 18 years ago
parent 47eb2cb048
commit 2015ca3a84
4 changed files with 196 additions and 137 deletions
Show Stats Download Patch File Download Diff File

33
API.txt
Unescape Escape View File

@ -513,6 +513,37 @@ members:
- getPlotOffset()
Gets the offset that the grid has within the canvas as an object
with the members left, right, top, bottom. I.e., if you draw a
with the members "left", "right", "top", "bottom". I.e., if you draw a
circle on the canvas with the center placed at (left, top), its
center will be at the top-most, left corner of the grid.
- setData(data)
You can use this to reset the data used. Note that axis scaling,
ticks, legend etc. will not be recomputed (use setupGrid() to do
that). You'll probably want to call draw() afterwards.
- getData()
Returns the data currently used. The data series returned are
normalized with missing settings filled in. So for instance to
find out what color Flot has assigned to the data series, you
could do this:
var series = plot.getData();
for (var i = 0; i < series.length; ++i)
alert([i].color);
- setupGrid()
Recalculate and set axis scaling, ticks, legend etc.
Note that because of the drawing model of the canvas, this
function will immediately redraw (actually reinsert in the DOM)
the labels and the legend, but not the actual tick lines because
they're drawn on the canvas. You need to call draw() to get the
canvas redrawn.
- draw()
Redraws the canvas.

5
NEWS.txt
Unescape Escape View File

@ -15,6 +15,11 @@ Support for colored background areas via grid.coloredAreas. Specify an
array of { x1, y1, x2, y2 } objects or a function that returns these
given { xmin, xmax, ymin, ymax }.
More members on the plot object (report by Chris Davies and others).
"getData" for inspecting the assigned settings on data series (e.g.
color) and "setData", "setupGrid" and "draw" for updating the contents
without a total replot.
The default number of ticks to aim for is now dependent on the size of
the plot in pixels. Support for customizing tick interval sizes
directly with axis.minTickSize and axis.tickSize.

3
examples/basic.html
Unescape Escape View File

@ -20,6 +20,7 @@
scaled.</p>
<script id="source" language="javascript" type="text/javascript">
var plot;
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
@ -30,7 +31,7 @@ $(function () {
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2, d3 ]);
plot = $.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>

292
jquery.flot.js
Unescape Escape View File

@ -88,34 +88,34 @@
yLabelMaxWidth = 0, yLabelMaxHeight = 0, xLabelBoxWidth = 0,
canvasWidth = 0, canvasHeight = 0,
plotWidth = 0, plotHeight = 0,
hozScale = 0, vertScale = 0;
// dedicated to storing data for buggy standard compliance cases
var workarounds = {};
hozScale = 0, vertScale = 0,
// dedicated to storing data for buggy standard compliance cases
workarounds = {};
this.setData = setData;
this.setupGrid = setupGrid;
this.draw = draw;
this.clearSelection = clearSelection;
this.setSelection = setSelection;
this.getCanvas = function() { return canvas; };
this.getPlotOffset = function() { return plotOffset; };
this.getData = function() { return series; };
this.getAxes = function() { return { xaxis: xaxis, yaxis: yaxis }; };
// initialize
series = parseData(data_);
parseOptions(options_);
fillInSeriesOptions();
setData(data_);
constructCanvas();
bindEvents();
findDataRanges();
setRange(xaxis, options.xaxis);
prepareTickGeneration(xaxis, options.xaxis);
setTicks(xaxis, options.xaxis);
extendXRangeIfNeededByBar();
setRange(yaxis, options.yaxis);
prepareTickGeneration(yaxis, options.yaxis);
setTicks(yaxis, options.yaxis);
setSpacing();
setupGrid();
draw();
insertLegend();
this.getCanvas = function() { return canvas; };
this.getPlotOffset = function() { return plotOffset; };
this.clearSelection = clearSelection;
this.setSelection = setSelection;
function setData(d) {
series = parseData(d);
fillInSeriesOptions();
processData();
}
function parseData(d) {
var res = [];
@ -145,47 +145,80 @@
options.yaxis.ticks = options.yaxis.noTicks;
}
function constructCanvas() {
canvasWidth = target.width();
canvasHeight = target.height();
target.html(""); // clear target
target.css("position", "relative"); // for positioning labels and overlay
if (canvasWidth <= 0 || canvasHeight <= 0)
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
// the canvas
canvas = $('<canvas width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo(target).get(0);
if ($.browser.msie) // excanvas hack
canvas = window.G_vmlCanvasManager.initElement(canvas);
ctx = canvas.getContext("2d");
function fillInSeriesOptions() {
var i;
// collect what we already got of colors
var neededColors = series.length;
var usedColors = [];
var assignedColors = [];
for (i = 0; i < series.length; ++i) {
var sc = series[i].color;
if (sc != null) {
--neededColors;
if (typeof sc == "number")
assignedColors.push(sc);
else
usedColors.push(parseColor(series[i].color));
}
}
// we might need to generate more colors if higher indices
// are assigned
for (i = 0; i < assignedColors.length; ++i) {
neededColors = Math.max(neededColors, assignedColors[i] + 1);
}
// overlay canvas for interactive features
overlay = $('<canvas style="position:absolute;left:0px;top:0px;" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo(target).get(0);
if ($.browser.msie) // excanvas hack
overlay = window.G_vmlCanvasManager.initElement(overlay);
octx = overlay.getContext("2d");
// produce colors as needed
var colors = [];
var variation = 0;
i = 0;
while (colors.length < neededColors) {
var c;
if (options.colors.length == i) // check degenerate case
c = new Color(100, 100, 100);
else
c = parseColor(options.colors[i]);
// we include the canvas in the event holder too, because IE 7
// sometimes has trouble with the stacking order
eventHolder = $([overlay, canvas]);
}
// vary color if needed
var sign = variation % 2 == 1 ? -1 : 1;
var factor = 1 + sign * Math.ceil(variation / 2) * 0.2;
c.scale(factor, factor, factor);
function bindEvents() {
if (options.selection.mode != null) {
eventHolder.mousedown(onMouseDown);
// FIXME: if we're getting to close to something else,
// we should probably skip this one
colors.push(c);
// FIXME: temp. work-around until jQuery bug 1871 is fixed
eventHolder.each(function () {
this.onmousemove = onMouseMove;
});
++i;
if (i >= options.colors.length) {
i = 0;
++variation;
}
}
if (options.grid.clickable)
eventHolder.click(onClick);
}
// fill in the options
var colori = 0, s;
for (i = 0; i < series.length; ++i) {
s = series[i];
// assign colors
if (s.color == null) {
s.color = colors[colori].toString();
++colori;
}
else if (typeof s.color == "number")
s.color = colors[s.color].toString();
function findDataRanges() {
// copy the rest
s.lines = $.extend(true, {}, options.lines, s.lines);
s.points = $.extend(true, {}, options.points, s.points);
s.bars = $.extend(true, {}, options.bars, s.bars);
if (s.shadowSize == null)
s.shadowSize = options.shadowSize;
}
}
function processData() {
xaxis.datamin = yaxis.datamin = Number.MAX_VALUE;
xaxis.datamax = yaxis.datamax = Number.MIN_VALUE;
@ -224,6 +257,63 @@
yaxis.datamax = 1;
}
function constructCanvas() {
canvasWidth = target.width();
canvasHeight = target.height();
target.html(""); // clear target
target.css("position", "relative"); // for positioning labels and overlay
if (canvasWidth <= 0 || canvasHeight <= 0)
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
// the canvas
canvas = $('<canvas width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo(target).get(0);
if ($.browser.msie) // excanvas hack
canvas = window.G_vmlCanvasManager.initElement(canvas);
ctx = canvas.getContext("2d");
// overlay canvas for interactive features
overlay = $('<canvas style="position:absolute;left:0px;top:0px;" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo(target).get(0);
if ($.browser.msie) // excanvas hack
overlay = window.G_vmlCanvasManager.initElement(overlay);
octx = overlay.getContext("2d");
// we include the canvas in the event holder too, because IE 7
// sometimes has trouble with the stacking order
eventHolder = $([overlay, canvas]);
// bind events
if (options.selection.mode != null) {
eventHolder.mousedown(onMouseDown);
// FIXME: temp. work-around until jQuery bug 1871 is fixed
eventHolder.each(function () {
this.onmousemove = onMouseMove;
});
}
if (options.grid.clickable)
eventHolder.click(onClick);
}
function setupGrid() {
// x axis
setRange(xaxis, options.xaxis);
prepareTickGeneration(xaxis, options.xaxis);
setTicks(xaxis, options.xaxis);
extendXRangeIfNeededByBar();
// y axis
setRange(yaxis, options.yaxis);
prepareTickGeneration(yaxis, options.yaxis);
setTicks(yaxis, options.yaxis);
setSpacing();
insertLabels();
insertLegend();
}
function setRange(axis, axisOptions) {
var min = axisOptions.min != null ? axisOptions.min : axis.datamin;
var max = axisOptions.max != null ? axisOptions.max : axis.datamax;
@ -648,7 +738,6 @@
function draw() {
drawGrid();
drawLabels();
for (var i = 0; i < series.length; i++) {
drawSeries(series[i]);
}
@ -666,6 +755,7 @@
var i;
ctx.save();
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.translate(plotOffset.left, plotOffset.top);
// draw background, if any
@ -749,9 +839,11 @@
}
}
function drawLabels() {
function insertLabels() {
target.find(".tickLabels").remove();
var i, tick;
var html = '<div style="font-size:smaller;color:' + options.grid.color + '">';
var html = '<div class="tickLabels" style="font-size:smaller;color:' + options.grid.color + '">';
// do the x-axis
for (i = 0; i < xaxis.ticks.length; ++i) {
@ -774,79 +866,6 @@
target.append(html);
}
function fillInSeriesOptions() {
var i;
// collect what we already got of colors
var neededColors = series.length;
var usedColors = [];
var assignedColors = [];
for (i = 0; i < series.length; ++i) {
var sc = series[i].color;
if (sc != null) {
--neededColors;
if (typeof sc == "number")
assignedColors.push(sc);
else
usedColors.push(parseColor(series[i].color));
}
}
// we might need to generate more colors if higher indices
// are assigned
for (i = 0; i < assignedColors.length; ++i) {
neededColors = Math.max(neededColors, assignedColors[i] + 1);
}
// produce colors as needed
var colors = [];
var variation = 0;
i = 0;
while (colors.length < neededColors) {
var c;
if (options.colors.length == i) // check degenerate case
c = new Color(100, 100, 100);
else
c = parseColor(options.colors[i]);
// vary color if needed
var sign = variation % 2 == 1 ? -1 : 1;
var factor = 1 + sign * Math.ceil(variation / 2) * 0.2;
c.scale(factor, factor, factor);
// FIXME: if we're getting to close to something else,
// we should probably skip this one
colors.push(c);
++i;
if (i >= options.colors.length) {
i = 0;
++variation;
}
}
// fill in the options
var colori = 0;
for (i = 0; i < series.length; ++i) {
var s = series[i];
// assign colors
if (s.color == null) {
s.color = colors[colori].toString();
++colori;
}
else if (typeof s.color == "number")
s.color = colors[s.color].toString();
// copy the rest
s.lines = $.extend(true, {}, options.lines, s.lines);
s.points = $.extend(true, {}, options.points, s.points);
s.bars = $.extend(true, {}, options.bars, s.bars);
if (s.shadowSize == null)
s.shadowSize = options.shadowSize;
}
}
function drawSeries(series) {
if (series.lines.show || (!series.bars.show && !series.points.show))
drawSeriesLines(series);
@ -1256,6 +1275,8 @@
}
function insertLegend() {
target.find(".legend").remove();
if (!options.legend.show)
return;
@ -1298,7 +1319,7 @@
pos += 'right:' + (m + plotOffset.right) + 'px;';
else if (p.charAt(1) == "w")
pos += 'left:' + (m + plotOffset.bottom) + 'px;';
var div = $('<div class="legend" style="position:absolute;z-index:2;' + pos +'">' + table + '</div>').appendTo(target);
var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(target);
if (options.legend.backgroundOpacity != 0.0) {
// put in the transparent background
// separately to avoid blended labels and
@ -1309,10 +1330,11 @@
if (options.grid.backgroundColor != null)
tmp = options.grid.backgroundColor;
else
tmp = extractColor(div);
tmp = extractColor(legend);
c = parseColor(tmp).adjust(null, null, null, 1).toString();
}
$('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').appendTo(target).css('opacity', options.legend.backgroundOpacity);
var div = legend.children();
$('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity);
}
}

Write Preview
Loading…
Cancel
Save