PDA

View Full Version : tool tip for chart bottom lables



alindtiwari
3 Sep 2013, 6:51 AM
Hi Team,

I am posting again as none of the posted queries are answered

i am able to call on mouse over function, but how to display the original labels before trimming over the currently displayed labels

I have an chart where the values in X-AXIS are very lengthy so I have used ExtJS mettod Ext.String.ellipsis() to trim the label upto 20 characters long. This is trimming the each label in x-axis properly.

But to see the full value, on mouse over of the label it should show the full label(like series tooltip).



{
type: 'Category',
position: 'bottom',
fields: ['NAME'],
label:
{
renderer: function (v)
{
var paramsList = v;
var trimmedString = "<span title='alind'>"+Ext.String.ellipsis(v, 20, false)+"</span>";
return Ext.util.Format.htmlDecode('<span title=alind>'+Ext.String.ellipsis(v, 20, false)+'</span>');
},
rotate:
{
degrees: 325
},
listeners:
{
mouseover : function(obj)
{
//alert('mouse upped!');
console.log(obj);
}
}
},

few of our developers already posted the queries to sencha forums,


their queries are still unanswered. as stated below.

so kindly suggest how to proceed for this defect.


Renga
http://www.sencha.com/forum/showthread.php?254724 - posted on 24 jan 2013


Ajeet :
http://www.sencha.com/forum/showthread.php?261893-X-AXIS-truncated - posted on 24 jan 2013

koushik

http://www.sencha.com/forum/showthread.php?254714 posted on 23 Jan 2013

Gary Schlosberg
5 Sep 2013, 8:53 AM
I don't believe axes have any listeners out of the box, so your listener config probably won't work. I believe that you would need to create an override as described here:
http://www.sencha.com/forum/showthread.php?250346

alindtiwari
5 Sep 2013, 10:22 PM
I don't believe axes have any listeners out of the box, so your listener config probably won't work. I believe that you would need to create an override as described here:
http://www.sencha.com/forum/showthread.php?250346

Hi Gary,
Thanks for the reply

listener is working absolutely fine, just i need to find out a way to show tool tip over those labels and i also i need to find out a way to get actual value of labels, currently i am getting only trimmed values.

Any suggestions or code?

pshetshet
13 Jun 2015, 12:25 AM
Following code worked for me for adding tool tip to chart labels; thought might help :)



{
type: 'Category',
position: 'left',
fields: ['Name'],
title: true,
label: {
renderer: function(name, label, storeItem) {
trimmedName = Ext.String.ellipsis(name, 20, false);
this.name = name;
//this.title=name;
return trimmedName;


},
listeners: {
mouseover: function(obj) {
toolTip = Ext.create('Ext.tip.ToolTip', {
target: obj.id,
trackMouse: true,
html: obj.name,
});


toolTip.on('show', function() {
Ext.get(obj.id).on('mouseout', function() {
toolTip.hide();
});
});


toolTip.show();
},




}
},
title: false
}

Gary Schlosberg
15 Jun 2015, 1:30 PM
Thanks for sharing this solution with the community!