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

1 Answer 392 Views
Chart
Angus
Top achievements
Rank 1
Iron
Iron
Angus asked on 27 Sep 2022, 09:00 AM

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!

1 Answer, 1 is accepted

Sort by
1
Antoan
Telerik team
answered on 29 Sep 2022, 04:19 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Angus
Top achievements
Rank 1
Iron
Iron
commented on 30 Sep 2022, 06:27 AM

Thanks Antoan, this is perfect :)
Angus
Top achievements
Rank 1
Iron
Iron
commented on 30 Sep 2022, 07:40 AM | edited

Nevermind, solved the issue I was having when I first wrote this comment :D
Antoan
Telerik team
commented on 30 Sep 2022, 01:41 PM

Hi Angus,

I am glad you managed to resolve the issue.

Let me know if you need any further assistance.

Tags
Chart
Asked by
Angus
Top achievements
Rank 1
Iron
Iron
Answers by
Antoan
Telerik team
Share this question
or