Databinding in XAML

7 posts, 0 answers
  1. Ryan
    Ryan avatar
    2 posts
    Member since:
    Feb 2009

    Posted 24 Feb 2009 Link to this post

    I have looked all over and I cannot find a single example of how to databind an ObservableCollect to a RadChart. I would like to be able to create 3 series and bind each one of them to a different ObservableCollection. Binding through XAML would work best in my case because my application is written using the MVVM.

    Does anyone have an example they can point me to?
  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 02 Mar 2009 Link to this post

    Hello Ryan,

    There is no example, but you can do it like this:

    <telerik:RadChart ItemsSource={StaticResource collection_here} />
    or
    <telerik:RadChart ItemsSource={Binding .....} />

    This should work for you. For the RadChart control and actualy for all itemscontrols for that matter you simply need to set the ItemsSource property in order to bind them. Whether you do that in XAML or in code-behind the principle is unchanged.

    Kind regards,
    Vladimir Milev
  3. UI for WPF is Visual Studio 2017 Ready
  4. Ryan
    Ryan avatar
    2 posts
    Member since:
    Feb 2009

    Posted 03 Mar 2009 Link to this post

    It isn't the ItemsSource that I was having problems with. What structure does the data need to be in to bind it to a series? If I have a data structure and that data structure contains 3 - 5 different unique series. Can you provide an example of how that might work?

    Are there any specific requirements for the structure of the data?
  5. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 06 Mar 2009 Link to this post

    Hello Ryan,

    I'm guessing you will need to create series mappings to map your data into several unique series. Have you seen this help topic? I think it will help a lot.

    Best wishes,
    Vladimir Milev
  6. Dan
    Dan avatar
    202 posts
    Member since:
    May 2006

    Posted 14 Jul 2011 Link to this post

    I have exactly the same question as the above person.  How does one bind the data (line chart in my case) to the ItemsSource?
    The 'help topic' link from Vladimir is no longer valid.  Please provide the helping link.Thanks,
    Dan
  7. Dan
    Dan avatar
    202 posts
    Member since:
    May 2006

    Posted 14 Jul 2011 Link to this post

    Ok, so I found the binding solution here:
    http://www.telerik.com/help/wpf/radchart-populating-with-data-series-mapping-items-source.html
    It works well for passing the YValue data.  My xaml:
    <telerikChart:RadChart Width="500" Height="400" x:Name="radChart" UseDefaultLayout="False" ItemsSource="{Binding Data}">
        <telerikCharting:ChartArea x:Name="ChartArea1" EnableAnimations="False"></telerikCharting:ChartArea>
            <telerik:RadChart.SeriesMappings>
                <telerikCharting:SeriesMapping ChartAreaName="ChartArea1"  >
                    <telerikCharting:SeriesMapping.SeriesDefinition>
                        <telerikCharting:LineSeriesDefinition />
                    </telerikCharting:SeriesMapping.SeriesDefinition>
                    <telerikCharting:ItemMapping FieldName="Value" DataPointMember="YValue" />
                    <telerikCharting:ItemMapping FieldName="Xlabel" DataPointMember="XCategory" />
                </telerikCharting:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
    </telerikChart:RadChart>

    However, when I added the X axis labels to the ItemsSource Data, and referenced them with the xaml line:
    <telerikCharting:ItemMapping FieldName="Xlabel" DataPointMember="XCategory" />
    then the line chart collapsed itself over to the y axis with all of the data points on top of each other on teh left of the chart.
    Any ideas why this might be happening?

    Here is the code that generates the Data:
    public class DSOBarChartViewModel : WorkspaceViewModel
    {
        public DSOBarChartViewModel()
        {
            this.Data = MyDateObject.GetData( 10 );
                        }
     
        public class MyDateObject
        {
            public double Value { get; set; }
            public string Xlabel { get; set; }
     
            public MyDateObject( double value,  string xlabel )
            {
                                this.Value = value;
                this.Xlabel = xlabel;
            }
     
            public static ObservableCollection<MyDateObject> GetData( int count )
            {
                Random r = new Random();
                ObservableCollection<MyDateObject> result = new ObservableCollection<MyDateObject>();
     
                for ( int i = 0; i < count; i++ )
                {
                    result.Add( new MyDateObject( r.Next( 0, 100 ),  "xyz" ) );
                }
     
                return result;
            }
        }
     
     
        private ObservableCollection<MyDateObject> _data;
        public ObservableCollection<MyDateObject> Data
        {
            get
            {
                return this._data;
            }
            set
            {
                if ( this._data != value )
                {
                    this._data = value;
                    this.OnPropertyChanged( "Data" );
                }
            }
        }

  8. Dan
    Dan avatar
    202 posts
    Member since:
    May 2006

    Posted 18 Jul 2011 Link to this post

    I found the problem with this code. All of the YValues were being assigned to the same XCategory value.  By assigning unique values to the Xlabel variable, I got the result that I was looking for.
    Dan
Back to Top
UI for WPF is Visual Studio 2017 Ready