[jqplot-users] Highlighter with bar plots
1,407 views
Skip to first unread message
Joel
Apr 19, 2010, 4:41:25 PM4/19/10
to jqplot-users
Is it possible to change the setting to show the highlighter for the
whole bar and not just the tip of the bar?
Thanks,
Joel
--
You received this message because you are subscribed to the Google Groups "jqplot-users" group.
To post to this group, send email to jqplot...@googlegroups.com.
To unsubscribe from this group, send email to jqplot-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jqplot-users?hl=en.
whole bar and not just the tip of the bar?
Thanks,
Joel
--
You received this message because you are subscribed to the Google Groups "jqplot-users" group.
To post to this group, send email to jqplot...@googlegroups.com.
To unsubscribe from this group, send email to jqplot-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jqplot-users?hl=en.
Botah
Apr 23, 2010, 5:42:17 PM4/23/10
to jqplot-users
Bump...
Is there a solution for this? I am having a similar issue.
On Apr 19, 1:41 pm, Joel <thomas.jo...@gmail.com> wrote:
> Is it possible to change the setting to show thehighlighterfor the
Is there a solution for this? I am having a similar issue.
On Apr 19, 1:41 pm, Joel <thomas.jo...@gmail.com> wrote:
> Is it possible to change the setting to show thehighlighterfor the
trul...@googlemail.com
Apr 27, 2010, 10:59:29 AM4/27/10
to jqplot-users
Bump also,
I too would like this feature!
I too would like this feature!
Message has been deleted
Message has been deleted
Patrick Smith
May 7, 2010, 5:39:47 PM5/7/10
to jqplot-users
I think I have a working solution for this. Chris, hopefully you can
help out and consider adding this to future builds.
I am pretty sure the getNeighborPoint function in the jqplot core is
the crucial function that basically defines whether or not your mouse
is close enough to a "neighboring" data point to justify showing /
hiding the highlighter tooltip.
That function basically compares your cursors x and y positions to
every point's x and y positions and then if your cursor is within some
"threshold," the neighbor object is populated and returned from that
funciton. So, if you just modify how the comparison is done for bar
charts, the neighboring point can be returned when your cursor is
further down / over on the bar's body.
The original getNeighborPoint function is...
function getNeighborPoint(plot, x, y) {
var ret = null;
var s, i, d0, d, j, r, k;
var threshold, t;
for (var k=plot.seriesStack.length-1; k>-1; k--) {
i = plot.seriesStack[k];
s = plot.series[i];
r = s.renderer;
if (s.show) {
t = s.markerRenderer.size/2+s.neighborThreshold;
threshold = (t > 0) ? t : 0;
for (var j=0; j<s.gridData.length; j++) {
p = s.gridData[j];
// neighbor looks different to OHLC chart.
if (r.constructor == $.jqplot.OHLCRenderer) {
if (r.candleStick) {
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._bodyWidth/2 && x <=
p[0]+r._bodyWidth/2 && y >= yp(s.data[j][2]) && y <= yp(s.data[j][3]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
// if an open hi low close chart
else if (!r.hlc){
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._tickLength && x <=
p[0]+r._tickLength && y >= yp(s.data[j][2]) && y <= yp(s.data[j][3]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
// a hi low close chart
else {
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._tickLength && x <=
p[0]+r._tickLength && y >= yp(s.data[j][1]) && y <= yp(s.data[j][2]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
}
else {
d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
(y-
p[1]) );
if (d <= threshold && (d <= d0 || d0 == null)) {
d0 = d;
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
}
}
}
return ret;
}
I modified the function to first check that the series is actually
being rendered as a bar, then, if it is, depending on whether it is a
vertical bar or horizontal, I allow for the neighbor object to be
returned if the cursor is over the entire bar instead of just the
apex. Here is the function with my changes.
function getNeighborPoint(plot, x, y) {
var ret = null;
var s, i, d0, d, j, r, k;
var threshold, t;
for (var k=plot.seriesStack.length-1; k>-1; k--) {
i = plot.seriesStack[k];
s = plot.series[i];
r = s.renderer;
if (s.show) {
t = s.markerRenderer.size/2+s.neighborThreshold;
threshold = (t > 0) ? t : 0;
for (var j=0; j<s.gridData.length; j++) {
p = s.gridData[j];
// neighbor looks different to OHLC chart.
if (r.constructor == $.jqplot.OHLCRenderer) {
if (r.candleStick) {
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._bodyWidth/2 && x <=
p[0]+r._bodyWidth/2 && y >= yp(s.data[j][2]) && y <= yp(s.data[j][3]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
// if an open hi low close chart
else if (!r.hlc){
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._tickLength && x <=
p[0]+r._tickLength && y >= yp(s.data[j][2]) && y <= yp(s.data[j][3]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
// a hi low close chart
else {
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._tickLength && x <=
p[0]+r._tickLength && y >= yp(s.data[j][1]) && y <= yp(s.data[j][2]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
}
else {
d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
(y-
p[1]) );
// check if this is a bar chart and what kind
(i.e., vertical / horizontal)
// if a bar chart, redefine the distance variable
to such that mousing over the entire bar will return the neighbor
object
if (r.constructor == $.jqplot.BarRenderer) {
if (s.barDirection == 'vertical') {
if ((p[1]+threshold) <= y) {
d = Math.abs( x-p[0] );
}
} else {
if ((p[0]+threshold) <= x) {
d = Math.abs( y-p[1] );
}
}
}
if (d <= threshold && (d <= d0 || d0 == null)) {
d0 = d;
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
}
}
}
return ret;
}
On Apr 27, 7:59 am, "trull...@googlemail.com"
help out and consider adding this to future builds.
I am pretty sure the getNeighborPoint function in the jqplot core is
the crucial function that basically defines whether or not your mouse
is close enough to a "neighboring" data point to justify showing /
hiding the highlighter tooltip.
That function basically compares your cursors x and y positions to
every point's x and y positions and then if your cursor is within some
"threshold," the neighbor object is populated and returned from that
funciton. So, if you just modify how the comparison is done for bar
charts, the neighboring point can be returned when your cursor is
further down / over on the bar's body.
The original getNeighborPoint function is...
function getNeighborPoint(plot, x, y) {
var ret = null;
var s, i, d0, d, j, r, k;
var threshold, t;
for (var k=plot.seriesStack.length-1; k>-1; k--) {
i = plot.seriesStack[k];
s = plot.series[i];
r = s.renderer;
if (s.show) {
t = s.markerRenderer.size/2+s.neighborThreshold;
threshold = (t > 0) ? t : 0;
for (var j=0; j<s.gridData.length; j++) {
p = s.gridData[j];
// neighbor looks different to OHLC chart.
if (r.constructor == $.jqplot.OHLCRenderer) {
if (r.candleStick) {
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._bodyWidth/2 && x <=
p[0]+r._bodyWidth/2 && y >= yp(s.data[j][2]) && y <= yp(s.data[j][3]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
// if an open hi low close chart
else if (!r.hlc){
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._tickLength && x <=
p[0]+r._tickLength && y >= yp(s.data[j][2]) && y <= yp(s.data[j][3]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
// a hi low close chart
else {
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._tickLength && x <=
p[0]+r._tickLength && y >= yp(s.data[j][1]) && y <= yp(s.data[j][2]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
}
else {
d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
(y-
p[1]) );
if (d <= threshold && (d <= d0 || d0 == null)) {
d0 = d;
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
}
}
}
return ret;
}
I modified the function to first check that the series is actually
being rendered as a bar, then, if it is, depending on whether it is a
vertical bar or horizontal, I allow for the neighbor object to be
returned if the cursor is over the entire bar instead of just the
apex. Here is the function with my changes.
function getNeighborPoint(plot, x, y) {
var ret = null;
var s, i, d0, d, j, r, k;
var threshold, t;
for (var k=plot.seriesStack.length-1; k>-1; k--) {
i = plot.seriesStack[k];
s = plot.series[i];
r = s.renderer;
if (s.show) {
t = s.markerRenderer.size/2+s.neighborThreshold;
threshold = (t > 0) ? t : 0;
for (var j=0; j<s.gridData.length; j++) {
p = s.gridData[j];
// neighbor looks different to OHLC chart.
if (r.constructor == $.jqplot.OHLCRenderer) {
if (r.candleStick) {
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._bodyWidth/2 && x <=
p[0]+r._bodyWidth/2 && y >= yp(s.data[j][2]) && y <= yp(s.data[j][3]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
// if an open hi low close chart
else if (!r.hlc){
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._tickLength && x <=
p[0]+r._tickLength && y >= yp(s.data[j][2]) && y <= yp(s.data[j][3]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
// a hi low close chart
else {
var yp = s._yaxis.series_u2p;
if (x >= p[0]-r._tickLength && x <=
p[0]+r._tickLength && y >= yp(s.data[j][1]) && y <= yp(s.data[j][2]))
{
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
}
else {
d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
(y-
p[1]) );
// check if this is a bar chart and what kind
(i.e., vertical / horizontal)
// if a bar chart, redefine the distance variable
to such that mousing over the entire bar will return the neighbor
object
if (r.constructor == $.jqplot.BarRenderer) {
if (s.barDirection == 'vertical') {
if ((p[1]+threshold) <= y) {
d = Math.abs( x-p[0] );
}
} else {
if ((p[0]+threshold) <= x) {
d = Math.abs( y-p[1] );
}
}
}
if (d <= threshold && (d <= d0 || d0 == null)) {
d0 = d;
return {seriesIndex: i, pointIndex:j,
gridData:p, data:s.data[j]};
}
}
}
}
}
return ret;
}
On Apr 27, 7:59 am, "trull...@googlemail.com"
Patrick Smith
May 7, 2010, 6:35:41 PM5/7/10
to jqplot-users
Amendment to my previous post.
I wasn't catching when the cursor was exiting the plot. What I found
that seems to be a simple fix is (in the else)...
d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) * (y-p[1]) );
(plot.grid._height-threshold)) {
(plot.grid._width-threshold)) {
I wasn't catching when the cursor was exiting the plot. What I found
that seems to be a simple fix is (in the else)...
d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) * (y-p[1]) );
// check if this is a bar chart and what kind (i.e., vertical /
horizontal)
// if a bar chart, redefine the distance variable to such that mousing
over the entire bar will return the neighbor object
if (r.constructor == $.jqplot.BarRenderer) {
if (s.barDirection == 'vertical') {
if ((p[1]+threshold) <= y && y >= (0+threshold) && y <=
horizontal)
// if a bar chart, redefine the distance variable to such that mousing
over the entire bar will return the neighbor object
if (r.constructor == $.jqplot.BarRenderer) {
if (s.barDirection == 'vertical') {
(plot.grid._height-threshold)) {
d = Math.abs( x-p[0] );
}
} else {
if ((p[0]+threshold) <= x && x >= (0+threshold) && x <=
}
} else {
(plot.grid._width-threshold)) {
Chris Leonello
May 7, 2010, 8:28:15 PM5/7/10
to jqplot...@googlegroups.com
Hi Patrick,
Thanks for digging into this. You are right the getNeighborPoint function is the key. The good news is, I'm adding bar/pie slice click and mouse over functionality to jqPlot. It should be done in the next few weeks. The bad news is that I'm not using the getNeighborPoint function, so I don't know that I can use your mods :-( You probably have worked out some of the math and comparisons for me, which is good.
I'm adding this functionality directly into the bar and pie renderers. The reason for this is, as you've probably discovered hacking at the getNeighborPoint function, that every shape based plot (bar, pie, filled line, block plots, etc.) will require their own tests and functionality added to getNeighborPoint. This end up bloating that function, better to let the individual renderers handle it. It also makes more sense when you think about adding more future chart types like donut, bubble, or gauges.
This new direction is something that came up within the last week and I've been so busy lately I haven't been able to keep the list up to date on recent additions/changes. Sorry for that.
Chris Leonello
Patrick Smith
May 8, 2010, 8:54:38 AM5/8/10
to jqplot-users
Chris,
That sounds perfectly reasonable and glad to hear the functionality is
making it into the core regardless of whether you use my mods or not.
One question though about the future of the click functionality. I am
actually using bar chart clicks in my application and I added the
functionality using your 'jpplotclick' event binding. To add my
functionality, I used my modified neighbor object so that the full
length of the bar could be clicked. So, I was wondering if your click
functionality would still pass along an existing neighbor object for
the click functionality when moused over the entire bar?
Glad to hear the pie charts are getting mouse over functionality as
well.
One other thing I have played with a bit is adding the functionality
such that the x-axis label will show up in the highlighter tooltip
instead of the x-axis index number. For example, on my x-axis, I am
using the category axis renderer and my x-axis values are things like
'PRs', 'FRs', 'IDRs', etc.. So, I would like my tooltip to say "PRs,
550" instead of "1, 550". I added a fix for this and have been
meaning to post it but haven't had time. I was just wondering, is
that functionality already coming up in a future build or should I go
ahead and add a thread.
Thanks,
Patrick
On May 7, 7:28 pm, Chris Leonello <chris.leone...@gmail.com> wrote:
> Hi Patrick,
>
> Thanks for digging into this. You are right the getNeighborPoint function
> is the key. The good news is, I'm adding bar/pie slice click and mouse over
> functionality to jqPlot. It should be done in the next few weeks. The bad
> news is that I'm not using the getNeighborPoint function, so I don't know
> that I can use your mods :-( You probably have worked out some of the math
> and comparisons for me, which is good.
>
> I'm adding this functionality directly into the bar and pie renderers. The
> reason for this is, as you've probably discovered hacking at the
> getNeighborPoint function, that every shape based plot (bar, pie, filled
> line, block plots, etc.) will require their own tests and functionality
> added to getNeighborPoint. This end up bloating that function, better to
> let the individual renderers handle it. It also makes more sense when you
> think about adding more future chart types like donut, bubble, or gauges.
>
> This new direction is something that came up within the last week and I've
> been so busy lately I haven't been able to keep the list up to date on
> recent additions/changes. Sorry for that.
>
> Chris Leonello
>
> ...
>
> read more »
That sounds perfectly reasonable and glad to hear the functionality is
making it into the core regardless of whether you use my mods or not.
One question though about the future of the click functionality. I am
actually using bar chart clicks in my application and I added the
functionality using your 'jpplotclick' event binding. To add my
functionality, I used my modified neighbor object so that the full
length of the bar could be clicked. So, I was wondering if your click
functionality would still pass along an existing neighbor object for
the click functionality when moused over the entire bar?
Glad to hear the pie charts are getting mouse over functionality as
well.
One other thing I have played with a bit is adding the functionality
such that the x-axis label will show up in the highlighter tooltip
instead of the x-axis index number. For example, on my x-axis, I am
using the category axis renderer and my x-axis values are things like
'PRs', 'FRs', 'IDRs', etc.. So, I would like my tooltip to say "PRs,
550" instead of "1, 550". I added a fix for this and have been
meaning to post it but haven't had time. I was just wondering, is
that functionality already coming up in a future build or should I go
ahead and add a thread.
Thanks,
Patrick
On May 7, 7:28 pm, Chris Leonello <chris.leone...@gmail.com> wrote:
> Hi Patrick,
>
> Thanks for digging into this. You are right the getNeighborPoint function
> is the key. The good news is, I'm adding bar/pie slice click and mouse over
> functionality to jqPlot. It should be done in the next few weeks. The bad
> news is that I'm not using the getNeighborPoint function, so I don't know
> that I can use your mods :-( You probably have worked out some of the math
> and comparisons for me, which is good.
>
> I'm adding this functionality directly into the bar and pie renderers. The
> reason for this is, as you've probably discovered hacking at the
> getNeighborPoint function, that every shape based plot (bar, pie, filled
> line, block plots, etc.) will require their own tests and functionality
> added to getNeighborPoint. This end up bloating that function, better to
> let the individual renderers handle it. It also makes more sense when you
> think about adding more future chart types like donut, bubble, or gauges.
>
> This new direction is something that came up within the last week and I've
> been so busy lately I haven't been able to keep the list up to date on
> recent additions/changes. Sorry for that.
>
> Chris Leonello
>
>
> read more »
Chris Leonello
May 8, 2010, 9:38:07 AM5/8/10
to jqplot...@googlegroups.com
... would still pass along an existing neighbor object for
the click functionality when moused over the entire bar?
Yes, the click will pass along the series index and point index and the data associated with the point. Like is done currently.
such that the x-axis label will show up in the highlighter tooltip
I don't have any plans to modify the tooltip right now, so you're probably safe there ;-)
Chris Leonello
Joel
Jun 8, 2010, 10:36:27 AM6/8/10
to jqplot-users
I asked this feature long back and am glad to see it coming in the
current release.
Here are some of my questions:
When I mouseover, it highlights the bar but I dont see the values of
the bar like it would do on a line plot. I have the highligter plugin
ON.
In a stacked bar plot, its not showing at all.
I dont know if this is a bug or its not working only for me. I would
like someone to confirm.
Thanks,
Joel
On May 8, 9:38 am, Chris Leonello <chris.leone...@gmail.com> wrote:
> > ... would still pass along an existing neighbor object for
>
> the click functionality when moused over the entire bar?
>
> Yes, the click will pass along the series index and point index and the data
> associated with the point. Like is done currently.
>
> such that the x-axis label will show up in the highlighter tooltip
>
> I don't have any plans to modify the tooltip right now, so you're probably
> safe there ;-)
>
> Chris Leonello
>
> ...
>
> read more »
current release.
Here are some of my questions:
When I mouseover, it highlights the bar but I dont see the values of
the bar like it would do on a line plot. I have the highligter plugin
ON.
In a stacked bar plot, its not showing at all.
I dont know if this is a bug or its not working only for me. I would
like someone to confirm.
Thanks,
Joel
On May 8, 9:38 am, Chris Leonello <chris.leone...@gmail.com> wrote:
> > ... would still pass along an existing neighbor object for
>
> the click functionality when moused over the entire bar?
>
> Yes, the click will pass along the series index and point index and the data
> associated with the point. Like is done currently.
>
> such that the x-axis label will show up in the highlighter tooltip
>
> I don't have any plans to modify the tooltip right now, so you're probably
> safe there ;-)
>
> Chris Leonello
>
>
> read more »
Chris Leonello
Jun 9, 2010, 8:46:44 AM6/9/10
to jqplot...@googlegroups.com
The latest sources have the bar highlighting (as well as highlighting
for stacked bar, pie slices and filled line/area plots) which doesn't
require the highlighter plugin. There is no tooltip functionality yet,
but events are fired on highlight/unhighlight and mouseover which you
could use to display the value. You can download a distribution built
off of the latest sources from the files section of the group here:
http://groups.google.com/group/jqplot-users/web/jquery.jqplot.0.9.7r544.zip
There are a lot of other fixes/enhancements in the new release like correct point label positioning on bar plots and new donut style plots.
http://groups.google.com/group/jqplot-users/web/jquery.jqplot.0.9.7r544.zip
There are a lot of other fixes/enhancements in the new release like correct point label positioning on bar plots and new donut style plots.
--
Chris Leonello
Chris Leonello
Joel
Jun 9, 2010, 11:40:05 AM6/9/10
to jqplot-users
Chris,
I have been using the latest version since monday :)
I think I am referring to more of tooltip that you were talking about.
Thanks for your great tool. Keep it coming.
Joel
On Jun 9, 8:46 am, Chris Leonello <chris.leone...@gmail.com> wrote:
> The latest sources have the bar highlighting (as well as highlighting
> for stacked bar, pie slices and filled line/area plots) which doesn't
> require the highlighter plugin. There is no tooltip functionality yet,
> but events are fired on highlight/unhighlight and mouseover which you
> could use to display the value. You can download a distribution built
> off of the latest sources from the files section of the group here:
>
> http://groups.google.com/group/jqplot-users/web/jquery.jqplot.0.9.7r5...
> >>>>> if ((p[1]+threshold)<= y&& y>= (0+threshold)&& y<=
> >>>>>> p[0]+r._bodyWidth/2&& y>= yp(s.data[j][2])&& y<=
>
> read more »
I have been using the latest version since monday :)
I think I am referring to more of tooltip that you were talking about.
Thanks for your great tool. Keep it coming.
Joel
On Jun 9, 8:46 am, Chris Leonello <chris.leone...@gmail.com> wrote:
> The latest sources have the bar highlighting (as well as highlighting
> for stacked bar, pie slices and filled line/area plots) which doesn't
> require the highlighter plugin. There is no tooltip functionality yet,
> but events are fired on highlight/unhighlight and mouseover which you
> could use to display the value. You can download a distribution built
> off of the latest sources from the files section of the group here:
>
> >>>>> (plot.grid._height-threshold)) {
> >>>>> d = Math.abs( x-p[0] );
> >>>>> }
> >>>>> } else {
> >>>>> if ((p[0]+threshold)<= x&& x>= (0+threshold)&& x<=
> >>>>> d = Math.abs( x-p[0] );
> >>>>> }
> >>>>> } else {
> >>>>> (plot.grid._width-threshold)) {
> >>>>> d = Math.abs( y-p[1] );
> >>>>> }
> >>>>> }
> >>>>> }
> >>>>> if (d<= threshold&& (d<= d0 || d0 == null)) {
> >>>>> d = Math.abs( y-p[1] );
> >>>>> }
> >>>>> }
> >>>>> }
>
> >>> yp(s.data[j][3]))
>
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // if an open hi low close chart
> >>>>>> else if (!r.hlc){
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> if (x>= p[0]-r._tickLength&& x<=
> >>>>>> p[0]+r._tickLength&& y>= yp(s.data[j][2])&& y<= yp(s.data[j][3]))
> >>> yp(s.data[j][3]))
>
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // if an open hi low close chart
> >>>>>> else if (!r.hlc){
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> if (x>= p[0]-r._tickLength&& x<=
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // a hi low close chart
> >>>>>> else {
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> if (x>= p[0]-r._tickLength&& x<=
> >>>>>> p[0]+r._tickLength&& y>= yp(s.data[j][1])&& y<= yp(s.data[j][2]))
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // a hi low close chart
> >>>>>> else {
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> if (x>= p[0]-r._tickLength&& x<=
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
>
> >>>>>> }
> >>>>>> else {
> >>>>>> d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
> >>>>>> (y-
> >>>>>> p[1]) );
> >>>>>> if (d<= threshold&& (d<= d0 || d0 == null)) {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
>
> >>>>>> }
> >>>>>> else {
> >>>>>> d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
> >>>>>> (y-
> >>>>>> p[1]) );
> >>>>>> d0 = d;
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> return ret;
>
> >>>>>> }
>
> >>>>>> I modified the function to first check that the series is actually
> >>>>>> being rendered as a bar, then, if it is,
>
> ...
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> return ret;
>
> >>>>>> }
>
> >>>>>> I modified the function to first check that the series is actually
> >>>>>> being rendered as a bar, then, if it is,
>
>
> read more »
Chris Leonello
Jun 9, 2010, 1:51:59 PM6/9/10
to jqplot...@googlegroups.com
> I think I am referring to more of tooltip that you were talking about.
Ohh, I see, I was referring to highlighting
the bars not really the tooltip. I haven't done work to make the
highlighter plugin more compatible with bar plots. In general, the
supplied highlighter plugin isn't written to handle area based charts
like pie, bar, donut, etc. (as you well know by now). I don't intend
to improve this, but to add that functionality into the individual
chart renderers.
As I mentioned about the highlight/unhighlight/mouseover events now in the bar chart renderer, it may be easier to manually attach div to those events and display your own tooltip. I think they supply everything you'll need. There is an example with a line plot using a custom tooltip attached to the jqplotMouseMove event. It is the "highlighter2.html" file in the examples folder.
--
Chris Leonello
As I mentioned about the highlight/unhighlight/mouseover events now in the bar chart renderer, it may be easier to manually attach div to those events and display your own tooltip. I think they supply everything you'll need. There is an example with a line plot using a custom tooltip attached to the jqplotMouseMove event. It is the "highlighter2.html" file in the examples folder.
--
Chris Leonello
Joel
Jun 9, 2010, 4:44:35 PM6/9/10
to jqplot-users
Thanks for your quick reply Chris.
I tried the same method mentioned in highlighter2.html example. But
eventListenerHooks is not working after first zoom in. Any suggestions
on how to overcome that would be helpful.
Joel
> ...
>
> read more »
I tried the same method mentioned in highlighter2.html example. But
eventListenerHooks is not working after first zoom in. Any suggestions
on how to overcome that would be helpful.
Joel
>
> read more »
Joel
Jun 9, 2010, 5:09:05 PM6/9/10
to jqplot-users
Well, a correction to my previous post!!!
Its not the eventListerHooks is not working. Its what you append to
the chart is not valid once you zoom (In this case, the div
myToolTip).
So to make it work, I append the div everytime its zoomed in or out.
And then it works.
Thanks,
Joel
> ...
>
> read more »
Its not the eventListerHooks is not working. Its what you append to
the chart is not valid once you zoom (In this case, the div
myToolTip).
So to make it work, I append the div everytime its zoomed in or out.
And then it works.
Thanks,
Joel
>
> read more »
Noura
Jun 23, 2010, 1:20:42 PM6/23/10
to jqplot-users
Hi Chris,
Thanks for this great tool!
I was trying to download jquery.jqplot.0.9.7r544.zip but it looks
like the link is broken.
I will really appreciate it if you can fix this one,
Thanks,
Noura
On Jun 9, 7:46 am, Chris Leonello <chris.leone...@gmail.com> wrote:
> The latest sources have the bar highlighting (as well as highlighting
> for stacked bar, pie slices and filled line/area plots) which doesn't
> require the highlighter plugin. There is no tooltip functionality yet,
> but events are fired on highlight/unhighlight and mouseover which you
> could use to display the value. You can download a distribution built
> off of the latest sources from the files section of the group here:
>
> http://groups.google.com/group/jqplot-users/web/jquery.jqplot.0.9.7r5...
> >>>>> if ((p[1]+threshold)<= y&& y>= (0+threshold)&& y<=
>
> read more »- Hide quoted text -
>
> - Show quoted text -
Thanks for this great tool!
I was trying to download jquery.jqplot.0.9.7r544.zip but it looks
like the link is broken.
I will really appreciate it if you can fix this one,
Thanks,
Noura
On Jun 9, 7:46 am, Chris Leonello <chris.leone...@gmail.com> wrote:
> The latest sources have the bar highlighting (as well as highlighting
> for stacked bar, pie slices and filled line/area plots) which doesn't
> require the highlighter plugin. There is no tooltip functionality yet,
> but events are fired on highlight/unhighlight and mouseover which you
> could use to display the value. You can download a distribution built
> off of the latest sources from the files section of the group here:
>
> >>>>> (plot.grid._height-threshold)) {
> >>>>> d = Math.abs( x-p[0] );
> >>>>> }
> >>>>> } else {
> >>>>> if ((p[0]+threshold)<= x&& x>= (0+threshold)&& x<=
> >>>>> d = Math.abs( x-p[0] );
> >>>>> }
> >>>>> } else {
> >>>>> (plot.grid._width-threshold)) {
> >>>>> d = Math.abs( y-p[1] );
> >>>>> }
> >>>>> }
> >>>>> }
> >>>>> if (d<= threshold&& (d<= d0 || d0 == null)) {
> >>>>> d = Math.abs( y-p[1] );
> >>>>> }
> >>>>> }
> >>>>> }
> >>>>>> if (x>= p[0]-r._bodyWidth/2&& x<=
> >>>>>> p[0]+r._bodyWidth/2&& y>= yp(s.data[j][2])&& y<=
>
> >>> yp(s.data[j][3]))
>
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // if an open hi low close chart
> >>>>>> else if (!r.hlc){
> >>>>>> var yp = s._yaxis.series_u2p;
> >>> yp(s.data[j][3]))
>
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // if an open hi low close chart
> >>>>>> else if (!r.hlc){
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> if (x>= p[0]-r._tickLength&& x<=
> >>>>>> p[0]+r._tickLength&& y>= yp(s.data[j][2])&& y<= yp(s.data[j][3]))
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // a hi low close chart
> >>>>>> else {
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // a hi low close chart
> >>>>>> else {
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> if (x>= p[0]-r._tickLength&& x<=
> >>>>>> p[0]+r._tickLength&& y>= yp(s.data[j][1])&& y<= yp(s.data[j][2]))
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
>
> >>>>>> }
> >>>>>> else {
> >>>>>> d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
> >>>>>> (y-
> >>>>>> p[1]) );
> >>>>>> if (d<= threshold&& (d<= d0 || d0 == null)) {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
>
> >>>>>> }
> >>>>>> else {
> >>>>>> d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
> >>>>>> (y-
> >>>>>> p[1]) );
> >>>>>> d0 = d;
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> return ret;
>
> >>>>>> }
>
> >>>>>> I modified the function to first check that the series is actually
> >>>>>> being rendered as a bar, then, if it is,
>
> ...
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> return ret;
>
> >>>>>> }
>
> >>>>>> I modified the function to first check that the series is actually
> >>>>>> being rendered as a bar, then, if it is,
>
>
> read more »- Hide quoted text -
>
> - Show quoted text -
Colm
Jul 2, 2010, 3:30:36 PM7/2/10
to jqplot-users
Answering my previous question, firebug is your friend.
In the example in highlighter2 I saw that the call to MyMove passed a
number of objects.
With Firebug you can see that the "neighbor" object is the one that
indicates which bar has been moused over and then you can do, for
example,
var myText = neighbor.data[1];
to populate what is displayed on mouseover.
Fantastic !
> ...
>
> read more »
In the example in highlighter2 I saw that the call to MyMove passed a
number of objects.
With Firebug you can see that the "neighbor" object is the one that
indicates which bar has been moused over and then you can do, for
example,
var myText = neighbor.data[1];
to populate what is displayed on mouseover.
Fantastic !
>
> read more »
Colm
Jul 2, 2010, 3:10:55 PM7/2/10
to jqplot-users
Hi Chris,
I've tried out the latest changes and , using the exmpales you give in
highlighter2.html I now have a barchart happily showing seconds when I
mouseover a bar. So far, so good.
I'm stumped when it comes to displaying the value of the bar instead
of the seconds. I don't see how to access the data-series data and how
I can differentiate between the different bars in the bar-chart.
Apologies if this has people slapping their foreheads / Colm
I've tried out the latest changes and , using the exmpales you give in
highlighter2.html I now have a barchart happily showing seconds when I
mouseover a bar. So far, so good.
I'm stumped when it comes to displaying the value of the bar instead
of the seconds. I don't see how to access the data-series data and how
I can differentiate between the different bars in the bar-chart.
Apologies if this has people slapping their foreheads / Colm
nickb
Jul 7, 2010, 4:18:26 PM7/7/10
to jqplot-users
@Colm - there are a number of arguments passed to the function
attached to the mouseover and click events.
For instance, binding to the mouseover event:
$('#myChart).bind( 'jqplotDataMouseOver',
function( ev, seriesIndex, pointIndex, data ) {
// do custom tooltip display stuff here
}
);
- The seriesIndex will give you the array index of the series
currently used in the hover event.
- The pointIndex will give you the index of the currently displayed
data point.
- The data array will give you the currently displayed data values.
Try playing around with those and you should be in good shape.
Cheers,
-nick
attached to the mouseover and click events.
For instance, binding to the mouseover event:
$('#myChart).bind( 'jqplotDataMouseOver',
function( ev, seriesIndex, pointIndex, data ) {
// do custom tooltip display stuff here
}
);
- The seriesIndex will give you the array index of the series
currently used in the hover event.
- The pointIndex will give you the index of the currently displayed
data point.
- The data array will give you the currently displayed data values.
Try playing around with those and you should be in good shape.
Cheers,
-nick
Tobias
Jul 15, 2010, 2:40:47 AM7/15/10
to jqplot-users
Hi Chris,
there are some complications - unfortunately :)
I modified one of the your official examples, with the plugins
highlighter, barRenderer and categoryAxisRenderer.
Only the barRenderer makes that I get an "neighbor.gridData is
undefined" on mouseOver.
Can you take a look at this?
Here is a example:
http://tujo.no/testcase/jqplot/dist/examples/highlighter3.html
PS:
If I include the highlighter on a pieRenderer, then theres maybe a
similar issue: An invalid or illegal string was specified" code: "12
http://tujo.no/testcase/jqplot/dist/examples/pieTest4.html
On Jun 9, 2:46 pm, Chris Leonello <chris.leone...@gmail.com> wrote:
> The latest sources have the bar highlighting (as well as highlighting
> for stacked bar, pie slices and filled line/area plots) which doesn't
> require the highlighter plugin. There is no tooltip functionality yet,
> but events are fired on highlight/unhighlight and mouseover which you
> could use to display the value. You can download a distribution built
> off of the latest sources from the files section of the group here:
>
> http://groups.google.com/group/jqplot-users/web/jquery.jqplot.0.9.7r5...
> >>>>> if ((p[1]+threshold)<= y&& y>= (0+threshold)&& y<=
>
> read more »
there are some complications - unfortunately :)
I modified one of the your official examples, with the plugins
highlighter, barRenderer and categoryAxisRenderer.
Only the barRenderer makes that I get an "neighbor.gridData is
undefined" on mouseOver.
Can you take a look at this?
Here is a example:
http://tujo.no/testcase/jqplot/dist/examples/highlighter3.html
PS:
If I include the highlighter on a pieRenderer, then theres maybe a
similar issue: An invalid or illegal string was specified" code: "12
http://tujo.no/testcase/jqplot/dist/examples/pieTest4.html
On Jun 9, 2:46 pm, Chris Leonello <chris.leone...@gmail.com> wrote:
> The latest sources have the bar highlighting (as well as highlighting
> for stacked bar, pie slices and filled line/area plots) which doesn't
> require the highlighter plugin. There is no tooltip functionality yet,
> but events are fired on highlight/unhighlight and mouseover which you
> could use to display the value. You can download a distribution built
> off of the latest sources from the files section of the group here:
>
> >>>>> (plot.grid._height-threshold)) {
> >>>>> d = Math.abs( x-p[0] );
> >>>>> }
> >>>>> } else {
> >>>>> if ((p[0]+threshold)<= x&& x>= (0+threshold)&& x<=
> >>>>> d = Math.abs( x-p[0] );
> >>>>> }
> >>>>> } else {
> >>>>> (plot.grid._width-threshold)) {
> >>>>> d = Math.abs( y-p[1] );
> >>>>> }
> >>>>> }
> >>>>> }
> >>>>> if (d<= threshold&& (d<= d0 || d0 == null)) {
> >>>>> d = Math.abs( y-p[1] );
> >>>>> }
> >>>>> }
> >>>>> }
> >>>>>> if (x>= p[0]-r._bodyWidth/2&& x<=
> >>>>>> p[0]+r._bodyWidth/2&& y>= yp(s.data[j][2])&& y<=
>
> >>> yp(s.data[j][3]))
>
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // if an open hi low close chart
> >>>>>> else if (!r.hlc){
> >>>>>> var yp = s._yaxis.series_u2p;
> >>> yp(s.data[j][3]))
>
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // if an open hi low close chart
> >>>>>> else if (!r.hlc){
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> if (x>= p[0]-r._tickLength&& x<=
> >>>>>> p[0]+r._tickLength&& y>= yp(s.data[j][2])&& y<= yp(s.data[j][3]))
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // a hi low close chart
> >>>>>> else {
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> // a hi low close chart
> >>>>>> else {
> >>>>>> var yp = s._yaxis.series_u2p;
> >>>>>> if (x>= p[0]-r._tickLength&& x<=
> >>>>>> p[0]+r._tickLength&& y>= yp(s.data[j][1])&& y<= yp(s.data[j][2]))
> >>>>>> {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
>
> >>>>>> }
> >>>>>> else {
> >>>>>> d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
> >>>>>> (y-
> >>>>>> p[1]) );
> >>>>>> if (d<= threshold&& (d<= d0 || d0 == null)) {
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
>
> >>>>>> }
> >>>>>> else {
> >>>>>> d = Math.sqrt( (x-p[0]) * (x-p[0]) + (y-p[1]) *
> >>>>>> (y-
> >>>>>> p[1]) );
> >>>>>> d0 = d;
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> return ret;
>
> >>>>>> }
>
> >>>>>> I modified the function to first check that the series is actually
> >>>>>> being rendered as a bar, then, if it is,
>
> ...
> >>>>>> return {seriesIndex: i, pointIndex:j,
> >>>>>> gridData:p, data:s.data[j]};
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> }
> >>>>>> return ret;
>
> >>>>>> }
>
> >>>>>> I modified the function to first check that the series is actually
> >>>>>> being rendered as a bar, then, if it is,
>
>
> read more »
alfatek
Mar 17, 2011, 12:48:36 PM3/17/11
to Colm, jqplot...@googlegroups.com
Hi,
Sorry for the old post digging :)
Sorry for the old post digging :)
Care to share your working example?
You can use jsbin.com or http://jsfiddle.net/ to share it.
thanks
Reply all
Reply to author
Forward
0 new messages