Results 1 to 7 of 7

Thread: ToolTip on Chart Legend

  1. #1
    Sencha User vick_44's Avatar
    Join Date
    Jul 2016
    Posts
    64
    Answers
    6

    Default Answered: ToolTip on Chart Legend

    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.

    Code:
    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
            }
        }]
    });

  2. 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:

    Code:
        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();
        },

  3. #2
    Sencha User
    Join Date
    Jun 2017
    Posts
    6
    Answers
    1

    Default

    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:

    Code:
    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
                    }
                }]
            });
        }
    });

  4. #3
    Sencha User vick_44's Avatar
    Join Date
    Jul 2016
    Posts
    64
    Answers
    6

    Default

    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 .

  5. #4
    Sencha User
    Join Date
    Jun 2017
    Posts
    6
    Answers
    1

    Default

    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:

    Code:
        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();
        },

  6. #5
    Sencha User vick_44's Avatar
    Join Date
    Jul 2016
    Posts
    64
    Answers
    6

    Default

    This sounds like a nice idea: ) . Let me try this and I will update you on this thread about my proceedings..

  7. #6
    Sencha User vick_44's Avatar
    Join Date
    Jul 2016
    Posts
    64
    Answers
    6

    Default

    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.

    Code:
    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:

    Code:
    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
            }
        }]
    });

  8. #7
    Sencha User
    Join Date
    Jun 2017
    Posts
    6
    Answers
    1

    Default

    vick_44,

    You're welcome .

    Best wishes,
    Peter

Similar Threads

  1. Replies: 4
    Last Post: 4 Mar 2014, 7:09 AM
  2. [OPEN] Chart Legend ToolTips not hiding
    By tmancini in forum Sencha GXT Bugs
    Replies: 2
    Last Post: 26 Sep 2012, 2:11 PM
  3. Replies: 2
    Last Post: 15 Mar 2012, 9:39 PM
  4. Replies: 1
    Last Post: 11 Jan 2012, 2:04 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •