It is currently Sat Oct 25, 2014 3:26 am Advanced search

hover over legend to highlight points

Technical support, bug reports and more.

hover over legend to highlight points

Postby nljuba » Thu Feb 23, 2012 9:35 pm

Ok, I have had a specific need to highlight a serie on hover over that serie name in the chart legend, so I did it like this:

Code: Select all
chart = new Highcharts.Chart(options,function(chart){
   $(chart.series).each(function(i, serie){
      $(serie.legendItem.element).hover(function(){
         highlight(chart.series, serie.index, true);
      }, function(){
         highlight(chart.series, serie.index, false);
      })
   });
});

/**   Bolje oznacava grupe na grafiku */
function highlight(series, index, hide) {
   $(series).each(function (i, serie) {
      if(i != index) {
         $.each(serie.data, function (k, data) {
            if (data.graphic) {
               data.graphic.attr("fill", (hide ? '#D4D4D4' : (data.selected ? "white" : serie.color)));
               data.graphic.attr("stroke", (hide ? "#D4D4D4": (data.selected ? "black" : serie.color)));
            }
         });
      } else {
         
         serie.group.toFront();
         $.each(serie.data, function (k, data) {
            if (data.graphic) {
               data.graphic.attr("stroke", (hide ? "black": (data.selected ? "black" : serie.color)));
               data.graphic.attr("stroke-width", (hide ? (data.selected ? "2px" : "1px") : (data.selected ? "2px" : "0")));
            }
         });
      }
   });
}


The idea is to dimm out other points and leave the hovered over serie in regular color with a 1px black border (and also preserve selected points view), and it works fine, but the problem are the labels, so my question is: How can I dynamically change the display of a point label (turn them off completely or dim them like the points), from the series that are not "hovered over".

I have tried messing around with dataLabels-> formatter: function() but it looks like it fires only on redraw.

This chart is a scatter chart.
nljuba
 
Posts: 9
Joined: Sun Aug 14, 2011 12:23 pm

Re: hover over legend to highlight points

Postby Fusher » Fri Feb 24, 2012 4:59 pm

You can simply hide/show using jQuery : $($("#container .highcharts-data-labels")[index]).hide(); and $($("#container .highcharts-data-labels")[index]).show();
Last edited by Fusher on Fri Feb 24, 2012 8:31 pm, edited 1 time in total.
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7388
Joined: Mon Jan 30, 2012 12:16 pm

Re: hover over legend to highlight points

Postby nljuba » Fri Feb 24, 2012 6:54 pm

oh yes, thank you - works like a charm!

Here is the code if someone runs into the similar problem:
Code: Select all
chart = new Highcharts.Chart(options,function(chart){
               $(chart.series).each(function(i, serie){
                  $(serie.legendItem.element).hover(function(){
                     highlight(chart.series, serie.index, true);
                  }, function(){
                     highlight(chart.series, serie.index, false);
                  })
               });
            });
            
            /**   Bolje oznacava grupe na grafiku */
            function highlight(series, index, hide) {
               $(series).each(function (i, serie) {
                  if(i != index) { //ova serija nije u pitanju!
                     $.each(serie.data, function (k, data) {
                        if (data.graphic) {
                           data.graphic.attr("fill", (hide ? '#D4D4D4' : (data.selected ? "white" : serie.color)));
                           data.graphic.attr("stroke", (hide ? "#D4D4D4": (data.selected ? "black" : serie.color)));
                        }
                     });
                     
                     if(hide){
                        $($('#container .highcharts-data-labels')[i]).hide();
                     }else{
                        $($('#container .highcharts-data-labels')[i]).show();
                     }
                     
                  } else { //ova serija je u pitanju
                     if(hide){
                        $($('#container .highcharts-data-labels')[i]).show();
                     }else{
                        $($('#container .highcharts-data-labels')[i]).hide();
                     }
                     
                     serie.group.toFront();
                     $.each(serie.data, function (k, data) {
                        if (data.graphic) {
                           data.graphic.attr("stroke", (hide ? "black": (data.selected ? "black" : serie.color)));//(hide ? '#D4D4D4' : serie.color));
                           data.graphic.attr("stroke-width", (hide ? (data.selected ? "2px" : "1px") : (data.selected ? "2px" : "0")));
                        }
                     });// selected
                  }
               });
            }
nljuba
 
Posts: 9
Joined: Sun Aug 14, 2011 12:23 pm


Return to Highcharts Usage

Who is online

Users browsing this forum: Exabot [Bot], Google [Bot] and 6 guests