jQuery UI Widgets Forums Gauges and Maps TreeMap Display on hover

This topic contains 2 replies, has 2 voices, and was last updated by  aaeda 5 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Display on hover #54603

    aaeda
    Participant

    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’
    });
    }
    }
    }
    });

    Display on hover #54618

    Dimitar
    Participant

    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/

    Display on hover #54631

    aaeda
    Participant

    Thanks a lot Dimitar. It works perfectly.

    Rgds
    Aaeda

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.