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

Strange behavior of StackedBar chart with horizontal orientation

3 Answers 128 Views

Chart (Obsolete)

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

eugen100 asked on 18 Feb 2012, 01:24 PM

Horizontal.jpg

Vertical.jpg

Hello,
I need to show a horizontal stackedbar RadChart for several (say, 2) series, each series has one item and with some limitations for min and max values. I insert below a page with some simple code and attach 2 images. As you can see if orientation is vertical that all is perfect. But when I change orientation to horizontal one I get some exccessive bar after the last bar. Is it a bug ? How can I fix that? I use Q2 2010 version in this project. May be it is fixed in more latest versions?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Stackbar2.aspx.cs" Inherits="Stackbar2" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Charting" tagprefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>

<telerik:RadChart ID="RadChart1" runat="server" DefaultType="StackedBar"

SeriesOrientation="Vertical">

<Series>

<telerik:ChartSeries Name="Series 1" Type="StackedBar">

<Items>

<telerik:ChartSeriesItem Name="Item 1" YValue="190">

</telerik:ChartSeriesItem>

</Items>

</telerik:ChartSeries>

<telerik:ChartSeries Name="Series 2" Type="StackedBar">

<Items>

<telerik:ChartSeriesItem Name="Item 1" YValue="100" >

</telerik:ChartSeriesItem>

</Items>

</telerik:ChartSeries>

</Series>

</telerik:RadChart>

<br />

<asp:Label ID="lblChartOrientation" runat="server" Text="Series orientation:" />

<asp:RadioButtonList AutoPostBack="true" ID="OrientationList" runat="server" OnSelectedIndexChanged="OrientationList_SelectedIndexChanged">

<asp:ListItem Text="Horizontal" Value="Horizontal" />

<asp:ListItem Text="Vertical" Value="Vertical" Selected="True" />

</asp:RadioButtonList>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Charting;

using System.Drawing;

public partial class Stackbar2 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack)

Settings();

}

private void Settings()

{

ChartSeriesCollection coll = RadChart1.Series;

for (int i = 0; i < coll.Count; i++)

{

}

double yMin=110;

double yMax=400;

double step = 50;

RadChart1.PlotArea.YAxis.AddRange(yMin, yMax, step);

RadChart1.PlotArea.YAxis.AutoScale = false;

}

protected void OrientationList_SelectedIndexChanged(object sender, EventArgs e)

{

RadChart1.SeriesOrientation = (ChartSeriesOrientation)Enum.Parse(typeof(ChartSeriesOrientation), OrientationList.SelectedValue);

}

3 Answers, 1 is accepted

answered on 22 Feb 2012, 08:13 PM

Hello,
Thank you for your answer. Unfortunately your suggestion is not acceptable for me. I'd like to explain what I need. I have 2 charts on a page: upper and lower. The upper one corresponds to function z=f(m) for some pipe where m[i] is length of the pipe from the beginning to i-th point and z is height of the pipe in this point ( above sea level). The pipe consists of some segments that are built from different materials, So in the lower chart I show them as horizontal segments (with different colors and labelled with names of materials). For each segment I define a series consisting of one item and show all of them as Stacked bar.
When an user makes zoom on the upper chart I need to make zoom on the lower one. So I just define new range for the lower chart according to new range of the upper chart. Therefore it is important for me that min value for the lower chart cannot be equal to 0 in this state.
I look forward for your fixing of the bug.

answered on 27 Feb 2012, 02:38 PM

Hello Evgeny,

Thank you for elaborating on this -- we will provide the additional information to our developers as well.

Meanwhile, we would suggest you to sync the respective client settings on both charts in the RadChart.Zoom server-side event handler for the first chart (in this way you can achieve the desired effect without the need to manually update the axis range for the second chart).

Here is the sample code snippet:
ASPX

<telerik:RadChart ID="RadChart1" runat="server" SeriesOrientation="Horizontal" OnZoom="RadChart1_Zoom">

<ClientSettings ScrollMode="YOnly" />

<Series>

<telerik:ChartSeries>

<Items>

<telerik:ChartSeriesItem YValue="21" />

<telerik:ChartSeriesItem YValue="27" />

<telerik:ChartSeriesItem YValue="22" />

<telerik:ChartSeriesItem YValue="25" />

<telerik:ChartSeriesItem YValue="21" />

<telerik:ChartSeriesItem YValue="11" />

</Items>

</telerik:ChartSeries>

</Series>

</telerik:RadChart>

<telerik:RadChart ID="RadChart2" runat="server" SeriesOrientation="Horizontal">

<ClientSettings ScrollMode="YOnly" EnableZoom="false" EnableAxisMarkers="false" />

<Series>

<telerik:ChartSeries Type="StackedBar">

<Items>

<telerik:ChartSeriesItem YValue="190" />

</Items>

</telerik:ChartSeries>

<telerik:ChartSeries Type="StackedBar">

<Items>

<telerik:ChartSeriesItem YValue="100" />

</Items>

</telerik:ChartSeries>

</Series>

</telerik:RadChart>

protected void RadChart1_Zoom(object sender, ChartZoomEventArgs e)

{

RadChart2.ClientSettings.XScrollOffset = RadChart1.ClientSettings.XScrollOffset;

RadChart2.ClientSettings.YScrollOffset = RadChart1.ClientSettings.YScrollOffset;

RadChart2.ClientSettings.XScale = RadChart1.ClientSettings.XScale;

RadChart2.ClientSettings.YScale = RadChart1.ClientSettings.YScale;

}

Greetings,
Giuseppe
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.