Success! Looks like we've fixed this one. According to our records the fix was applied for a bug in our system in a recent build.
  1. #1
    Sencha User
    Join Date
    Feb 2008
    Location
    Poland
    Posts
    47
    Vote Rating
    1
    Antronak is an unknown quantity at this point

      0  

    Default [4.0.0] Charts - grouped column series tip

    [4.0.0] Charts - grouped column series tip


    Hi,

    There is no way to determine on which column tip is displayed.

    Code:
    series: [{
        type: 'column',
        axis: 'left',
        tips: {
            trackMouse: true,
            renderer: this.serieTipRenderer
        },    
        xField: 'id',
        yField: ['data1', 'data2', 'data3']                            
    }]
    
    serieTipRenderer: function(storeItem, item) {
        var data1 = storeItem.get('data1'),
           data2 = storeItem.get('data2'),
           data3 = storeItem.get('data3');
        switch(???) {
            case 0:
                this.setTitle(data1);
                break;
            case 1:
                this.setTitle(data2);
                break;
            case 2:
                this.setTitle(data3);
                break;
        }
    }

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Location
    France
    Posts
    37
    Vote Rating
    0
    ero is on a distinguished road

      0  

    Default


    Do you mean that you are unable to determine which yField you have moused over?

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Location
    Poland
    Posts
    47
    Vote Rating
    1
    Antronak is an unknown quantity at this point

      0  

    Default


    Each yField consist of 3 columns in my example. I mean that I'm unable to determine on which column tip is displayed. No column index is passed to tip renderer. I hope this will be fixed soon.

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Location
    France
    Posts
    37
    Vote Rating
    0
    ero is on a distinguished road

      0  

    Default


    I'm not sure if this is the same problem or not, but I had something that I think is similar. I have a chart that has mulitple values (yFields) in each stacked bar and I needed to be able to differentiate which one I had rolled over so that I could not only have the value, but also the label. The solution I found is as follows:

    1. I create an array of color values that I want for each yField that is then applied to a theme.
    2. Then create an array that has the yFields in the same order as the elements in the color array.
    3. In the tip renderer I search for item.attr.fill, find it's position in the array and then get the corresponding value from the yFields array.

    Looks like this:

    Code:
    var colorsArray = ['rgb(52,255,10)', 'rgb(212,255,81)' ,'rgb(255,251,61)'];
    
    var yFieldsArray = ['data1', 'data2', 'data3'];
    
    ,tips: {
        trackMouse: true
        ,renderer: function(storeItem, item) {
            //find the yField moused over
            for(i=0;i<=colorsArray.length;i++) {
                if( item.attr.fill == colorsArray[i] ) var theYField = yFieldArray[i];
            }                
            //set the tip
            this.setTitle( theYField + ' ' item.value[0] + ' ' +  item.value[1] );
        }
    }
    Basically mapping the yField that you want to the color that the mouse is over at the time.

    Not sure if that's what you're after.

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Location
    Poland
    Posts
    47
    Vote Rating
    1
    Antronak is an unknown quantity at this point

      0  

    Default


    Yes, the same problem. Thanks for workaround, but this is not a solution that satisfied me.
    I would like something like index of column, bar.

  6. #6
    Sencha User
    Join Date
    Feb 2008
    Location
    Poland
    Posts
    47
    Vote Rating
    1
    Antronak is an unknown quantity at this point

      0  

    Default


    Please, fix this issue in 4.0.2

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Location
    Missouri
    Posts
    10
    Vote Rating
    2
    Gibolt is on a distinguished road

      0  

    Default


    I had the same issue, and found that your solution was close to working. My modification was:

    Code:
     
         renderer      : function(storeItem, item) {
                    var colorsArray = ['#94ae0a ','#115fa6','#a61120'];
                    var yFieldArray = ['first','second','third'];
                    var fieldInst = 0;
                    for(i=0;i<=colorsArray.length;i++) {
                        if( item.attr.fill == colorsArray[i] ) {
                            fieldInst = i;
                        }
                    }
                    this.setTitle(yFieldArray[fieldInst] + ' = ' + storeItem.get(yFieldArray[fieldInst]));
        }
    This worked perfectly and might help anyone else in my situation

  8. #8
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    Boston
    Posts
    82
    Vote Rating
    4
    germanicus is on a distinguished road

      0  

    Default


    I submitted a patch for this, and this will be available in 4.1. You will be able to determine the yField by querying item.yField.

    For the record, the ticket number in our tracker for this is CHARTS-225.
    Last edited by germanicus; 1 Nov 2011 at 10:20 AM. Reason: Added ticket number

  9. #9
    Sencha User
    Join Date
    Aug 2010
    Posts
    7
    Vote Rating
    0
    jmitchell.br is on a distinguished road

      0  

    Default Best news so far

    Best news so far


    Thank. Goodness. Aside from being able to pass a callback to a store's sync() method, this is the best piece of news I've heard about 4.1 thus far.

    In the mean time, on my charts which have column series on multiple (and dynamic) y-fields on a dynamic store with a dynamic model (read: destroying/rebuilding the entire chart repeatedly), here's what I'm doing as a static method on my chart class which seems to work pretty reliably and doesn't require storing the colors anywhere:

    Code:
    getYField: function( item ){
      /* Given a series item, get its y-field in the store */
      for( var i = 0; i < item.series.items.length; i++ ){
        if( item == item.series.items[i] ){
          itemsPerRec = item.series.items.length / item.storeItem.store.getCount();
          return item.series.yField[ i % itemsPerRec ];
        }
      }
    }
    YMMV, but maybe that'll help someone until 4.1 comes out.

    Oh, and having the store tied to the data *series* instead of the chart itself (thus allowing multiple stores per chart) would make a lot more sense to me. Here's to hoping. Actually, where to I go to put in a feature request?

  10. #10
    Sencha User
    Join Date
    Jul 2011
    Posts
    29
    Vote Rating
    0
    mario60 is on a distinguished road

      0  

    Default Fixed? How? since 4.0.7?

    Fixed? How? since 4.0.7?


    hello,

    has it been fixed? if so, what is the new trick?
    I am working with extJS 4.0.2, do I need to update to 4.0.7?
    thanks
    mario

Similar Threads

  1. Replies: 2
    Last Post: 20 Apr 2011, 10:09 AM
  2. [FIXED] Charts: binding series to axes
    By Nitro in forum Ext:Bugs
    Replies: 3
    Last Post: 3 Mar 2011, 3:31 PM
  3. how to define jsonstore for dynamic series in charts?
    By carrier24sg in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 1 Dec 2010, 3:58 PM
  4. how to add series on fly for charts
    By guessit in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Sep 2010, 5:56 PM
  5. how t o add series on fly for charts
    By guessit in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Sep 2010, 3:33 PM

Thread Participants: 6