Stacked

Thread is closed for posting
3 posts, 1 answers
  1. Simon Letch
    Simon Letch avatar
    2 posts
    Member since:
    Apr 2011

    Posted 20 Apr 2011 Link to this post

    I am trying to create a StackedBar chart but it seems to be rendering not as i would expect.

    The chart is created programatically. I create a List<BindObj> (I have created a class 'BindObj') and then bind the chart to it.

    BindObj:

    public class BindObj
    {
        public string GroupColumnValue { get; set; }
        public string XColumnValue { get; set; }
        public decimal YColumnValue { get; set; }
    }

    To create and bind the chart:

    IList<BindObj> datasource = new List<BindObj>();

    BindObj bindingObj1 = new BindObj();
    bindingObj1.XColumnValue = "11/04/2011";
    bindingObj1.YColumnValue = 1;
    bindingObj1.GroupColumnValue = "11/04/2011";

    BindObj bindingObj2 = new BindObj();
    bindingObj2.XColumnValue = "11/04/2011";
    bindingObj2.YColumnValue = 1;
    bindingObj2.GroupColumnValue = "11/04/2011";

    BindObj bindingObj3 = new BindObj();
    bindingObj3.XColumnValue = "11/04/2011";
    bindingObj3.YColumnValue = 1;
    bindingObj3.GroupColumnValue = "11/04/2011";

    BindObj bindingObj4 = new BindObj();
    bindingObj4.XColumnValue = "13/04/2011";
    bindingObj4.YColumnValue = 1;
    bindingObj4.GroupColumnValue = "13/04/2011";

    BindObj bindingObj5 = new BindObj();
    bindingObj5.XColumnValue = "14/04/2011";
    bindingObj5.YColumnValue = 1;
    bindingObj5.GroupColumnValue = "14/04/2011";

    BindObj bindingObj6 = new BindObj();
    bindingObj6.XColumnValue = "14/04/2011";
    bindingObj6.YColumnValue = 2;
    bindingObj6.GroupColumnValue = "14/04/2011";

    datasource.Add(bindingObj1);
    datasource.Add(bindingObj2);
    datasource.Add(bindingObj3);
    datasource.Add(bindingObj4);
    datasource.Add(bindingObj5); 
    datasource.Add(bindingObj6);

    RadChart testChart = new RadChart();
    testChart.DefaultType = Telerik.Charting.ChartSeriesType.StackedBar;
    testChart.PlotArea.XAxis.DataLabelsColumn = "XColumnValue";
    testChart.DataGroupColumn = "GroupColumnValue";
    testChart.DataSource = datasource;
    testChart.DataBind();

    I would have expected:
        _________                ________
        |                |                |                |
        | bindobj3 |                |                 |
        |________|                | bindobj6 |
        |                |                |                |
        | bindobj2 |                |                |
        |________|________|________|
        |                |                |                |
        | bindobj1 | bindobj4  |  bindobj5 |
        |________|________|________|
         11/04/11   13/04/11   14/04/11

    All the items with an X Value of 11/04/11 in the first column, all the items with an X Value of 13/04/11 in the second and finally all the items with an X Value of 14/04/11 in the final column.

    Instead I get:

        _________________
        |                |                |                
        | bindobj5 |                |                
        |________| bindobj6 |  
        |                |                |                
        | bindobj4 |                |                
        |________|________|________
        |                |                |                |
        | bindobj1 | bindobj2  |  bindobj3 |
        |________|________|________|
         11/04/11   13/04/11   14/04/11



    I tried to attatch a sample project, but cant seem to attatch a zip file. Dropping the above code into a standard aspx page should illustrate what I am trying to say. 

    Maybe I am just not thinking about this correctly?! Can anyone shed any light on how I would get the result I want?

    Thanks,
  2. Answer
    Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 26 Apr 2011 Link to this post

    Hi Simon,

    The problem is caused by the fact that the Chart can not Group string data. What you should do is to replace the string values with numbers and use the DataManager.ValuesXColumn property so that the XAxis Labels of the Chart will be displayed as the values set in the XColumnValue property.
    The following sample code demonstrates this:

    protected void Page_Load(object sender, EventArgs e)
      {
          IList<BindObj> datasource = new List<BindObj>();
          BindObj bindingObj1 = new BindObj();
          bindingObj1.XColumnValue = 1;
          bindingObj1.YColumnValue = 1;
          bindingObj1.GroupColumnValue = "11/04/2011";
          BindObj bindingObj2 = new BindObj();
          bindingObj2.XColumnValue = 1;
          bindingObj2.YColumnValue = 1;
          bindingObj2.GroupColumnValue = "11/04/2011";
          BindObj bindingObj3 = new BindObj();
          bindingObj3.XColumnValue = 1;
          bindingObj3.YColumnValue = 1;
          bindingObj3.GroupColumnValue = "11/04/2011";
          BindObj bindingObj4 = new BindObj();
          bindingObj4.XColumnValue = 2;
          bindingObj4.YColumnValue = 1;
          bindingObj4.GroupColumnValue = "13/04/2011";
          BindObj bindingObj5 = new BindObj();
          bindingObj5.XColumnValue = 3;
          bindingObj5.YColumnValue = 1;
          bindingObj5.GroupColumnValue = "14/04/2011";
          BindObj bindingObj6 = new BindObj();
          bindingObj6.XColumnValue = 3;
          bindingObj6.YColumnValue = 2;
          bindingObj6.GroupColumnValue = "14/04/2011";
          datasource.Add(bindingObj1);
          datasource.Add(bindingObj2);
          datasource.Add(bindingObj3);
          datasource.Add(bindingObj4);
          datasource.Add(bindingObj5);
          datasource.Add(bindingObj6);
          RadChart1.DefaultType = Telerik.Charting.ChartSeriesType.StackedBar;
          RadChart1.PlotArea.XAxis.DataLabelsColumn = "GroupColumnValue";
          RadChart1.DataManager.ValuesXColumn = "XColumnValue";
          RadChart1.DataGroupColumn = "GroupColumnValue";
          RadChart1.DataSource = datasource;
          RadChart1.DataBind();
      }
      public class BindObj
      {
          public string GroupColumnValue { get; set; }
          public double XColumnValue { get; set; }
          public double YColumnValue { get; set; }
      }

    Regards,
    Evgenia
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Simon Letch
    Simon Letch avatar
    2 posts
    Member since:
    Apr 2011

    Posted 03 May 2011 Link to this post

    Ok, that makes sense.

    Will try this out and post back if I have any other problems.

    Thanks :)
Back to Top