This is a migrated thread and some comments may be shown as answers.

Missing Yaxis values when in Normal mode

1 Answer 110 Views

Chart (Obsolete)

This is a migrated thread and some comments may be shown as answers.

AkAlan asked on 31 Dec 2011, 07:55 PM

ChartBetween.PNG

ChartNormal.PNG

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>

1 Answer, 1 is accepted

answered on 03 Jan 2012, 01:55 PM

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.



 <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>





 <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>



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.

<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>

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 .

<telerik:RadChart runat="server" ID="radChart">

<Series>

<telerik:ChartSeries DataYColumn="Price"/>

</Series>

<PlotArea>

<XAxis DataLabelsColumn="CategoryName" />

</PlotArea>

</telerik:RadChart>

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