Chartview : StepLineSeries PointTemplate not refreshing after zoom

4 posts, 0 answers
  1. Sivakumar
    Sivakumar avatar
    27 posts
    Member since:
    Dec 2015

    Posted 29 Dec 2015 Link to this post

    my requirement :

    I am creating chart to display digital waveform output ( 0,1) for N number of points.I need to highlight only certain points(index).(see attached).

    I have done this with the help of Point template  and update done at code behind chart loaded event.This is working perfectly at loading . But after zooming the highlighting point is moved from one point another point and it is not refreshed properly.Please see below code.

    Please help to fix this issue...

     

      <Grid><br>        <telerik:RadCartesianChart Height="1" Loaded="RadCartesianChart_Loaded" Palette="Arctic" ZoomChanged="RadCartesianChart_ZoomChanged"><br>            <telerik:RadCartesianChart.HorizontalAxis><br>                <telerik:CategoricalAxis VerticalLocation="Top" Visibility="Visible" LabelFitMode="None" LabelRotationAngle="-90"  /><br>            </telerik:RadCartesianChart.HorizontalAxis><br>            <telerik:RadCartesianChart.VerticalAxis><br>                <telerik:LinearAxis  Minimum="-1" Maximum="2" MajorStep="1"  MajorTickOffset="5" ElementBrush="Orange" /><br>            </telerik:RadCartesianChart.VerticalAxis><br>            <telerik:RadCartesianChart.Series><br>                <telerik:StepLineSeries><br>                    <telerik:StepLineSeries.DataPoints><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="0"/><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="0"/><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="0"/><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="1" /><br>                        <telerik:CategoricalDataPoint Value="0" /><br>                        <telerik:CategoricalDataPoint Value="0"/><br>                        <telerik:CategoricalDataPoint Value="1"/><br>                        <telerik:CategoricalDataPoint Value="0" /><br><br>                    </telerik:StepLineSeries.DataPoints><br><br>                    <telerik:StepLineSeries.PointTemplate><br>                        <DataTemplate ><br>                            <StackPanel><br>                                <!--Fill="{Binding Presenter, Converter={StaticResource SeriesToPaletteColorConverter}}"--><br>                                <Rectangle Height="126"  Width="10"     Stroke="Transparent" Fill="Transparent"  /><br>                            </StackPanel><br>                            <!--<DataTemplate.Triggers><br>                                <DataTrigger  Value="1"  Binding="{Binding Index}" ><br>                                    <Setter Property="Opacity" Value="0.01" /><br>                                </DataTrigger><br>                            </DataTemplate.Triggers>--><br>                        </DataTemplate><br>                    </telerik:StepLineSeries.PointTemplate><br>                </telerik:StepLineSeries><br>            </telerik:RadCartesianChart.Series><br><br>            <telerik:RadCartesianChart.Behaviors><br>                <telerik:ChartPanAndZoomBehavior x:Name="panZoomBehavior"    Changed="panZoomBehavior_Changed" ><br>                </telerik:ChartPanAndZoomBehavior><br>            </telerik:RadCartesianChart.Behaviors><br>            <telerik:RadCartesianChart.Resources><br>                <local:SeriesToPaletteColorConverter x:Key="SeriesToPaletteColorConverter" /><br>            </telerik:RadCartesianChart.Resources><br>            <telerik:RadCartesianChart.Grid><br>                <telerik:CartesianChartGrid MajorLinesVisibility="XY" StripLinesVisibility="XY" IsTabStop="False" IsManipulationEnabled="False" ><br>                    <telerik:CartesianChartGrid.YStripeBrushes><br>                        <SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" /><br>                        <SolidColorBrush Color="Transparent" /><br>                    </telerik:CartesianChartGrid.YStripeBrushes><br><br>                    <telerik:CartesianChartGrid.XStripeBrushes><br>                        <SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" /><br>                        <SolidColorBrush Color="Transparent" /><br>                    </telerik:CartesianChartGrid.XStripeBrushes><br><br>                </telerik:CartesianChartGrid><br>            </telerik:RadCartesianChart.Grid><br>            <telerik:RadCartesianChart.SelectionPalette><br>                <telerik:ChartPalette><br>                    <telerik:ChartPalette.GlobalEntries><br>                        <telerik:PaletteEntry Fill="Red" /><br>                    </telerik:ChartPalette.GlobalEntries><br>                </telerik:ChartPalette><br>            </telerik:RadCartesianChart.SelectionPalette><br>        </telerik:RadCartesianChart><br>    </Grid>

     

       

    private void RadCartesianChart_Loaded(object sender, RoutedEventArgs e)<br>        {<br><br>            RadCartesianChart chart = (RadCartesianChart)sender;<br>            StepLineSeries series = chart.Series.FirstOrDefault() as StepLineSeries;<br><br>            //Get the Content Presenter of the series<br><br>            var pointPresenter1 = series.ChildrenOfType<ContentPresenter>().ToList();<br>            int count = 0;<br>            pointPresenter1.ForEach(x =><br>            {<br>                var ellipseElement1 = x.ChildrenOfType<Rectangle>().FirstOrDefault();<br><br>                //Logic from view model to decide which index need to be higlighted<br>                if (count % 2 == 0 && ellipseElement1 != null)<br>                    ellipseElement1.Fill = new SolidColorBrush(Colors.Red);<br>                count++;<br>            });<br>           <br>        }<br><br>        private void panZoomBehavior_Changed(object sender, EventArgs e)<br>        {<br>           <br>        }<br><br>        private void RadCartesianChart_ZoomChanged(object sender, ChartZoomChangedEventArgs e)<br>        {<br>            <br>        }

  2. Sivakumar
    Sivakumar avatar
    27 posts
    Member since:
    Dec 2015

    Posted 29 Dec 2015 in reply to Sivakumar Link to this post

    Sorry Please find proper code below..

    <telerik:RadCartesianChart Height="1" Loaded="RadCartesianChart_Loaded" Palette="Arctic" >
               <telerik:RadCartesianChart.HorizontalAxis>
                   <telerik:CategoricalAxis VerticalLocation="Top" Visibility="Visible" LabelFitMode="None" LabelRotationAngle="-90"  />
               </telerik:RadCartesianChart.HorizontalAxis>
               <telerik:RadCartesianChart.VerticalAxis>
                   <telerik:LinearAxis  Minimum="-1" Maximum="2" MajorStep="1"  MajorTickOffset="5" ElementBrush="Orange" />
               </telerik:RadCartesianChart.VerticalAxis>
               <telerik:RadCartesianChart.Series>
                   <telerik:StepLineSeries>
                       <telerik:StepLineSeries.DataPoints>
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="0"/>
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="0"/>
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="0"/>
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="1" />
                           <telerik:CategoricalDataPoint Value="0" />
                           <telerik:CategoricalDataPoint Value="0"/>
                           <telerik:CategoricalDataPoint Value="1"/>
                           <telerik:CategoricalDataPoint Value="0" />
     
                       </telerik:StepLineSeries.DataPoints>
     
                       <telerik:StepLineSeries.PointTemplate>
                           <DataTemplate >
                               <StackPanel>
                                   <!--Fill="{Binding Presenter, Converter={StaticResource SeriesToPaletteColorConverter}}"-->
                                   <Rectangle Height="126"  Width="10"     Stroke="Transparent" Fill="Transparent"  />
                               </StackPanel>
                               <!--<DataTemplate.Triggers>
                                   <DataTrigger  Value="1"  Binding="{Binding Index}" >
                                       <Setter Property="Opacity" Value="0.01" />
                                   </DataTrigger>
                               </DataTemplate.Triggers>-->
                           </DataTemplate>
                       </telerik:StepLineSeries.PointTemplate>
                   </telerik:StepLineSeries>
               </telerik:RadCartesianChart.Series>
     
               <telerik:RadCartesianChart.Behaviors>
                   <telerik:ChartPanAndZoomBehavior x:Name="panZoomBehavior"    >
                   </telerik:ChartPanAndZoomBehavior>
               </telerik:RadCartesianChart.Behaviors>
    </telerik:RadCartesianChart>

    private void RadCartesianChart_Loaded(object sender, RoutedEventArgs e)
           {
     
               RadCartesianChart chart = (RadCartesianChart)sender;
               StepLineSeries series = chart.Series.FirstOrDefault() as StepLineSeries;
     
               //Get the Content Presenter of the series
     
               var pointPresenter1 = series.ChildrenOfType<ContentPresenter>().ToList();
               int count = 0;
               pointPresenter1.ForEach(x =>
               {
                   var ellipseElement1 = x.ChildrenOfType<Rectangle>().FirstOrDefault();
     
                   //Logic from view model to decide which index need to be higlighted
                   if (count % 2 == 0 && ellipseElement1 != null)
                       ellipseElement1.Fill = new SolidColorBrush(Colors.Red);
                   count++;
               });
               
           }

     

  3. UI for WPF is Visual Studio 2017 Ready
  4. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 31 Dec 2015 Link to this post

    Hello Sivakumar,

    Thank you for the runnable code snippets.

    The reported behavior is caused by the fact that RadChartView has a built-in UI virtualization. When you zoom in/out or scroll the ContentPresenters with the Ellipses inside of them are reused to display other data points. 

    To achieve your requirement you can bind the Fill property in the PointTemplate to a property from the data point's model. This could be a property from the custom business object which is bound to the chart. Or if there is no data binding as in your case you can use the CollectionIndex property of the CategoricalDataPoint object with an IValueConverter. Here is an example for this approach:
    <telerik:StepLineSeries.PointTemplate>
        <DataTemplate>
            <Rectangle Height="126" 
                       Width="10"    
                       Stroke="Transparent"
                       Fill="{Binding RelativeSource={RelativeSource Self}, Path=DataContext.CollectionIndex, Converter={StaticResource indexToBrushConverter}}" />
        </DataTemplate>
    </telerik:StepLineSeries.PointTemplate>
    .
    public class IndexToBrushConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                var index = (int)value;
                return index % 2 == 0 ? Brushes.Red : Brushes.Transparent;
            }
     
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }
    Please try this approach 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
  5. Sivakumar
    Sivakumar avatar
    27 posts
    Member since:
    Dec 2015

    Posted 03 Jan in reply to Martin Link to this post

    Thanks Martin ....This is working..
Back to Top