This is a migrated thread and some comments may be shown as answers.

Binding multiple series

9 Answers 228 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Brendan
Top achievements
Rank 1
Brendan asked on 17 Jan 2011, 06:43 AM
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?

9 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 19 Jan 2011, 09:02 AM
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>>
0
Brendan
Top achievements
Rank 1
answered on 20 Jan 2011, 01:08 AM
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.
0
Yavor
Telerik team
answered on 25 Jan 2011, 08:50 AM
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>>
0
Jurie
Top achievements
Rank 1
answered on 27 Jan 2011, 06:08 PM
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.
0
Jurie
Top achievements
Rank 1
answered on 27 Jan 2011, 06:18 PM
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.
0
Jurie
Top achievements
Rank 1
answered on 27 Jan 2011, 10:26 PM
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;
}

0
Giuseppe
Telerik team
answered on 28 Jan 2011, 11:34 AM
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>>
0
Jurie
Top achievements
Rank 1
answered on 28 Jan 2011, 01:55 PM
Thank you very much!

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

Very much appreciated.
0
müller
Top achievements
Rank 1
answered on 04 May 2011, 02:54 PM

Hi,

your example doesn't show the LegendLabel.

Why? 

Tags
Chart
Asked by
Brendan
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Brendan
Top achievements
Rank 1
Jurie
Top achievements
Rank 1
Giuseppe
Telerik team
müller
Top achievements
Rank 1
Share this question
or