How to set the pointtemplate 's fill color of lineseries when use ChartSeriesProvider

5 posts, 1 answers
  1. Nannan
    Nannan avatar
    3 posts
    Member since:
    Feb 2015

    Posted 14 Sep 2015 Link to this post

    The code is here.

                            <telerik:RadCartesianChart Zoom="10,1" MaxZoom="20,1000" PanOffset="-10000,0" x:Name="CurveCartesianChart" Palette="Flower" Margin="10" MouseRightButtonDown="CurveCartesianChart_MouseRightButtonDown">
                                <telerik:RadCartesianChart.HorizontalAxis>
                                    <telerik:CategoricalAxis ShowLabels="True" LabelInterval="5"></telerik:CategoricalAxis>
                                </telerik:RadCartesianChart.HorizontalAxis>
                                <telerik:RadCartesianChart.VerticalAxis>
                                    <telerik:LinearAxis ShowLabels="True"></telerik:LinearAxis>
                                </telerik:RadCartesianChart.VerticalAxis>
                                <telerik:RadCartesianChart.SeriesProvider>
                                    <telerik:ChartSeriesProvider Source="{Binding CurveDataDicList}">
                                        <telerik:ChartSeriesProvider.SeriesDescriptors>
                                            <telerik:CategoricalSeriesDescriptor CategoryPath="XValue"
                                                                 ValuePath="YValue"
                                                                 ItemsSourcePath="Points">
                                                <telerik:CategoricalSeriesDescriptor.Style>
                                                    <Style TargetType="telerik:LineSeries">
                                                        <Setter Property="StrokeThickness" Value="2"/>
                                                        <Setter Property="PointTemplate">
                                                            <Setter.Value>
                                                                <DataTemplate>
                                                                    <Ellipse Height="7" Width="7" Stroke="White" Fill="{Binding LineStroke, Mode=TwoWay}"/>
                                                                </DataTemplate>
                                                            </Setter.Value>
                                                        </Setter>
                                                        <Setter Property="LegendSettings">
                                                            <Setter.Value>
                                                                <telerik:SeriesLegendSettings Title="{Binding Name}" />
                                                            </Setter.Value>
                                                        </Setter>
                                                               
                                                    </Style>
                                                </telerik:CategoricalSeriesDescriptor.Style>
                                            </telerik:CategoricalSeriesDescriptor>
                                        </telerik:ChartSeriesProvider.SeriesDescriptors>                                   
                                    </telerik:ChartSeriesProvider>
                                   
                                </telerik:RadCartesianChart.SeriesProvider>                          
                               
                            </telerik:RadCartesianChart>

    I want the LineStroke here in the pointtemplate is the line's color, but I can't get it.

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 16 Sep 2015 Link to this post

    Hi Nannan,

    The data context passed in the PointTemplate of the chart's series is an object of type that derives from the DataPoint class. For example, the LineSeries uses CategoricalDataPoint objects and the ScatterLineSeries, ScatterDataPoint. This model describes the data point (size, position, presenter, etc.) and it expose a property that holds its view model - the DataItem proeprty. If the LineStroke property is defined in the view model of the data points you can use the following syntax to get it in the PointTemplate:
    <Setter Property="PointTemplate">
        <Setter.Value>
            <DataTemplate>
                <Ellipse Height="7" Width="7" Stroke="White" Fill="{Binding DataItem.LineStroke, Mode=TwoWay}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    However, if LineStroke is a property of the series view model you can use the Presenter property (which points to the series) to get the model.
    <Ellipse Height="7" Width="7" Stroke="White" Fill="{Binding Presenter.DataContext.LineStroke, Mode=TwoWay}"/>
    Please try this and let me know if it works for you.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Nannan
    Nannan avatar
    3 posts
    Member since:
    Feb 2015

    Posted 17 Sep 2015 in reply to Martin Link to this post

    Martin, Thank you for you Reply, I have tried the both solution, But it doesn't work , I didn't defined the line's color in my viewmodel, I want use the line color in Palette  to fill the line's DataPoint, Is I make it clear enough

    Add the Source of  defined ChartSeriesProvider here, hope you can help me again,

        blic ObservableCollection<CurveDataUnit> CurveDataDicList { get; set; }
        public class CurveDataUnit
        {
            public string Name { get; set; }
            public ObservableCollection<PointPairData> Points { get; set; }
        }

        public class PointPairData
        {
            public int CurCycle { get; set; }
            public int CycleOffset { get; set; } 
            public string XName { get; set; } 
            public string YName { get; set; } 
            public int XValue { get; set; } 
            public int YValue { get; set; } 
            public int XValueBackUp { get; set; } 
            public string XNameBackUp { get; set; }
            public VarInfo var { get; set; }
        }

  5. Answer
    Martin
    Admin
    Martin avatar
    1101 posts

    Posted 22 Sep 2015 Link to this post

    Hello Nannan,

    Correct me if I am wrong - you have a palette defined for the chart and you want to bind the fill of the data point visual (the ellipse) to the stroke of the series line that comes from the palette? If so, you can use an IValueConverter and the chart Palette's GetEntry() method. Here is an example for this approach:
    <Setter Property="PointTemplate">
        <Setter.Value>
            <DataTemplate>
                <Ellipse Width="7" Height="7" Fill="{Binding Presenter, Converter={StaticResource seriesToPaletteColorConverter}}" />
            </DataTemplate>
        </Setter.Value>
    </Setter>

    public class SeriesToPaletteColorConverter : IValueConverter
    {      
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var series = (CartesianSeries)value;           
            var chart = (RadCartesianChart)series.Chart;           
            var seriesIndex = chart.Series.IndexOf(series);
     
            var entry = chart.Palette.GetEntry(series, seriesIndex);
     
            if (entry.HasValue)
            {
                return entry.Value.Stroke ?? entry.Value.Fill;
            }
            return null;
        }
     
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    Please give this approach a try and let me know if it works for you.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Nannan
    Nannan avatar
    3 posts
    Member since:
    Feb 2015

    Posted 29 Sep 2015 Link to this post

    Hello Martin, I have tried your solution, it worked. thank you very much for your help. please recieve my sincere gratitude. Hope to have more chances to consult you in the future.
Back to Top
UI for WPF is Visual Studio 2017 Ready