ChartSeriesProvider change SeriesColor at runtime

8 posts, 0 answers
  1. Markus
    Markus avatar
    42 posts
    Member since:
    Nov 2012

    Posted 17 Sep 2013 Link to this post

    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
  2. Markus
    Markus avatar
    42 posts
    Member since:
    Nov 2012

    Posted 17 Sep 2013 Link to this post

    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>




  3. UI for WPF is Visual Studio 2017 Ready
  4. Markus
    Markus avatar
    42 posts
    Member since:
    Nov 2012

    Posted 19 Sep 2013 Link to this post

    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
  5. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 19 Sep 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Markus
    Markus avatar
    42 posts
    Member since:
    Nov 2012

    Posted 20 Sep 2013 Link to this post

    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
  7. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 20 Sep 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  8. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 20 Sep 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  9. Markus
    Markus avatar
    42 posts
    Member since:
    Nov 2012

    Posted 22 Sep 2013 Link to this post

    Perfect,
    thank you!

    Regards Markus
Back to Top
UI for WPF is Visual Studio 2017 Ready