How to declaratively define HorizontalStackbar100?

2 posts, 0 answers
  1. david
    david avatar
    18 posts
    Member since:
    Jan 2009

    Posted 12 Nov 2010 Link to this post

    Hi,
    I am unable to define correctly the Horizontal Stackbar 100..

    I have this xaml:

    <Controls3:RadChart ItemsSource="{Binding ChartData}">
                                                                       
                                        <Controls3:RadChart.SeriesMappings>
                                            <telerikCharting:SeriesMapping LegendLabel="Task status" CollectionIndex="0">
                                                <telerikCharting:SeriesMapping.SeriesDefinition>
                                                    <telerikCharting:HorizontalStackedBar100SeriesDefinition StackGroupName="Work status" />
                                                </telerikCharting:SeriesMapping.SeriesDefinition>
                                                
                                                <telerikCharting:SeriesMapping.ItemMappings>
                                                    <telerikCharting:ItemMapping DataPointMember="YValue" />
                                                </telerikCharting:SeriesMapping.ItemMappings>
                                                
                                            </telerikCharting:SeriesMapping>
                                        </Controls3:RadChart.SeriesMappings>
      </Controls3:RadChart>

    and the data source is

     public List<double[]> ChartData
            {
                get { return new List<double[]>() {new[] {120.0, 60.5}}; }
            }

    but the chart is showing two bars instead of one which should be stacked with these two values.
    What am I missing here?

    thanks,
    David

  2. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 16 Nov 2010 Link to this post

    Hello david,

    To be able to create a HorizontalStackedBar 100 Chart using SeriesMappings declaratively you should have in mind that each ItemMapping should have the following properties set:
    1. DataPointMember
    2. FieldName - specifies from where the data should be taken.

    For more information review our help topic - http://www.telerik.com/help/silverlight/radchart-populating-with-data-data-binding-with-manual-series-mapping.html.

    Also something else to have in mind - if you want StackedBar  you should create two SeriesMappings which point to two different FieldNames.
    Here is how to create the desired HorizontalStackedBar100 Series declaratively:

    <Grid x:Name="LayoutRoot">
           <my:RadChart x:Name="radChart1">
               <my:RadChart.SeriesMappings>
                   <telerikCharting:SeriesMapping>
                       <telerikCharting:SeriesMapping.SeriesDefinition>
                           <telerikCharting:HorizontalStackedBar100SeriesDefinition/>
                       </telerikCharting:SeriesMapping.SeriesDefinition>
                       <telerik:SeriesMapping.ItemMappings>
                           <telerik:ItemMapping DataPointMember="YValue"
                                              FieldName="Value1" />
                       </telerik:SeriesMapping.ItemMappings>
                   </telerikCharting:SeriesMapping>
                   <telerikCharting:SeriesMapping>
                       <telerikCharting:SeriesMapping.SeriesDefinition>
                           <telerikCharting:HorizontalStackedBar100SeriesDefinition/>
                       </telerikCharting:SeriesMapping.SeriesDefinition>
                       <telerik:SeriesMapping.ItemMappings>
                           <telerik:ItemMapping DataPointMember="YValue"
                                              FieldName="Value2" />
                       </telerik:SeriesMapping.ItemMappings>
                   </telerikCharting:SeriesMapping>
               </my:RadChart.SeriesMappings>
           </my:RadChart>
       </Grid>

    And here is the code-behind:
    public partial class MainPage : UserControl
        {
            public class TestObject
            {
                public double Value1 { get; set; }
                public double Value2 { get; set; }
                public TestObject(double value1, double value2)
                {
                    this.Value1 = value1;
                    this.Value2 = value2;
                }
            }
      
            public MainPage()
            {
                InitializeComponent();
      
                List<TestObject> data = new List<TestObject>();
                data.Add(new TestObject(120.0, 60.5));
                radChart1.ItemsSource = data;
            }
        }
    Note that Value1 is related to the first series and Value2 - to the second.

    Greetings,
    Evgenia
    the Telerik team
    See What's New in RadControls for Silverlight in Q3 2010 on Tuesday, November 16, 2010 11:00 AM - 12:00 PM EST or 10:00 PM - 11:00 PM EST: Register here>>
Back to Top