From f4ffef258e7cab96247013f40eff09c3e5f2afea Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Fri, 14 Dec 2007 17:47:26 +0000 Subject: [PATCH] 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 --- API.txt | 29 +++++++++++++++++++++++------ examples/index.html | 1 + examples/interacting.html | 38 ++++++++++++++++++++++++++++++++++++++ jquery.flot.js | 26 ++++++++++++++++++++++++-- 4 files changed, 86 insertions(+), 8 deletions(-) create mode 100644 examples/interacting.html diff --git a/API.txt b/API.txt index 8919cab..db00766 100644 --- a/API.txt +++ b/API.txt @@ -8,16 +8,16 @@ Consider a call to the plot function: 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 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. The format of the data is documented below, as is the available options. The "plot" object returned has some members you can call. These are documented separately below. -Note that in general there are no guarantees if you change any of the -objects you pass in to the plot function or get out of it as the -objects may not be deep-copied. +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. The objects +may not be deep-copied. Data Format @@ -262,7 +262,8 @@ Customizing the grid color: color, backgroundColor: color or null, tickColor: color, - labelMargin: number + labelMargin: number, + clickable: boolean } 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 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. +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 ========================= diff --git a/examples/index.html b/examples/index.html index d35b956..5348f96 100644 --- a/examples/index.html +++ b/examples/index.html @@ -20,6 +20,7 @@
  • Real data with a bit of interactivity
  • Selection support and zooming
  • Zooming with overview
    • +
  • Interacting with the data
    • diff --git a/examples/interacting.html b/examples/interacting.html new file mode 100644 index 0000000..71acd66 --- /dev/null +++ b/examples/interacting.html @@ -0,0 +1,38 @@ + + + + + Flot Examples + + + + + + +

    Flot Examples

    + +
    + +

    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.

    + +

    Try clicking on the plot above.

    + + + + + diff --git a/jquery.flot.js b/jquery.flot.js index 6cd41db..fb4ac30 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -67,7 +67,8 @@ color: "#545454", // primary color used for outline and labels backgroundColor: null, // null for transparent, else color tickColor: "#dddddd", // color used for the ticks - labelMargin: 3 // in pixels + labelMargin: 3, // in pixels + clickable: null }, selection: { mode: null, // one of null, "x", "y" or "xy" @@ -164,8 +165,11 @@ // FIXME: temp. work-around until jQuery bug 1871 is fixed target.get(0).onmousemove = onMouseMove; } + + if (options.grid.clickable) + $(overlay).click(onClick); } - + function findDataRanges() { yaxis.datamin = xaxis.datamin = 0; xaxis.datamax = yaxis.datamax = 1; @@ -1005,6 +1009,7 @@ var selection = { first: { x: -1, y: -1}, second: { x: -1, y: -1} }; var prevSelection = null; var selectionInterval = null; + var ignoreClick = false; function onMouseMove(ev) { // FIXME: temp. work-around until jQuery bug 1871 is fixed @@ -1033,6 +1038,22 @@ $(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() { var x1, x2, y1, y2; if (selection.first.x <= selection.second.x) { @@ -1075,6 +1096,7 @@ drawSelection(); triggerSelectedEvent(); + ignoreClick = true; return false; }