[CLOSED] Change color of a bar in column chart

  1. #1

    [CLOSED] Change color of a bar in column chart

    I have a column chart with multiple YFields. For one of the YFields, I have a business requirement that if the value < 0, color should be red, else green. In the ColumnSeries's renderer function, how can I target that YField?
    Last edited by Daniil; Feb 18, 2014 at 3:44 AM. Reason: [CLOSED]
  2. #2
    I believe what you need to use is a Renderer, see

    http://examples2.ext.net/#/Chart/Bar/Renderer/

    Hope this helps.
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hi everybody,

    Indeed, there is a problem to distinguish a bar which a Renderer is called for. A BarSeries's Renderer is called for shadows as well, not for bars only. Also a record parameter might be undefined.

    I found some threads which looks to be related to the problem, but there is no solution for your case.
    http://www.sencha.com/forum/showthread.php?126251
    http://www.sencha.com/forum/showthread.php?132968

    After a lot of investigation of the the logic of rendering a BarSeries with multiple YFields, I was able to come up with the example below. I don't think it will work in all possible cases, but it appears to be working well for that specific case.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store s = this.Chart1.GetStore();
                s.DataSource = new object[]
                {
                    new 
                    {
                        Name = "Category 1",
                        Data1 = -10,
                        Data2 = 100  
                    },
                    new 
                    {
                        Name = "Category 2",
                        Data1 = 20,
                        Data2 = -90  
                    },
                    new 
                    {
                        Name = "Category 3",
                        Data1 = -30,
                        Data2 = 80  
                    }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            Ext.chart.series.Bar.override({
                renderShadows: function(i, barAttr, baseAttrs, bounds) {
                    var me = this,
                        chart = me.chart,
                        surface = chart.surface,
                        animate = chart.animate,
                        stacked = me.stacked,
                        shadowGroups = me.shadowGroups,
                        shadowAttributes = me.shadowAttributes,
                        shadowGroupsLn = shadowGroups.length,
                        store = chart.getChartStore(),
                        column = me.column,
                        items = me.items,
                        shadows = [],
                        zero = bounds.zero,
                        shadowIndex, shadowBarAttr, shadow, totalDim, totalNegDim, j, rendererAttributes;
    
                    if ((stacked && (i % bounds.groupBarsLen === 0)) || !stacked) {
                        j = i / bounds.groupBarsLen;
                        //create shadows
                        for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
                            shadowBarAttr = Ext.apply({}, shadowAttributes[shadowIndex]);
                            shadow = shadowGroups[shadowIndex].getAt(stacked ? j : i);
                            Ext.copyTo(shadowBarAttr, barAttr, 'x,y,width,height');
                            if (!shadow) {
                                shadow = surface.add(Ext.apply({
                                    type: 'rect',
                                    group: shadowGroups[shadowIndex]
                                }, Ext.apply({}, baseAttrs, shadowBarAttr)));
                            }
                            if (stacked) {
                                totalDim = items[i].totalDim;
                                totalNegDim = items[i].totalNegDim;
                                if (column) {
                                    shadowBarAttr.y = zero + totalNegDim - totalDim - 1;
                                    shadowBarAttr.height = totalDim;
                                }
                                else {
                                    shadowBarAttr.x = zero - totalNegDim;
                                    shadowBarAttr.width = totalDim;
                                }
                            }
                    
                            rendererAttributes = me.renderer(shadow, store.getAt(j), shadowBarAttr, i, store, true); // passed true as the last argument to determine it is a shadow or not in a Renderer call
                            rendererAttributes.hidden = !!barAttr.hidden;
                            if (animate) {
                                me.onAnimate(shadow, { to: rendererAttributes });
                            }
                            else {
                                shadow.setAttributes(rendererAttributes, true);
                            }
                            shadows.push(shadow);
                        }
                    }
                    return shadows;
                }
            });
        </script>
    
        <script>
            var barRenderer = function(sprite, record, attr, index, store, isShadow) {
                var barIndex, 
                    data,
                    series = this;
    
                if (!isShadow) {
                    barIndex = index % series.yField.length;
                    record = store.getAt(Math.floor(index / series.yField.length));
    
                    switch (barIndex) {
                        case 0: data = record.get(series.yField[0]); break;
                        case 1: data = record.get(series.yField[1]); break;
                        
                    }
    
                    if (data < 0) {
                        attr.fill = "rgb(255, 0, 0)";
                    } else {
                        attr.fill = "rgb(0, 255, 0)";
                    }
                }
    
                return attr;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Panel 
                runat="server"
                Title="Bar Renderer"
                Width="400"
                Height="300"
                Layout="FitLayout">
                <Items>
                    <ext:Chart ID="Chart1" runat="server">
                        <Store>
                            <ext:Store runat="server" >                           
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                            <ext:ModelField Name="Data2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
    
                        <Axes>
                            <ext:NumericAxis Fields="Data1,Data2" Position="Bottom" Minimum="-100" />                          
    
                            <ext:CategoryAxis Fields="Name" Position="Left" />                            
                        </Axes>
    
                        <Series>
                            <ext:BarSeries 
                                Axis="Bottom"                            
                                XField="X" 
                                YField="Data1,Data2">                            
                                <Renderer Fn="barRenderer" />
                            </ext:BarSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>    
    </body>
    </html>
    Last edited by Daniil; Feb 25, 2014 at 5:38 AM.

Similar Threads

  1. [CLOSED] How to change label color for the chart.
    By tactime10 in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 30, 2013, 6:57 AM
  2. [CLOSED] How to change background color of labels in chart
    By livehealthierGF in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 16, 2013, 4:27 AM
  3. [CLOSED] how I can change the color of a column
    By JCarlosF in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 09, 2013, 10:30 PM
  4. [CLOSED] How can change color for only one chart column
    By tactime10 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 12, 2013, 8:08 AM
  5. [CLOSED] Change column background color after render
    By RCM in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 10, 2012, 7:08 AM

Tags for this Thread

Posting Permissions