[CLOSED] Unable to change charts line color

  1. #1

    [CLOSED] Unable to change charts line color

    No matter what values are set in LineSeries No changes are taking effect
    for ex.
    <script runat="server">
        protected void ReloadData(object sender, DirectEventArgs e)
        {
            Store chartStore = this.Chart1.GetStore();
            chartStore.DataSource = GenerateData();
            chartStore.DataBind();
    
        }
     public List<object> GenerateData()
        {
    
            List<object> lst = new List<object> {
                    new  {
                        Name = "January",
                        Count =10
                    },
                    new {
                         Name = "February",
                        Count =50
                    },
                    new {
                        Name = "March",
                        Count =40
                    },
                    new {
    
                        Name = "April",
                        Count =25
                    }
            };
    
    
            return lst;
    
        }
    </script>
    <ext:Chart ID="Chart1" runat="server" InsetPadding="30">
                    <Store>
                        <ext:Store ID="Store2" runat="server">
                            <Model>
                                <ext:Model ID="Model3" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Count" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:NumericAxis Minimum="0" Fields="Count" Grid="true">
                            <Label Font="10px Arial">
                              <Renderer Handler="return Ext.util.Format.number(value, '0');" />
                            </Label>
                        </ext:NumericAxis>
                        <ext:CategoryAxis Position="Bottom" Fields="Name">
                            <Label Font="11px Arial">
                                 <Renderer Handler="return value.substr(0, 3) + ' 13';" />
                            </Label>
                        </ext:CategoryAxis>
                    </Axes>
                    <Series>
                        <ext:LineSeries Axis="Left" XField="Name" YField="Count">
                            <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1] + ' visits on ' + Ext.Date.monthNames[item.value[0]]});" />
                            </Listeners>
                            <Tips ID="Tips2" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Count')); this.update(storeItem.get('Count'));"></Renderer>
                            </Tips>
                             <Style Fill="#38B8BF" Stroke="#38B8BF" StrokeWidth="30" />//does not work ||||
                            <MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" Fill="#38B8BF" Stroke="#38B8BF" />
                        </ext:LineSeries>
                    </Series>
                </ext:Chart>
    Last edited by Daniil; Jan 22, 2013 at 4:06 AM. Reason: [CLOSED]
  2. #2
    Hi,
    I don't see where do you call ReloadData
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Hi everybody,

    I was able to reproduce it with Ext.NET v2.1.1 release, but not with the trunk.

    I was hoping the following helps:
    <Renderer Handler="attributes.fill = 'red'; return attributes;" />
    But it colors markers only.

    So, please update from the trunk or wait the next release (no official date yet).
  4. #4

    Markers are ok

    Quote Originally Posted by Daniil View Post
    Hi everybody,

    I was able to reproduce it with Ext.NET v2.1.1 release, but not with the trunk.

    I was hoping the following helps:
    <Renderer Handler="attributes.fill = 'red'; return attributes;" />
    But it colors markers only.

    So, please update from the trunk or wait the next release (no official date yet).
    I was able to change the markers without any "Renderer" . If there is no solution then how the line color changing is possible here ??http://examples2.ext.net/#/Chart/Line/Mixed/
  5. #5
    Quote Originally Posted by Vladimir View Post
    Hi,
    I don't see where do you call ReloadData
    Charts draws the points correctly.I made mistake in example code
    protected void Page_Load(object sender, DirectEventArgs e)
        {
            Store chartStore = this.Chart1.GetStore();
            chartStore.DataSource = GenerateData();
            chartStore.DataBind();
     
        }
  6. #6
    You can update from the trunk to get it working.
    http://svn.ext.net/premium/trunk/

    Please notice that the trunk currently uses ExtJS 4.2.0 beta 2.
  7. #7
    Quote Originally Posted by Daniil View Post
    You can update from the trunk to get it working.
    http://svn.ext.net/premium/trunk/

    Please notice that the trunk currently uses ExtJS 4.2.0 beta 2.
    Well I have found some workaround .The Line path tag has zindex attribute of 3000 I suspect this attribute defines the line so by selecting required tags we can change the color
     function setLineSeriesColor(color, lineWidth) {
     var line = Ext.get('chart1').select('path[zIndex=3000]').elements[0]; //single series 
     if (line){
        line.setAttribute('stroke', color);
        line.setAttribute('stroke-width', lineWidth);
      }
    }
    the last thing is to hook it on store "Load" event and chart "Resize" event
    Last edited by zeus; Jan 17, 2013 at 8:55 AM.
  8. #8
    @zeus, thank you for your attention and sharing the workaround!

Similar Threads

  1. Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  2. Unable to get Dynamic Charts in Ext.Net
    By nagesh in forum 2.x Help
    Replies: 13
    Last Post: Nov 17, 2012, 6:22 AM
  3. line to complete a single color
    By ruben in forum 1.x Help
    Replies: 1
    Last Post: Jun 19, 2011, 11:22 PM
  4. Changing the line color of GridPanel
    By Dig2010 in forum 1.x Help
    Replies: 3
    Last Post: Dec 02, 2010, 7:14 PM
  5. Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM

Posting Permissions