1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    2
    Vote Rating
    0
    deathzbr is on a distinguished road

      0  

    Default Unanswered: Highlighting Bars in a chart when clicking on the related data in a grid with ExtJS 4

    Unanswered: Highlighting Bars in a chart when clicking on the related data in a grid with ExtJS 4


    I have two objects on my screen, a grid and a chart being populated by the same store. What I need to do is highlight the Column on the chart related to the item I clicked in the grid.
    In the function I've figured half way to do it using Ext.getCmp('chart').series.get(0). But don't know what to do to get to each item of the series and highlight it, as the getItemForPoint(x,y) keeps returning null values...
    Thanks a lot, code below:

    Code:
    // Code for my grid
    {
    columnWidth: .25
    ,xtype: 'grid'
    ,hideHeaders: true
    ,border: true
    ,styke: 'padding-top: 60px;'
    ,height: 360
    ,store: participation
    ,columns: [{
          dataIndex: 'ID'
          ,width: 24
    },{
          dataIndex: 'Supplier'
          ,width: 204
    }]
    ,listeners: {
          select: function() {
               // function to highlight the column on my chart
          }
    }
    }
    
    // Code for my chart
    {
    border: false
    ,layout: 'column'
    ,items: [{
        columnWidth: .75
        ,xtype: 'chart'
        ,animate: true
        ,height: 432
        ,shadow: false
        ,id: 'chart'
        ,store: participation
        ,axes: [{
            type: 'Numeric'
            ,position: 'left'
            ,grid: true
            ,fields: 'Participation'
            ,title: 'Share'
            ,label: {
                renderer: Ext.util.Format.numberRenderer('0.00'+"%")
            }
        },{
            type: 'Category'
            ,position: 'bottom'
            ,fields: 'ID'
        }]
        ,series: [{
            type: 'column'
            ,axis: 'left'
            ,highlight: 'true'
            ,xField: 'ID'
            ,yField: 'Participation'
            ,tips: {
                trackMouse: true
                ,width: 312
                ,maxWidth: 360
                ,height: 36
                ,constrainPosition: true
                ,renderer: function(storeItem, item) {
                    this.setTitle('Supplier: ' + storeItem.get('Supplier')+'<br/>'+'Share: ' + Ext.util.Format.number(storeItem.get('Share'),"0.00")+'%');
                }
            }
            ,style: {
                lineWidth: 1
                ,stroke: '#666'
            }
        }]
      }
    }

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,637
    Answers
    613
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please have a look at the following example:
    http://dev.sencha.com/deploy/ext-4.1...Dashboard.html

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Aug 2013
    Posts
    6
    Vote Rating
    2
    nblum is on a distinguished road

      1  

    Default example

    example


    the question ist still unanswered, i found the following solution in the example:

    Code:
            listeners: {
                itemmousedown: function(el) {
                    var series = this.chart.series.get(0);
                    series.highlight = true;
                    series.unHighlightItem();
                    series.cleanHighlights();
                    series.highlightItem(el);
                    series.highlight = false;
                }
            }
    it works for me i hope its the correct way

  4. #4
    Ext JS Premium Member saJoshua's Avatar
    Join Date
    Nov 2007
    Location
    South Africa
    Posts
    521
    Answers
    2
    Vote Rating
    5
    saJoshua is on a distinguished road

      0  

    Default


    Thanks for sharing your solution.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar