Telerik Forums / UI for Silverlight Forum / Chart /

Binding multiple series

Telerik UI for Silverlight
Resources Buy Try

10 posts, 0 answers

Brendan

34 posts

Member since:
Oct 2010

Posted 17 Jan 2011 Link to this post

Hello, I've been struggling with this for a while now and just wanted to now if it's possible to draw a chart using a list of series, each containing a list of values. For example the classes below:

    public class Series
    {
        public string Name { get; set; }
        public List<Values> Values { get; set; }
    }

    public class Values
    {
        public DateTime Timestamp { get; set; }
        public double Value { get; set; }
    }

If I then have a View Model like:

    public class ViewModel
    {
        public List<Series> Series { get; set; }
    }

and set the Chart.ItemsSource = viewModel.Series, how can I get a line chart to draw each series as a line and show in the legend as the series Name?
Yavor
Admin

11 posts

Posted 19 Jan 2011 Link to this post

Hi Brendan,

You can use a DataContext, to pass the data from the ViewModel to the chart control. A very similar sample is demonstrated in the following location:

http://demos.telerik.com/silverlight/#Chart/MVVM

I hope this gets you started properly.

Regards,
Yavor
the Telerik team

Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Brendan

34 posts

Member since:
Oct 2010

Posted 19 Jan 2011 Link to this post

Sorry you misunderstand, my question is not about simply binding the charts itemsource, it is about binding to a collection of objects as series each with they're own collection of values. Your given example has only the top level collection in ViewModel, not the child collection of values within the Series class.

The only way I've managed to do it so far is to convert into a nested collection and use a converter to create my series mappings using collectionIndex. I would rather use the original objects rather than have to convert to nested collection.
Yavor
Admin

11 posts

Posted 25 Jan 2011 Link to this post

Hi Brendan,

Indeed, in such a case you would need to convert the underlying datasource, and use the collection index to properly bind the control.

Regards,
Yavor
the Telerik team

Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Jurie

6 posts

Member since:
Feb 2009

Posted 27 Jan 2011 Link to this post

Hi,

Is it possible to provide an example off how to accomplish this.

I am experiencing the exact same problem , what I am trying to achieve is the following:

Dataobjects:

public class StudyData

{

    private List<StudyItem> _items;

    public List<StudyItem> Items

    {

        get { return _items ?? (_items = new List<StudyItem>()); }

        set { _items = value; }

    }

    public string ItemName { get; set; }

}

public class StudyItem

{

    public DateTime Date { get; set; }

    public double Value { get; set; }

}

Property in ViewModel:

private ObservableCollection<StudyData> _studyData;

public ObservableCollection<StudyData> StudyData

{

    get

    {

        return _studyData ?? (_studyData = new ObservableCollection<StudyData>());

    }

    set

    {

        if (_studyData == value) return;

        _studyData = value;

        RaisePropertyChanged("StudyData");

    }

}

and then I'd like to do something like the following in xaml:

<telerik:RadChart ItemsSource="{Binding StudyData}"/>

with each StudyData object being represented as a seperate series.
Jurie

6 posts

Member since:
Feb 2009

Posted 27 Jan 2011 Link to this post

see
http://www.telerik.com/community/forums/silverlight/chart/possible-to-bind-to-seriesmapping.aspx

which is another attempt at achieving the same result, but which doesn't work due to the chart throwing exceptions.
Jurie

6 posts

Member since:
Feb 2009

Posted 27 Jan 2011 Link to this post

Just for in case someone else tries accomplishing the same thing:

Binding the seriesmappings is futile(read: bugged). Instead, make use of groupingsettings, and adjust your collection manually in a converter - like this:

<telerik:RadChart ItemsSource="{Binding StudyData, Converter={StaticResource SourceDataConverter}}" >

      <telerik:RadChart.SeriesMappings>

          <telerik:SeriesMapping>

              <telerik:SeriesMapping.SeriesDefinition>

                  <telerik:BarSeriesDefinition />

              </telerik:SeriesMapping.SeriesDefinition>

              <telerik:SeriesMapping.GroupingSettings>

                  <telerik:GroupingSettings ShouldCreateSeriesForLastGroup="True">

                      <telerik:GroupingSettings.GroupDescriptors>

                          <telerik:ChartGroupDescriptor Member="ItemName"/>

                      </telerik:GroupingSettings.GroupDescriptors>

                  </telerik:GroupingSettings>

              </telerik:SeriesMapping.GroupingSettings>

              <telerik:SeriesMapping.ItemMappings>

                  <telerik:ItemMapping FieldName="Value" DataPointMember="YValue" />

                  <telerik:ItemMapping FieldName="Date" DataPointMember="XCategory" />

              </telerik:SeriesMapping.ItemMappings>

          </telerik:SeriesMapping>

      </telerik:RadChart.SeriesMappings>

      <telerik:RadChart.DefaultView>

          <telerik:ChartDefaultView ChartLegendPosition="Bottom">

              <telerik:ChartDefaultView.ChartTitle>

                  <telerik:ChartTitle HorizontalContentAlignment="Stretch" Content="Item values"/>

              </telerik:ChartDefaultView.ChartTitle>

              <telerik:ChartDefaultView.ChartLegend>

                  <telerik:ChartLegend x:Name="chartLegend"/>

              </telerik:ChartDefaultView.ChartLegend>

              <telerik:ChartDefaultView.ChartArea>

                  <telerik:ChartArea x:Name="chartArea" LegendName="chartLegend" EnableAnimations="True">

                      <telerik:ChartArea.AxisX>

                          <telerik:AxisX LayoutMode="Inside" IsDateTime="True" DefaultLabelFormat="MM yyy" AutoRange="True"

                                                             LabelRotationAngle="60" LabelStep="1" TicksDistance="15"/>

                      </telerik:ChartArea.AxisX>

                  </telerik:ChartArea>

              </telerik:ChartDefaultView.ChartArea>

          </telerik:ChartDefaultView>

      </telerik:RadChart.DefaultView>

  </telerik:RadChart>

Converter:

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

    IList<StudyData> data = value as Collection<StudyData>;

    if (data == null || data.Count == 0) return null;

    IList<StudyItem> items = new List<StudyItem>();

    data.ToList().ForEach(study => study.Items.ForEach(item =>

                                                           {

                                                               item.ItemName = study.ItemName;

                                                               items.Add(item);

                                                           }));

    return items;

}
Giuseppe
Admin

2363 posts
Posted 28 Jan 2011 Link to this post

Hello Jurie,

Find attached a sample application that demonstrates RadChart.SeriesMappings bindings.

Should your problem persist, please open a formal support ticket and send us a runnable sample application that we can investigate locally and advise you how to proceed.

Best wishes,
Giuseppe
the Telerik team

Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>

SeriesMappingViaBinding-mod.zip
Jurie

6 posts

Member since:
Feb 2009

Posted 28 Jan 2011 Link to this post

Thank you very much!

So returning your series in a SeriesMappingCollection was the missing link.

Very much appreciated.
müller

3 posts

Member since:
Aug 2010

Posted 04 May 2011 Link to this post

Hi,

your example doesn't show the LegendLabel.

Why?

Binding multiple series

Brendan

Yavor

Brendan

Yavor

Jurie

Jurie

Jurie

Giuseppe

Jurie

müller