StackedBar Chart Help

Thread is closed for posting
2 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Apr 2012

    Posted 05 Apr 2012 Link to this post

    Hey guys,

    I'm trying to use the Telerik Chart Control after purchasing the ASP.NET Ajax control yesterday from yourselves, but i can't seem to get the bar chart to be stacked...

    Here is my code: (ASP.NET)

    <telerik:RadChart ID="RadChart1" runat="server" DefaultType="StackedBar">
                    <YAxis MaxValue="300" Step="10" AutoScale="True"  AxisMode="Extended">

    and my c#:

    string sql = string.Format("...");
    DataTable openLeads = db.FillTable(sql);
    if (openLeads.Rows.Count > 0)
        RadChart1.DataSource = openLeads;
        foreach (DataRow row in openLeads.Rows)
            ChartSeries chrtSeries = new ChartSeries {Name = row["Description"].ToString()};
            chrtSeries.Type = ChartSeriesType.StackedBar;
            RadChart1.SeriesOrientation = ChartSeriesOrientation.Vertical;
        RadChart1.PlotArea.XAxis.DataLabelsColumn = "UserName";

    my sql query produces these results:

    Description                                                    Count              Username
    Passed back to sales - query log                 1                      TAtest
    Rejected                                                       2                     TAtest
    Telesales Assigned TA                                 1                     TAtest

    I want the y-axis to be 10-300 in steps of 10.. min of 10
    I want the x-axis to be the username
    and the count of each Description to be each bar stacked per username..

    Please see attachment of what i'm currently getting..

    Thanks for any help,



  2. Petar Marchev
    Petar Marchev avatar
    996 posts

    Posted 10 Apr 2012 Link to this post

    Hi Michael,

    Since you are new to our controls I strongly suggest that you invest some time examining our online demos and help so that you get familiar with the chart's features, limitations and how-to's.

    I have pasted some code below to get you started with the looks that you want to achieve. In short you need to create a series for each item from your source. Each series must hold this single item. 

    public partial class _Default : System.Web.UI.Page
     protected void Page_Load(object sender, EventArgs e)
      var prods = new List<Product>()
        new Product() { ProductId = 1, Name = "prod1", Sales = 5, },
        new Product() { ProductId = 2, Name = "prod2", Sales = 4, },
        new Product() { ProductId = 3, Name = "prod3", Sales = 3, }
      foreach (var p in prods)
        ChartSeries series = new ChartSeries();
        series.Type = ChartSeriesType.StackedBar;
        series.Items.Add(new ChartSeriesItem(p.Sales));
      this.RadChart1.PlotArea.XAxis.AutoScale = false;
      this.RadChart1.PlotArea.XAxis.AddRange(0, 0, 1);
      this.RadChart1.PlotArea.XAxis.Items[0].TextBlock.Text = "prod1 or prod2 or prod3";
    public class Product
      public string Name { get; set; }
      public int ProductId { get; set; }
      public int Sales { get; set; }

    In your code you did not add items to the series manually, but you specified a data source for the chart and this is why you were getting unexpected results.

    I have also attached a snapshot of the output that I get when I run this code.

    All the best,
    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.
Back to Top