Missing Yaxis values when in Normal mode

Thread is closed for posting
2 posts, 0 answers
  1. AkAlan
    AkAlan avatar
    121 posts
    Member since:
    Jun 2009

    Posted 31 Dec 2011 Link to this post

    Hi, I have a simple chart using a SqlDataSource and I'm having troublwe getting the look I want. If I set the Plot Area Layout Mode to Between, all six bars are in the very middle of the chart. I want them to start from the far left so I change the Layout mode to Normal and then I only see three of the six bars. I have attached screen shots of both settings and the code below. Thanks for any help.
    <telerik:RadChart ID="RadChart1" runat="server" DataSourceID="sdsRwpJobMetric"
            Skin="DeepBlue" Width="500px">
            <Appearance BarWidthPercent="50" Dimensions-AutoSize="False"
                Dimensions-Height="300px" Dimensions-Margins="1px, 1px, 1px, 50px"
                Dimensions-Width="500px">
                <FillStyle FillType="ComplexGradient">
                    <FillSettings>
                        <ComplexGradient>
                            <telerik:GradientElement Color="26, 120, 179" />
                            <telerik:GradientElement Color="35, 189, 254" Position="0.5" />
                            <telerik:GradientElement Color="26, 120, 179" Position="1" />
                        </ComplexGradient>
                    </FillSettings>
                </FillStyle>
                <Border Color="0, 66, 110" Width="5" />
            </Appearance>
            <Series>
    <telerik:ChartSeries Name="GovWoOpened" DataYColumn="GovWoOpened">
        <Appearance BarWidthPercent="50">
            <FillStyle FillType="ComplexGradient">
                <FillSettings>
                    <ComplexGradient>
                        <telerik:GradientElement Color="213, 247, 255" />
                        <telerik:GradientElement Color="193, 239, 252" Position="0.5" />
                        <telerik:GradientElement Color="157, 217, 238" Position="1" />
                    </ComplexGradient>
                </FillSettings>
            </FillStyle>
            <TextAppearance TextProperties-Color="White">
            </TextAppearance>
        </Appearance>
                </telerik:ChartSeries>
    <telerik:ChartSeries Name="GovWoClosedWithin" DataYColumn="GovWoClosedWithin">
        <Appearance BarWidthPercent="50">
            <FillStyle FillType="ComplexGradient">
                <FillSettings>
                    <ComplexGradient>
                        <telerik:GradientElement Color="163, 222, 78" />
                        <telerik:GradientElement Color="132, 207, 27" Position="0.5" />
                        <telerik:GradientElement Color="102, 181, 3" Position="1" />
                    </ComplexGradient>
                </FillSettings>
            </FillStyle>
            <TextAppearance TextProperties-Color="White">
            </TextAppearance>
            <Border Color="94, 160, 0" />
        </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries DataYColumn="GovWosClosed" Name="GovWosClosed">
                    <Appearance BarWidthPercent="50">
                        <FillStyle FillType="ComplexGradient">
                            <FillSettings>
                                <ComplexGradient>
                                    <telerik:GradientElement Color="136, 221, 246" />
                                    <telerik:GradientElement Color="97, 203, 234" Position="0.5" />
                                    <telerik:GradientElement Color="59, 161, 197" Position="1" />
                                </ComplexGradient>
                            </FillSettings>
                        </FillStyle>
                        <TextAppearance TextProperties-Color="White">
                        </TextAppearance>
                        <Border Color="67, 181, 229" />
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries DataYColumn="GovRwpOpened" Name="GovRwpOpened">
                    <Appearance BarWidthPercent="50">
                        <FillStyle FillType="ComplexGradient">
                            <FillSettings>
                                <ComplexGradient>
                                    <telerik:GradientElement Color="218, 254, 122" />
                                    <telerik:GradientElement Color="193, 240, 74" Position="0.5" />
                                    <telerik:GradientElement Color="163, 205, 46" Position="1" />
                                </ComplexGradient>
                            </FillSettings>
                        </FillStyle>
                        <TextAppearance TextProperties-Color="White">
                        </TextAppearance>
                        <Border Color="111, 174, 12" />
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries DataYColumn="GovRwpClosedWithin" Name="GovRwpClosedWithin">
                    <Appearance BarWidthPercent="50">
                        <FillStyle FillType="ComplexGradient">
                            <FillSettings>
                                <ComplexGradient>
                                    <telerik:GradientElement Color="79, 152, 198" />
                                    <telerik:GradientElement Color="34, 123, 182" Position="0.5" />
                                    <telerik:GradientElement Color="4, 85, 156" Position="1" />
                                </ComplexGradient>
                            </FillSettings>
                        </FillStyle>
                        <TextAppearance TextProperties-Color="White">
                        </TextAppearance>
                        <Border Color="39, 103, 210" />
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries DataYColumn="GovRwpClosed" Name="GovRwpClosed">
                    <Appearance BarWidthPercent="50">
                        <FillStyle FillType="ComplexGradient">
                            <FillSettings>
                                <ComplexGradient>
                                    <telerik:GradientElement Color="86, 153, 78" />
                                    <telerik:GradientElement Color="43, 126, 33" Position="0.5" />
                                    <telerik:GradientElement Color="18, 96, 3" Position="1" />
                                </ComplexGradient>
                            </FillSettings>
                        </FillStyle>
                        <TextAppearance TextProperties-Color="White">
                        </TextAppearance>
                        <Border Color="46, 93, 0" />
                    </Appearance>
                </telerik:ChartSeries>
    </Series>
            <Legend>
                <Appearance Dimensions-Margins="1px, 2%, 12%, 1px">
                    <ItemTextAppearance TextProperties-Color="White">
                    </ItemTextAppearance>
                    <FillStyle GammaCorrection="False" MainColor="37, 255, 255, 255">
                    </FillStyle>
                    <Border Color="76, 255, 255, 255" />
                </Appearance>
                <TextBlock>
                    <Appearance Position-AlignedPosition="Top" TextProperties-Color="LightSkyBlue">
                    </Appearance>
                </TextBlock>
            </Legend>
            <PlotArea>
                <XAxis AutoScale="False" AutoShrink="False" LayoutMode="Normal" MaxValue="6"
                    MinValue="1" Step="0">
                    <Appearance Color="Beige" EndCap="Round" MajorTick-Color="98, 183, 226">
                        <MajorGridLines Color="98, 183, 226" Width="0" />
                        <LabelAppearance Dimensions-AutoSize="true" Dimensions-Height="0px"
                            Dimensions-Width="0px" Position-Auto="False" Position-X="0" Position-Y="0">
                            <FillStyle>
                                <FillSettings ImageAlign="Left">
                                </FillSettings>
                            </FillStyle>
                        </LabelAppearance>
                        <TextAppearance TextProperties-Color="White">
                        </TextAppearance>
                    </Appearance>
                    <AxisLabel>
                        <Appearance Dimensions-Paddings="1px, 1px, 10%, 1px" Figure="Diamond">
                        </Appearance>
                        <TextBlock>
                            <Appearance TextProperties-Color="LightSkyBlue">
                            </Appearance>
                        </TextBlock>
                    </AxisLabel>
                    <Items>
                        <telerik:ChartAxisItem>
                        </telerik:ChartAxisItem>
                    </Items>
                </XAxis>
                <YAxis IsZeroBased="False">
                    <Appearance Color="98, 183, 226" MajorTick-Color="98, 183, 226"
                        MinorTick-Color="98, 183, 226">
                        <MajorGridLines Color="120, 209, 248" />
                        <MinorGridLines Color="120, 209, 248" Width="0" />
                        <TextAppearance TextProperties-Color="White">
                        </TextAppearance>
                    </Appearance>
                    <AxisLabel>
                        <TextBlock>
                            <Appearance TextProperties-Color="LightSkyBlue">
                            </Appearance>
                        </TextBlock>
                    </AxisLabel>
                </YAxis>
                <Appearance Corners="Round, Round, Round, Round, 6" Dimensions-AutoSize="False"
                    Dimensions-Height="207px" Dimensions-Margins="19%, 2px, 12%, 2px"
                    Dimensions-Width="350px" Position-AlignedPosition="Bottom">
                    <FillStyle MainColor="50, 255, 255, 255" SecondColor="Transparent">
                    </FillStyle>
                    <Border Color="97, 180, 223" Width="3" />
                </Appearance>
            </PlotArea>
            <ChartTitle>
                <Appearance Dimensions-Margins="4%, 10px, 14px, 6%">
                    <FillStyle MainColor="">
                    </FillStyle>
                </Appearance>
                <TextBlock>
                    <Appearance TextProperties-Color="White" TextProperties-Font="Verdana, 14pt">
                    </Appearance>
                </TextBlock>
            </ChartTitle>
        </telerik:RadChart>
             
    </div>
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 03 Jan 2012 Link to this post

    Hello,

    The Normal LayoutMode is generally intended to work with Line series. Of course you can use it in other series as well but the results could be confusing. I have pasted some code below to help you understand how the Layout modes Inside and Normal work. When you run this all should be clear.

    <p>
        <telerik:RadChart ID="RadChart1" runat="server" Width="500px">
            <Series>
                <telerik:ChartSeries>
                    <Items>
                        <telerik:ChartSeriesItem YValue="100" />
                        <telerik:ChartSeriesItem YValue="50" />
                        <telerik:ChartSeriesItem YValue="40" />
                        <telerik:ChartSeriesItem YValue="70" />
                    </Items>
                </telerik:ChartSeries>
            </Series>
        </telerik:RadChart>
    </p>
    <p>
        <telerik:RadChart ID="RadChart2" runat="server" Width="500px">
            <Series>
                <telerik:ChartSeries>
                    <Items>
                        <telerik:ChartSeriesItem YValue="100" />
                        <telerik:ChartSeriesItem YValue="50" />
                        <telerik:ChartSeriesItem YValue="40" />
                        <telerik:ChartSeriesItem YValue="70" />
                    </Items>
                </telerik:ChartSeries>
            </Series>
            <PlotArea>
                <XAxis LayoutMode="Normal" />
            </PlotArea>
        </telerik:RadChart>
    </p>


    In your code you have created six series and you have 1 item in each series. In the code below I have one series and only 1 item but it will demonstrate what happens. You can later add more series and see the result.
    <p>
            <telerik:RadChart ID="RadChart22" runat="server" Width="500px">
                <Series>
                    <telerik:ChartSeries>
                        <Items>                       
                            <telerik:ChartSeriesItem YValue="70" />
                        </Items>
                    </telerik:ChartSeries>
                </Series>
                <PlotArea>
                    <XAxis LayoutMode="Normal" />
                </PlotArea>
            </telerik:RadChart>
        </p>

    Now I hope you see why you are getting such results.

    What I suggest for you to do is not declare six series but declare only one series and pass an appropriate  collection (with these six items) as the source of the chart.

    The code I have pasted below should help you understand what I have in mind .

    <p>
            <telerik:RadChart runat="server" ID="radChart">
                <Series>
                    <telerik:ChartSeries DataYColumn="Price"/>
                </Series>
                <PlotArea>
                    <XAxis DataLabelsColumn="CategoryName" />
                </PlotArea>
            </telerik:RadChart>
        </p>
    public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                var products = new List<Product>()
                {
                    new Product(){CategoryName = "SL", Price=70, ProductID=11},
                    new Product(){CategoryName = "ASP", Price=50, ProductID=12},
                    new Product(){CategoryName = "WPF", Price=90, ProductID=13},
                    new Product(){CategoryName = "WinF", Price=70, ProductID=14},
                    new Product(){CategoryName = "MVC", Price=60, ProductID=15},
                };
     
                this.radChart.DataSource = products;
                this.radChart.DataBind();
            }
        }
     
        public class Product
        {
            public int ProductID { get; set; }
            public string CategoryName { get; set; }
            public double Price { get; set; }
        }


    I encourage you to look at our online demos here and use our help here page as they contain valuable information and examples.

    Kind regards,
    Petar Marchev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top