Skip to content

F
flot
Commit f4ffef25 authored by olau@iola.dk's avatar olau@iola.dk
Browse files
Options

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

git-svn-id: https://flot.googlecode.com/svn/trunk@34 1e0a6537-2640-0410-bfb7-f154510ff394
parent dc1e624d
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 8 deletions
API.txt
View file @ f4ffef25
...@@ -8,16 +8,16 @@ Consider a call to the plot function: ...@@ -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 ...@@ -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 ...@@ -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
========================= =========================
......
examples/index.html
View file @ f4ffef25
...@@ -20,6 +20,7 @@ ...@@ -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>
examples/interacting.html 0 → 100644
View file @ f4ffef25
<!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>
jquery.flot.js
View file @ f4ffef25
...@@ -67,7 +67,8 @@ ...@@ -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,8 +165,11 @@ ...@@ -164,8 +165,11 @@
// 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() {
yaxis.datamin = xaxis.datamin = 0; yaxis.datamin = xaxis.datamin = 0;
xaxis.datamax = yaxis.datamax = 1; xaxis.datamax = yaxis.datamax = 1;
...@@ -1005,6 +1009,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -1075,6 +1096,7 @@
drawSelection(); drawSelection();
triggerSelectedEvent(); triggerSelectedEvent();
ignoreClick = true;
return false; return false;
} }
......
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