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
    9,154
    Vote Rating
    475
    Answers
    686
    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
    Vote Rating
    5
    Answers
    2
    saJoshua is on a distinguished road

      0  

    Default


    Thanks for sharing your solution.

  5. #5
    Sencha User
    Join Date
    Jan 2010
    Posts
    57
    Vote Rating
    2
    Answers
    4
    thadude is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    Please have a look at the following example:
    http://dev.sencha.com/deploy/ext-4.1...Dashboard.html

    Regards,
    Scott.
    doesn´t use the same store, would like to see an example where the data from the grid store gets transformed/grouped to have the structure to use for the chart...