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

Added support for clicking on the plot, still a bit primitive

Browse Source 
git-svn-id: https://flot.googlecode.com/svn/trunk@34 1e0a6537-2640-0410-bfb7-f154510ff394
pull/1/head
olau@iola.dk 19 years ago
parent dc1e624d84
commit f4ffef258e
4 changed files with 86 additions and 8 deletions
Show Stats Download Patch File Download Diff File

29
API.txt
Unescape Escape View File

@ -8,16 +8,16 @@ Consider a call to the plot function:
The placeholder is a jQuery object that the plot will be put into. The placeholder is a jQuery object that the plot will be put into.
This placeholder needs to have its width and height set as explained This placeholder needs to have its width and height set as explained
in the README. The plot will modify some properties of the placeholder in the README. The plot will modify some properties of the placeholder
so it's recommended you simply pass in a div that you don't use it for so it's recommended you simply pass in a div that you don't use for
anything else. anything else.
The format of the data is documented below, as is the available The format of the data is documented below, as is the available
options. The "plot" object returned has some members you can call. options. The "plot" object returned has some members you can call.
These are documented separately below. These are documented separately below.
Note that in general there are no guarantees if you change any of the Note that in general Flot gives no guarantees if you change any of the
objects you pass in to the plot function or get out of it as the objects you pass in to the plot function or get out of it. The objects
objects may not be deep-copied. may not be deep-copied.
Data Format Data Format
@ -262,7 +262,8 @@ Customizing the grid
color: color, color: color,
backgroundColor: color or null, backgroundColor: color or null,
tickColor: color, tickColor: color,
labelMargin: number labelMargin: number,
clickable: boolean
} }
The grid is the thing with the two axes and a number of ticks. "color" The grid is the thing with the two axes and a number of ticks. "color"
@ -273,10 +274,26 @@ backgroundColor if want the grid area to be a different color from the
page color. Otherwise you might as well just set the background color page color. Otherwise you might as well just set the background color
of the page with CSS. of the page with CSS.
"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. between tick labels and the grid.
If you set "clickable" to true, the plot will listen for click events
on the plot are and fire a "plotclick" event on the placeholder with
an object { x: number, y: number } as parameter when one occurs. The
returned coordinates will be in the unit of the plot (not in pixels).
You can use it like this:
$.plot($("#placeholder"), [ d ], { grid: { clickable: true } });
$("#placeholder").bind("plotclick", function (e, pos) {
// the values are in pos.x and pos.y
});
Support for hover indications or for associating the clicks with any
specific data is still forthcoming.
Customizing the selection Customizing the selection
========================= =========================

1
examples/index.html
Unescape Escape View File

@ -20,6 +20,7 @@
<li><a href="real-data.html">Real data with a bit of interactivity</a></li> <li><a href="real-data.html">Real data with a bit of interactivity</a></li>
<li><a href="selection.html">Selection support and zooming</a></li> <li><a href="selection.html">Selection support and zooming</a></li>
<li><a href="zooming.html">Zooming with overview</a></li> <li><a href="zooming.html">Zooming with overview</a></li>
<li><a href="interacting.html">Interacting with the data</a></li>
</ul> </ul>
</body> </body>
</html> </html>

38
examples/interacting.html
Unescape Escape View File

@ -0,0 +1,38 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px"></div>
<p>Flot supports user interactions. It's currently still a bit
primitive, but you can enable the user to click on the plot and
get the corresponding x and y values back.</p>
<p>Try clicking on the plot above. <span id="result"></span></p>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d = [];
for (var i = 0; i < 14; i += 0.5)
d.push([i, Math.sin(i)]);
$.plot($("#placeholder"), [ d ], { grid: { clickable: true } });
$("#placeholder").bind("plotclick", function (e, pos) {
// the values are in pos.x and pos.y
$("#result").text('You clicked on (' + pos.x.toFixed(2) + ', ' + pos.y.toFixed(2) + ')');
});
});
</script>
</body>
</html>

24
jquery.flot.js
Unescape Escape View File

@ -67,7 +67,8 @@
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
labelMargin: 3 // in pixels labelMargin: 3, // in pixels
clickable: null
}, },
selection: { selection: {
mode: null, // one of null, "x", "y" or "xy" mode: null, // one of null, "x", "y" or "xy"
@ -164,6 +165,9 @@
// FIXME: temp. work-around until jQuery bug 1871 is fixed // FIXME: temp. work-around until jQuery bug 1871 is fixed
target.get(0).onmousemove = onMouseMove; target.get(0).onmousemove = onMouseMove;
} }
if (options.grid.clickable)
$(overlay).click(onClick);
} }
function findDataRanges() { function findDataRanges() {
@ -1005,6 +1009,7 @@
var selection = { first: { x: -1, y: -1}, second: { x: -1, y: -1} }; var selection = { first: { x: -1, y: -1}, second: { x: -1, y: -1} };
var prevSelection = null; var prevSelection = null;
var selectionInterval = null; var selectionInterval = null;
var ignoreClick = false;
function onMouseMove(ev) { function onMouseMove(ev) {
// FIXME: temp. work-around until jQuery bug 1871 is fixed // FIXME: temp. work-around until jQuery bug 1871 is fixed
@ -1033,6 +1038,22 @@
$(document).one("mouseup", onSelectionMouseUp); $(document).one("mouseup", onSelectionMouseUp);
} }
function onClick(e) {
if (ignoreClick) {
ignoreClick = false;
return;
}
var offset = $(overlay).offset();
var pos = {};
pos.x = e.pageX - offset.left - plotOffset.left;
pos.x = xaxis.min + pos.x / hozScale;
pos.y = e.pageY - offset.top - plotOffset.top;
pos.y = yaxis.max - pos.y / vertScale;
target.trigger("plotclick", [ pos ]);
}
function triggerSelectedEvent() { function triggerSelectedEvent() {
var x1, x2, y1, y2; var x1, x2, y1, y2;
if (selection.first.x <= selection.second.x) { if (selection.first.x <= selection.second.x) {
@ -1075,6 +1096,7 @@
drawSelection(); drawSelection();
triggerSelectedEvent(); triggerSelectedEvent();
ignoreClick = true;
return false; return false;
} }

Write Preview
Loading…
Cancel
Save