[CLOSED] How can change color for only one chart column

  1. #1

    [CLOSED] How can change color for only one chart column

    Hi,

    I need to change the color for one column of the chart,
    an example you can see in attached image (the image show the borders as different color instead I want to fill the column with different color)
    Click image for larger version. 

Name:	monitor.png 
Views:	82 
Size:	12.5 KB 
ID:	5585

    I try in this way specifying the index of column for the 'value', but it doesn't work.
            function barRenderer(sprite, record, attr, index, store) {
                var color = ['rgb(213, 70, 121)',
                                'rgb(44, 153, 201)',
                                'rgb(146, 6, 157)',
                                'rgb(49, 149, 0)',
                                'rgb(249, 153, 0)'][value];
    
                return Ext.apply(attr, {
                    fill: color
                });
            }
    Can you help me for this issue?
    Thank you so much
    Last edited by Daniil; Feb 12, 2013 at 11:55 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Please, try the following sample:

    <%@ Page Language="C#" %>
      
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
      
    <script runat="server">
        public List<object> Data
        {
            get
            {
                return new List<object>
                {
                    new {Year = 2005, Comedy = 5 },
                    new {Year = 2006, Comedy = 2 },
                    new {Year = 2007, Comedy = 3 },
                    new {Year = 2008, Comedy = 4 }
                };
            }
        }
    </script>
      
    <!DOCTYPE html>
      
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
        <script>
            function columnRenderer(sprite, record, attr, index, store) {
                return Ext.apply(attr, {
                    fill: index == 0 ? '#FF0': '#F0F'
                });
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
      
            <ext:Panel
                runat="server"
                Width="800"
                Height="400"
                Title="Stacked Bar Chart - Movies by Genre"
                Layout="FitLayout">
                <Items>
                    <ext:Chart
                        ID="Chart1"
                        runat="server"
                        Animate="true">
                        <Store>
                            <ext:Store
                                runat="server"
                                Data="<%# Data %>"
                                AutoDataBind="true">                         
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Year" />
                                            <ext:ModelField Name="Comedy" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
      
                        <Axes>
                            <ext:NumericAxis                           
                                Fields="Comedy"
                                Position="Left">
                            </ext:NumericAxis>                          
      
                            <ext:CategoryAxis Fields="Year" Position="Bottom" />
                        </Axes>
      
                        <Series>
                            <ext:ColumnSeries 
                                Axis="Left"
                                Highlight="true" 
                                XField="Year" 
                                YField="Comedy">
                                <Renderer Fn="columnRenderer"></Renderer>
                            </ext:ColumnSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>  
    </body>
    </html>
  3. #3
    Hi,

    Thank you so much for the example, now it works.

Similar Threads

  1. Replies: 5
    Last Post: Dec 07, 2012, 5:42 PM
  2. Replies: 5
    Last Post: Dec 03, 2012, 12:36 PM
  3. [CLOSED] Change column background color after render
    By RCM in forum 2.x Premium Help
    Replies: 1
    Last Post: Sep 10, 2012, 8:08 AM
  4. Replies: 2
    Last Post: Jun 05, 2012, 3:04 PM
  5. Replies: 12
    Last Post: Jun 17, 2009, 1:07 PM

Posting Permissions