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
0
Sivakumar
Top achievements
Rank 1
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
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:
.
Please try this approach and let me know if it works for you.
Regards,
Martin
Telerik
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(); } }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
Rank 1
answered on 04 Jan 2016, 03:49 AM
Thanks Martin ....This is working..