Binding multiple series

[Brendan]

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]

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

[Brendan]

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]

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

[Jurie]

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]

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]

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]

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

[Jurie]

Thank you very much!

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

Very much appreciated.

[müller]

Hi,

your example doesn't show the LegendLabel.

Why?