Results 1 to 5 of 5

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

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default 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,389
    Answers
    716
    Vote Rating
    498
      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
      1  

    Default 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
    Sydney
    Posts
    521
    Answers
    2
    Vote Rating
    5
      0  

    Default

    Thanks for sharing your solution.

  5. #5
    Sencha User
    Join Date
    Jan 2010
    Posts
    58
    Answers
    5
    Vote Rating
    4
      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.
    doesnt 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...

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
  •