Stacked

[Simon Letch]

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,

[Evgenia]

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

[Simon Letch]

Ok, that makes sense.

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

Thanks :)