PDA

View Full Version : How to highlight X-axes label when mouseover the data in line chart



mrprabu
2 Mar 2014, 8:28 PM
Hi,

How to highlight X-axes label when mouseover the data in line chart. Kindly refer below image

48120

a.premkumar
3 Mar 2014, 3:21 AM
Hi Prabu,


We don't have a direct way to do this. So we have to do a work around. I have achieved similar thing for my bar and line chart. What I have managed to do is to handle the 'itemmouseover' event of chart series.




itemmouseover : function(item){
//legend = '<your value for reference here>';
var legend = item.storeItem.data.name;
var texts = Ext.select('text'); // This gets all the text tags from the page
texts = texts.elements;
for(i in texts){ // Iterating through the text elements
if(texts[i].textContent == legend){ // Here I am applying the constrain to filter the required text element
var element = texts[i];
Ext.get(element.id).set({
fill : 'green'
});
}
}
}


What I have done is, I am getting the value of the mark in the legend variable. Then I compare it with the text elements. When it finds a match, I apply the new color for the text element.

But still you have to handle the 'itemmouseout' event also if you have to make the color normal after the mouse pointer is moved out of the item. And another important thing is, IT DOES NOT WORK IN IE8.

Regards,
Premkumar. A

mrprabu
3 Mar 2014, 3:48 AM
Hi Prem,

it works. Thanks a lot.

Regards,
Prabu

mrprabu
8 Apr 2014, 1:45 AM
Hi prem,

when we use Ext.select('text') it will search entire DOM. and changes applying in the places where ever the same text using.

suppose same page if we use 2 places same chart it will apply both places. how to get particular component text instead of entire dom.

any idea pls share