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

Strange behavior of StackedBar chart with horizontal orientation

3 Answers 99 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
eugen100
Top achievements
Rank 1
eugen100 asked on 18 Feb 2012, 01:24 PM
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);
    }
 
}

3 Answers, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 22 Feb 2012, 02:00 PM
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 >>
0
eugen100
Top achievements
Rank 1
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.
0
Giuseppe
Telerik team
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>

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.
Tags
Chart (Obsolete)
Asked by
eugen100
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
eugen100
Top achievements
Rank 1
Share this question
or