It is currently Tue Oct 21, 2014 6:45 pm Advanced search

Trigger Pie Chart Tooltips on Legend Item Hover

Technical support, bug reports and more.

Trigger Pie Chart Tooltips on Legend Item Hover

Postby peter petersen » Fri Jul 30, 2010 10:44 am

Is there a way to trigger the tooltips of a pie chart to be displayed when hovering the corresponding legend item?

Is there in general a way to manually trigger a tooltip to be shown? I only found the functions tooltip.hide() and tooltip.refresh() on the chart object. I'm missing something like tooltip.show(pointToShowTooltipFor);

Thanks for any advice.
peter petersen
 
Posts: 4
Joined: Fri Jul 30, 2010 10:38 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby not » Fri Jul 30, 2010 12:04 pm

Hi Peter,
you were close :) Try:
Code: Select all
chart.tooltip.refresh(chart.series[0].data[1]);
Maciej Piecha,
ex Highcharts Support Team
User avatar
not
 
Posts: 340
Joined: Mon Jun 07, 2010 4:01 pm

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby peter petersen » Fri Jul 30, 2010 12:59 pm

Thanks for the hint. Sounds good.

Now I am searching for an event fired by the legend items to hook in but it seems like there only is a legendItemClick event. Did I miss something?

I tried
Code: Select all
events: {
            click: function() { console.log("click"); },
            checkboxClick: function() { console.log("checkboxClick"); },
            hide: function() { console.log("hide"); },
            legendItemClick: function() { console.log("legendItemClick"); },
            mouseOver: function() { console.log("mouseOver"); },
            mouseOut: function() { console.log("mouseOut"); },
            show: function() { console.log("show"); }
          }

but none of the events fires on hovering a legend item.

If this is not possible with the highcharts API are there any valid selectors to relieably query the legend items and manually add listeners on mouseover/mouseout?

Thanks again
peter petersen
 
Posts: 4
Joined: Fri Jul 30, 2010 10:38 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby not » Fri Jul 30, 2010 2:48 pm

Ugh, it took me a while but I finally found it out :)

Code: Select all
$('#container .highcharts-legend text').hover(function() {
    console.log('Legend mouseOver');
});
Maciej Piecha,
ex Highcharts Support Team
User avatar
not
 
Posts: 340
Joined: Mon Jun 07, 2010 4:01 pm

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby peter petersen » Fri Jul 30, 2010 3:51 pm

Puh, I finally did it:

Code: Select all
$('.highcharts-legend text').each(function(index, element) {
    $(element).hover(function() {
        chart.tooltip.refresh(chart.series[0].data[index]);
    },function() {
        chart.tooltip.hide();
    })
});

--> http://jsfiddle.net/ArmRM/481/

Thanks for the help.
peter petersen
 
Posts: 4
Joined: Fri Jul 30, 2010 10:38 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby peter petersen » Fri Jul 30, 2010 4:21 pm

Btw: Isnt this a useful feature the highcharts library could support in future versions? It could also support an event for legendItemHover.
peter petersen
 
Posts: 4
Joined: Fri Jul 30, 2010 10:38 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby baydin » Tue Aug 31, 2010 12:04 pm

I could not figure out how to use this workaround.

Code: Select all
$('#container1.highcharts-legend text').hover(function() {
    chart_ul_gprs_ul.exportChart();
});


Should this code provide exporting when mouse on legend?
Burak Ayd─▒n,
Computer Engineering Student
baydin
 
Posts: 36
Joined: Tue Aug 03, 2010 9:24 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby torstein.honsi » Tue Aug 31, 2010 4:24 pm

Exporting when your users mouse over the legend - that's pretty aggressive don't you think? Anyway, the jQuery code won't work in IE as IE uses HTML/VML for text. I recommend using a button or a link for exporting, like in the examples in the reference.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9199
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby baydin » Wed Sep 01, 2010 7:20 am

I do not want to have export on hover, I just asked to understand the usage. What I want is a tooltip poping up showing the value when mouse on legend item like when mouse on a pie slice.
Burak Ayd─▒n,
Computer Engineering Student
baydin
 
Posts: 36
Joined: Tue Aug 03, 2010 9:24 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby torstein.honsi » Wed Sep 01, 2010 2:52 pm

It is demonstrated above: http://jsfiddle.net/ArmRM/481/
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9199
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby baydin » Wed Sep 01, 2010 3:53 pm

I checked it but in this example nothing happens when mouse is on the legend or should I change the function "refresh" there and use whatever I need?
Burak Ayd─▒n,
Computer Engineering Student
baydin
 
Posts: 36
Joined: Tue Aug 03, 2010 9:24 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby hfrntt » Wed Sep 01, 2010 4:17 pm

But in this example tooltip's poping up when mouse is over the legend, and it works :) Which browser are you using?
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby baydin » Thu Sep 02, 2010 7:41 am

I am using IE8, it worked on chrome and firefox but it did not work on IE8
Burak Ayd─▒n,
Computer Engineering Student
baydin
 
Posts: 36
Joined: Tue Aug 03, 2010 9:24 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby hfrntt » Thu Sep 02, 2010 11:10 am

baydin wrote:I am using IE8, it worked on chrome and firefox but it did not work on IE8

a few messages before:
admin wrote:Anyway, the jQuery code won't work in IE as IE uses HTML/VML for text.
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: Trigger Pie Chart Tooltips on Legend Item Hover

Postby baydin » Thu Sep 02, 2010 12:20 pm

I am new to all these stuff. I just write the javascript codes to draw charts with highcharts. So if jquery does not work on IE, is there a way to make it work in IE?Such as being able to write that code in javascript?
Burak Ayd─▒n,
Computer Engineering Student
baydin
 
Posts: 36
Joined: Tue Aug 03, 2010 9:24 am

Next

Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot] and 10 guests