ChartSeriesProvider change SeriesColor at runtime

[Klemens]

Hi,
I'm using MvvM and the RadCartesianChart.
I bind the series to a list of business objects of that kind:

public class MainViewModel
{
    public ObservableCollection<DataObject> Data{get;set;}
    ...
}


public class DataObject
{
    public string Name { get; set; }
    public ObservableCollection<DataPair> Data { get; set; }
}

public class DataPair
{
    public DateTime Time { get; set; }
    public double Value { get; set; }
}

In my View:

<telerik:RadCartesianChart.SeriesProvider>
    <telerik:ChartSeriesProvider Source="{Binding Data}">
        <telerik:ChartSeriesProvider.SeriesDescriptors>
            <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Data" ValuePath="Value" CategoryPath="Time">
                <telerik:CategoricalSeriesDescriptor.Style>
                    <Style TargetType="telerik:LineSeries">
                        <Setter Property="RenderMode" Value="Light"/>
                    </Style>
                </telerik:CategoricalSeriesDescriptor.Style>
            </telerik:CategoricalSeriesDescriptor>
        </telerik:ChartSeriesProvider.SeriesDescriptors>
    </telerik:ChartSeriesProvider>
</telerik:RadCartesianChart.SeriesProvider>

How is it possible to change the color of each series at runtime.
If I put a Setter on the Stroke Property I got an exception: NullReferenceException


Regards Markus

[Klemens]

Hi,
I have further problems.
In my example I want to change the Stroke, StrokeThickness and ShowLabels Property of each LineSeries.
Only the ShowLabel property is working well. The Stroke property is giving me an error and the StrokeThickness only works when RenderMode is set to Full. But loading data into the chart takes me too long. Here is my slightly changed code:

public class DataObject : PropertyChangedBase
{
    public string Name { get; set; }
    public ObservableCollection<DataPair> Data { get; set; }

    private Brush seriesBrush = Brushes.Orange;

    public Brush SeriesBrush
    {
        get
        {
            return seriesBrush;
        }
        set
        {
            seriesBrush = value;
            NotifyOfPropertyChange("SeriesBrush");
        }
    }

    private bool seriesShowLabels;

    public bool SeriesShowLabels
    {
        get
        {
            return seriesShowLabels;
        }
        set
        {
            seriesShowLabels = value;
            NotifyOfPropertyChange("SeriesShowLabels");
        }
    }

    private double seriesStrokeThikness = 2;

    public double SeriesStrokeThikness
    {
        get
        {
            return seriesStrokeThikness;
        }
        set
        {
            seriesStrokeThikness = value;
            NotifyOfPropertyChange("SeriesStrokeThikness");
        }
    }

    private double cursorValue;

    public double CursorValue
    {
        get
        {
            return cursorValue;
        }
        set
        {
            cursorValue = value;
            NotifyOfPropertyChange("CursorValue");
        }
    }
}

<telerik:RadCartesianChart.SeriesProvider>
    <telerik:ChartSeriesProvider Source="{Binding Data}">
        <telerik:ChartSeriesProvider.SeriesDescriptors>
            <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Data" ValuePath="Value" CategoryPath="Time">
                <telerik:CategoricalSeriesDescriptor.Style>
                    <Style TargetType="telerik:LineSeries">
                        <Setter Property="RenderMode" Value="Light"/>
                        <Setter Property="ShowLabels" Value="{Binding SeriesShowLabels}"/>
                        <Setter Property="StrokeThickness" Value="{Binding SeriesStrokeThikness}"/>
                        <Setter Property="Stroke" Value="{Binding SeriesBrush}"/>
                    </Style>
                </telerik:CategoricalSeriesDescriptor.Style>
            </telerik:CategoricalSeriesDescriptor>
        </telerik:ChartSeriesProvider.SeriesDescriptors>
    </telerik:ChartSeriesProvider>
</telerik:RadCartesianChart.SeriesProvider>

[Klemens]

Hi,
small update.
The binding to the properties Stroke and StrokeThickness only works when RenderMode is set to Full.
Beyond you have to delete the Palette property in the CartesianChart to set the strokebrush.
Are these features not allowed in RenderMode=Light?

Regards Markus

[Petar Kirov]

Hi Markus,

1. Yes the StrokeThickness property works only in Full RenderMode. This is expected and is a limitation of the light rendering mode.
2. I am not sure why you are experiencing problems by setting the Stroke mode property. I have created a test project based on your sample code, but no error occurs. I have attached the project below for reference.
3. If the Palette property is set, palette colors override user-defined ones.

If problem persist, it would be helpful if you could provide a runable project (perhaps a modified version of the attached one) that reproduces the exception, so we can investigate it.
 
Regards,
Petar Kirov
Telerik

[Klemens]

Thank you for your help.
I have changed the sample to my conditions with the error.
All you have to do is not to add the series on start in the constructor, but at a later time.
In my example on a button click. Then the error occurs in the LineSeries.cs at:

this.chart.chartArea.Invalidate(ChartAreaInvalidateFlags.All); Line 228

because of this.chart = null.

Where can i upload the example?

Regards Markus

[Petar Kirov]

Hi Markus,

To be able to attach files, you will need to open a support ticket. In addition to the ability to attach files, support tickets get higher priority - meaning faster response time.

As for the bug - I was able to reproduce it by adding a new item to the Series collection of the ChartViewModel. I have logged it in our Public Issue Tracker on this link and I have notified our development team about it.

I have updated your Telerik points for pointing this issue to us.

Regards,
Petar Kirov
Telerik

[Petar Kirov]

Hi Markus,

A small update on the issue - you can workaround it by setting the DataContext of the series to null before adding a new one:

foreach (var series in this.chart.Series)
{
    series.DataContext = null;
}
var vm = this.DataContext as ChartViewModel;
vm.Series.Add(new SeriesViewModel());
vm.Series[0].SeriesBrush = Brushes.Magenta;

Regards, Petar Kirov
Telerik

[Klemens]

Perfect,
thank you!

Regards Markus