Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Vote Rating
    0
    Answers
    5
    ChrisWalker is on a distinguished road

      0  

    Default Unanswered: Creating Custom Gradients on a grouped multi column chart0:

    Unanswered: Creating Custom Gradients on a grouped multi column chart0:


    I have a column series with multiple data columns defined in the yField property that will give me a grouped column chart as opposed to a stacked column chart. When I had just 1 column defined in the yField, I could give the column a gradient using the renderer function for the series:
    Code:
    renderer: function(sprite,storeItem, barAttr, i, store)
    {
    barAttr.fill = 'url(#gradient0';
    return barAttr;}
    Where the URL is defined in the chart's gradients config item-

    Code:
    [
    id: 'gradient0',
    angle:90,
    stops: {
       0:{ color: 'rgb(125,185,232)'},
      100: {color: 'rgb(30,87,153)'}
    },
    {
        id:'gradient1',
       angle:90,
       stops: {
             0:{color:'rgb(0,0,0)'}
            100:{color:'rgb(255,0,0)'}
    }
    }
    ]
    However with multiple yFields defined in the series, I am having difficulty trying to find which field I am drawing at the time. The i parameter in the renderer function tells me which bar I am drawing for the whole chart and the StoreItem shows me what record, but what I would like is to tell me which yField it is drawing. Any ideas?

  2. #2
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Vote Rating
    0
    Answers
    5
    ChrisWalker is on a distinguished road

      0  

    Default


    Unless someone has a more elegant way to do this, a simple javascript modulus operation in the renderer should tell me which column in the group I am working on:
    Code:
    SeriesItem.renderer = function (sprite, storeItem, barAttr, i, store) {
                var groupItem = i % this.yField.length;
                barAttr.fill = 'url(#gradient' + groupItem.toString() + ')';
                return barAttr;
            };
    this = the series so I have the yField array to work with. The variable i in the function tells me which column in the chart it is rendering- if I have 50 columns total then i can be from 0 to 49. So if the renderer passes i = 21 and yField array length = 2 then i % this.yField.length or 21 % 2 = 1 which tells me that I am rendering the 2nd item in the group (0 based). I then set the fill = 'url(#gradient1)'. It seems to work for now.