Strange behavior of StackedBar chart with horizontal orientation

Thread is closed for posting
4 posts, 0 answers
  1. eugen100
    eugen100 avatar
    34 posts
    Member since:
    Mar 2007

    Posted 18 Feb 2012 Link to this post

    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">
     
    <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);
        }
     
    }

  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 22 Feb 2012 Link to this post

    Hello Evgeny,

    It seems there is indeed a problem with stacked bars in horizontal orientation and we will forward it to our developers for further review. As a workaround for the time being we would suggest you to use either automatic axis range, or use custom axis range with MinValue=0.

    Hope this helps.


    Greetings,
    Giuseppe
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. eugen100
    eugen100 avatar
    34 posts
    Member since:
    Mar 2007

    Posted 22 Feb 2012 Link to this post

    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.
  5. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 27 Feb 2012 Link to this post

    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>

    C#
    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.
Back to Top