PDA

View Full Version : ToolTip on Chart Legend



vick_44
21 Sep 2017, 6:57 AM
I wish to display a tooltip on the chart legend but no matter what I try it doesnt seem to work for me.

Here below is a code snippet picked up from sencha docs, pasting these in a fiddle would compile and run but without a tooltip on the legend.

I tried the code highlighted below,

I would much appreciate it if anyone can point me in the right direction.



var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
]
});


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: store,
legend: {
position: 'right',
listeners:{
itemmouseenter:function( oElem, record, item, index, e, eOpts ){
Ext.create("Ext.tip.ToolTip",{
target:item,
autoShow:true,
trackMouse:true,
html: 'Hello',
hideDelay:0,
showDelay:0
});
}
}
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
title: 'Sample Values',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
style: {
opacity: 0.93
}
}]
});

petrocomp
1 Oct 2017, 10:41 PM
Hi vick_44,

I'm not sure if you can do it your way. I checked the spec and a legend object doesn't have listeners. I was able to add this tooltip in a different place. Please refer to the code below:



Ext.application({
name: 'Fiddle',


launch: function () {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [{
'name': 'metric one',
'data1': 10,
'data2': 12,
'data3': 14,
'data4': 8,
'data5': 13
}, {
'name': 'metric two',
'data1': 7,
'data2': 8,
'data3': 16,
'data4': 10,
'data5': 3
}, {
'name': 'metric three',
'data1': 5,
'data2': 2,
'data3': 14,
'data4': 12,
'data5': 7
}, {
'name': 'metric four',
'data1': 2,
'data2': 14,
'data3': 6,
'data4': 1,
'data5': 23
}, {
'name': 'metric five',
'data1': 27,
'data2': 38,
'data3': 36,
'data4': 13,
'data5': 33
}]
});


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: store,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
title: 'Sample Values',

grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
listeners:{
itemmouseover: function(item){
Ext.create("Ext.tip.ToolTip",{
target:item,
autoShow:true,
trackMouse:true,
html: 'Hello',
hideDelay:0,
showDelay:0
});
console.log(item);
},
scope: this
},
yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
style: {
opacity: 0.93
}
}]
});
}
});

vick_44
2 Oct 2017, 12:21 AM
Hi petrocomp, thanks for the reply. With your code the tooltip gets activated with mouse over on graph region but I wish to have a tooltip with mouse over on graph legend region, the right most part of the graph. Is there anyway to add tooltip to a certain region in chart panel if we know the dimensions and co ordinates of the legend box may be in a controller?

So far I have accomplished below hack, but it is not what I ultimately want as some of the features of legend will be lost.
> I created a display field with same dimension as the legend box on the chart.
> I gave the "value" attribute of display field as   a long string comprising array of nbsp's.
> I added a tooltip to this display field on mouse over.
> I made border false and background colour as transparent.
> Lastly I moved this display field right over my legend area in chart.
> Now when I move the mouse over legend area I do get tooltip.
HOWEVER, since this display field overlaps the surface of legend region I lose the functionality of legend which are graph toggle and graph line highlight on selecting an item on legend.

I know the above hack is quite cunning but this is the best I could come up with my limited knowledge. I just need to figure out a way to retain the functionality of legend yet show a tooltip, so the above method is not the right way to go about it, atleast for my requirement .

petrocomp
2 Oct 2017, 2:03 AM
Maybe you should try to extend or override onMouseOver function from Ext.chart.LegendItem. This function is executed when you move your mouse over a legend item.
What do you think?

Something like this:



onMouseOver: function() {
var me = this;

Ext.create("Ext.tip.ToolTip", {
target: me,
autoShow: true,
trackMouse: true,
html: 'Hello',
hideDelay: 0,
showDelay: 0
});


me.label.setStyle({
'font-weight': 'bold'
});
me.series._index = me.yFieldIndex;
me.series.highlightItem();
},

vick_44
2 Oct 2017, 2:09 AM
This sounds like a nice idea: ) . Let me try this and I will update you on this thread about my proceedings..

vick_44
3 Oct 2017, 2:54 AM
Thanks a ton petrocomp, your idea worked!!!!!!

Below is the change that I did.

Highlighted in bold are tooltip postion with respect to legend area and also onMouseOut override to hide the tooltip since it wasnt going off by itself. Created a variable called legendToolTip in legendItem object to use on moustOut event.



Ext.define('overrides.LegendItem', {
override: 'Ext.chart.LegendItem',


// Override for legend tooltip
onMouseOver: function() {
var me = this;




me.legendToolTip= Ext.create("Ext.tip.ToolTip", {
width: 138,
target: me,
autoShow: true,
autoHide: true,
trackMouse: true,
html: "<span style='color:red;'>Tip: </span>- Click to turn on/off the Graph line.",
hideDelay: 0,
showDelay: 0,
mouseOffset : [me.legend.x+me.x, me.legend.y+me.y]
});
me.legendToolTip.show();
me.callParent(arguments);
},


onMouseOut : function (){
var me = this;
me.legendToolTip.hide();
me.callParent(arguments);
}
});




plug and play code snippet for fiddle:



Ext.define('overrides.LegendItem', {
override: 'Ext.chart.LegendItem',


// Override for legend tooltip
onMouseOver: function() {
var me = this;


me.legendToolTip= Ext.create("Ext.tip.ToolTip", {
width: 138,
target: me,
autoShow: true,
autoHide: true,
trackMouse: true,
html: "<span style='color:red;'>Tip: </span>- Click to turn on/off the Graph line.",
hideDelay: 0,
showDelay: 0,
mouseOffset : [me.legend.x+me.x, me.legend.y+me.y]
});
me.legendToolTip.show();
me.callParent(arguments);
},


onMouseOut : function (){
var me = this;
me.legendToolTip.hide();
me.callParent(arguments);
}
});


var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
]
});




Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 600,
height: 300,
store: store,
legend: {
position: 'right',
listeners:{
itemmouseenter:function( oElem, record, item, index, e, eOpts ){
Ext.create("Ext.tip.ToolTip",{
target:item,
autoShow:true,
trackMouse:true,
html: 'Hello',
hideDelay:0,
showDelay:0
});
}
}
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
title: 'Sample Values',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
style: {
opacity: 0.93
}
}]
});

petrocomp
4 Oct 2017, 3:18 AM
vick_44,

You're welcome :).

Best wishes,
Peter