Display on hover

[aaedaParticipant]

Hi

I would like to display 3 lines of information when hovering over the boxes of the treemap. I have tried using the code below, but I am having ‘undefined’ message displayed. Can you please help? Thanks

{label: ‘Banks & Insurance’,value: 50953.93,data:{title: ‘3.0374 %’},color: “#a0cc3b”},{label: ‘Commerce’,value: 21321.91,data:{title: ‘-0.0195 %’},color: “#f27267”},{label: ‘Industry’,value: 10740.36,data:{title: ‘0.2154 %’},color: “#bad97c”},{label: ‘ICT’,value: 753.39,data:{title: ‘0 %’},color: “#6ec0fa”},{label: ‘Investments’,value: 57090.43,data:{title: ‘1.098 %’},color: “#a0cc3b”},{label: ‘Leisure & Hotels’,value: 28788.79,data:{title: ‘0.6303 %’},color: “#bad97c”},{label: ‘Others’,value: 6431.65,data:{title: ‘0 %’},color: “#6ec0fa”},{label: ‘Property’,value: 3848.83,data:{title: ‘0 %’},color: “#6ec0fa”},{label: ‘Sugar’,value: 25542.41,data:{title: ‘-2.7874 %’},color: “#e25440”},{label: ‘Transport’,value: 1709.26,data:{title: ‘0.9103 %’},color: “#bad97c”}

And to display, I am using the following:

$(‘#treemap’).jqxTreeMap({
width: 400,
height: 410,
source: data,
showLegend: false,
renderCallbacks: {
‘*’: function (element, data) {
if (data.value) {
element.jqxTooltip({
content: ‘<div><div style=”font-weight: bold; max-width: 200px; font-family: verdana; font-size: 13px;”>’ + data.label + ‘</div><div style=”width: 200px; font-family: verdana; font-size: 12px;”>’ + data.title + ‘Rs ‘ + (data.value).toFixed(2) + ‘</div></div>’,
position: ‘mouse’,
autoHideDelay: 6000,
theme: theme
});
} else if (data.value === undefined) {
element.css({
color: ‘#fff’,
border: ‘1px solid #fff’
});
}
}
}
});

[DimitarParticipant]

Hello aaeda,

In the tooltip content you would have to change data.title to data.data.title (in accordance with your data source):

content: '<div><div style="font-weight: bold; max-width: 200px; font-family: verdana; font-size: 13px;">' + data.label + '</div><div style="width: 200px; font-family: verdana; font-size: 12px;">' + data.data.title + 'Rs ' + (data.value).toFixed(2) + '</div></div>',

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[aaedaParticipant]

Thanks a lot Dimitar. It works perfectly.

Rgds
Aaeda

[Author]

Posts