Using ChartDataSourceStyle breaks DefaultVisualStyle DataItem binding

[Thom]

I'm using a DefaultVisualStyle Property to set the style in order to control the Fill color of ScatterPointSeries via the DataItem.PointColor property (as seen below)

This works fine, but when I try to use a ChartDataSourceStyle to reduce the number of datapoints using Index-based sampling, something breaks and I no longer see ANY points displayed in the graph, due to this binding failure:

Path Tag.DataItem.PointColor Path.Fill Brush PointColor property not found on object of type DataPointSamplingInfo.

 

** How can I redirect the DataPointSamplingInfo points to use the PointColor of its DataItems (they'll all have the same value) **

<Style x:Key="ScatterPointStyle" TargetType="Path" >
            <Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag.DataItem.PointColor}"/>
</Style>

 

  <telerik:ChartSeriesProvider Source="{Binding ChartData}"  >
      <telerik:ChartSeriesProvider.SeriesDescriptors >

         <telerik:ScatterSeriesDescriptor XValuePath="SV"
                                                                         YValuePath="Depth"
                                                                         x:Name="DownCastPoints"
                                                                         ItemsSourcePath="ItemSelectionDown">
                                                            <telerik:ScatterSeriesDescriptor.Style>
                                                                <Style TargetType="telerik:ScatterPointSeries">
                                                                    <Setter Property="PointSize" Value="8,8"/>
                                                                    <Setter Property="Opacity" Value="0.8"/>
                                                                    <Setter Property="Visibility" Value="{Binding DownCastPointsVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                                                                    <Setter Property="DefaultVisualStyle" Value="{StaticResource ScatterPointStyle}"/>
                                                                </Style>
                                                            </telerik:ScatterSeriesDescriptor.Style>
                                                            <telerik:ScatterSeriesDescriptor.ChartDataSourceStyle>
                                                                <Style TargetType="telerik:ChartDataSource">
                                                                    <Setter Property="SamplingThreshold" Value="50" />
                                                                </Style>
                                                            </telerik:ScatterSeriesDescriptor.ChartDataSourceStyle>
                                                        </telerik:ScatterSeriesDescriptor>

[Stenly]

Hello Thom,

The observed behavior is expected when data sampling is applied.

Generally, when it is applied, several data point view models are combined into a single DataPoint In this case, the DataItem property will be of the type of DataPointSamplingInfo, which does not have information about the current data point. Rather, it holds a collection, through, which the separate data points can be retrieved.

More information on this can be found at the following link:

WPF ChartView - ChartDataSource (Data Sampling) - Telerik UI for WPF

With this being said, when using the DefaultVisualStyle property, the DataPointSamplingInfo instance will be set to the Tag property of the Path element. Via a Converter, you can bind to the Path element's Tag property, retrieve the PointColor property (from your data point model) and apply it, using the DataPointSamplingInfo's API.

The following code snippets show what I have in mind:

<telerik:ScatterSeriesDescriptor.Style>
    <Style TargetType="telerik:ScatterLineSeries">
        <Setter Property="StrokeThickness" Value="4" />
        <Setter Property="DefaultVisualStyle">
            <Setter.Value>
                <Style TargetType="Path">
                    <Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag, Converter={StaticResource XYValueToSolidColorBrushConverter}}"/>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</telerik:ScatterSeriesDescriptor.Style>
<telerik:ScatterSeriesDescriptor.ChartDataSourceStyle>
    <Style TargetType="telerik:ChartDataSource">
        <Setter Property="SamplingThreshold" Value="2" />
    </Style>
</telerik:ScatterSeriesDescriptor.ChartDataSourceStyle>

public class XYValueToSolidColorBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        ScatterDataPoint scatterDataPoint = (ScatterDataPoint)value;
        var collection = ((DataPointSamplingInfo)scatterDataPoint.DataItem).ToList();
        var dataItem = collection[scatterDataPoint.Index];

        if (dataItem != null)
        {
            return ((DataItem)dataItem).PointColor;
        }

        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The produced result is as follows:

I have attached a test application that contains the above suggestion's implementation, so, could you give it a try?

Regards,
Stenly
Progress Telerik

[Thom]

Hello Stenly,

Thanks for responding to my question, I'm going to work on implementing the first example as each point in the series can have one of two color states, so I can't bind to the series view model. This get confusing when binning data via SamplingInfo, but I think your sample code will guide me in the right direction

cheers,

Thom

[Stenly]

Hello Thom,

Further looking into this, the suggestion in my previous answer could be simplified. 

Since the DataContext of the Path element (that can be targeted via the DefaultVisualStyle property) will be the view model of the series. My idea is to define the color of the points on this level, so that you can directly bind to it, rather than following the approach from the other answer.

The following code snippets show what I have in mind with this suggestion:

//view model of each series
public class SeriesViewModel
{
    //property that holds the color of all the points in this series
    public SolidColorBrush PointsColor { get; set; }

    //collection that holds the data points 
    public ObservableCollection<DataItem> Items { get; set; }
}

 

<telerik:ChartSeriesProvider.SeriesDescriptors>
    <telerik:ScatterSeriesDescriptor XValuePath="XValue"  
                                     YValuePath="YValue"
                                     ItemsSourcePath="Items">
        <telerik:ScatterSeriesDescriptor.Style>
            <Style TargetType="telerik:ScatterLineSeries">
                <Setter Property="StrokeThickness" Value="4" />
                <Setter Property="DefaultVisualStyle">
                    <Setter.Value>
                        <Style TargetType="Path">
                            <Setter Property="Fill" Value="{Binding PointsColor}"/>
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
        </telerik:ScatterSeriesDescriptor.Style>
        <telerik:ScatterSeriesDescriptor.ChartDataSourceStyle>
            <Style TargetType="telerik:ChartDataSource">
                <Setter Property="SamplingThreshold" Value="2" />
            </Style>
        </telerik:ScatterSeriesDescriptor.ChartDataSourceStyle>
    </telerik:ScatterSeriesDescriptor>
</telerik:ChartSeriesProvider.SeriesDescriptors>

The produced result is as follows:

With this being said, I hope the provided information will be of help to you.

Regards,
Stenly
Progress Telerik