Is it possible to add series to a chart control dynamically from the code behind?

[Angus]

I have a situation where the number of series visible on a Cartesian Chart will be controlled by some other switch / check box list that selects which series to show on the graph. 

I have defined a basic class for each series like so: 

public class LineSeriesData
{
	public Color Colour { get; set; }
	public ObservableCollection<LineDataPoint> DataSet { get; set; }
}

public class LineDataPoint
{
	public double Value;
	public object Category;
}

The VM for the control that uses the graph will then have a collection of the LineSeriesData class that I'd like to bind to the graph as individual LineSeries like in the documentation example, but I can't work out how the binding would work in the xaml as there's no datatemplate like interface to handle a collection of line series, just individual properties. 

 <telerik:RadCartesianChart.Series>
      <telerik:LineSeries 
                       Stroke="{Binding Colour}"
                       ValueBinding="Value"
                       CategoryBinding="Category"
                       ItemsSource="{Binding DataSet}" />
      <telerik:LineSeries 
                       Stroke="{Binding Colour}"
                       ValueBinding="Value"
                       CategoryBinding="Category"
                       ItemsSource="{Binding DataSet}" />
  </telerik:RadCartesianChart.Series>

I also tried looping through the collection and adding series manually in the code behind but this doesn't seem to work either. The chart just displays No Data message. 

foreach (var item in DataSeries)
{
	var series = new LineSeries
	{
		Stroke = item.Colour,
		ItemsSource = item.DataSet
	};

	series.ValueBinding.PropertyName = "Value";
	series.CategoryBinding.PropertyName = "Category";
	MyChart.Series.Add(series);
};		

 

Is there a way to bind to a collection of series or do we have to have individual properties for each one on the VM? If they have to be individual properties, how would I go about hiding / showing a series?

Thanks!

[Antoan]

Hi Angus,

Regarding the question of a way to bind to a collection of series. What you are searching for is a SeriesProvider, however we do not yet have that functionality. I have logged a feature request on your behalf, you can vote and follow it to see when its status gets updated.

Solution: 

Currently you are unable to see any data as the Property Binding isn't done correctly, here is how it should look:

foreach (var item in DataSeries)
{
    var series = new LineSeries
    {
        Stroke = item.Colour,
        ItemsSource = item.DataSet
    };

    series.ValueBinding = new PropertyNameDataPointBinding("Value");
    series.CategoryBinding = new PropertyNameDataPointBinding("Category");
    MyChart.Series.Add(series);
};

 

In addition, we have created a demo project for you replicating the scenario, find it attached to my reply. Here's what it looks like after you click the "Add Series" button:

I hope this information helps.

Regards,
Antoan
Progress Telerik

[Angus]

Thanks Antoan, this is perfect :)

[Angus]

Nevermind, solved the issue I was having when I first wrote this comment :D

[Antoan]

Hi Angus,

I am glad you managed to resolve the issue.

Let me know if you need any further assistance.