This is a migrated thread and some comments may be shown as answers.

Chartview : StepLineSeries PointTemplate not refreshing after zoom

3 Answers 40 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Sivakumar
Top achievements
Rank 1
Sivakumar asked on 29 Dec 2015, 06:14 AM

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>        }

3 Answers, 1 is accepted

Sort by
0
Sivakumar
Top achievements
Rank 1
answered on 29 Dec 2015, 06:22 AM

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++;
           });
           
       }

 

0
Martin Ivanov
Telerik team
answered on 31 Dec 2015, 02:52 PM
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
0
Sivakumar
Top achievements
Rank 1
answered on 04 Jan 2016, 03:49 AM
Thanks Martin ....This is working..
Tags
ChartView
Asked by
Sivakumar
Top achievements
Rank 1
Answers by
Sivakumar
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or