Telerik Forums
UI for WPF Forum
1 answer
49 views

I am using a RadCartesianChart with a ChartSeriesProvider to have multiple ScatterLineSeries plotted. I am controlling the X and Y min and max values displayed programmatically.

I am using a timer so I can change the X axis at some frequency I can set. I am testing it, but I intend to update the X min and max more than once a second so the chart shows a live previous 10 seconds. You can see points when they are created, then move through time until they go off the chart once it's more than 10 seconds old.

 

I am running into two problems.

I have 4 series. Each one is having points added about once a second. I run until I eventually get

'Collection was modified; enumeration operation may not execute.'

The call stack shows

   at System.ThrowHelper.ThrowInvalidOperationException(ExceptionResource resource)
   at System.Collections.Generic.List`1.Enumerator.MoveNextRare()
   at Telerik.Charting.DataPointCollection`1.<System.Collections.Generic.IEnumerable<Telerik.Charting.DataPoint>.GetEnumerator>d__5.MoveNext()
   at Telerik.Charting.NumericalAxisModel.PlotNormal(IEnumerable`1 series)
   at Telerik.Charting.NumericalAxisModel.PlotCore(AxisUpdateContext context)
   at Telerik.Charting.ChartAreaModelWithAxes.PlotAxisAndCombinedStrategy(AxisModel axis, AxisUpdateContext context)
   at Telerik.Charting.ChartAreaModelWithAxes.PlotAxesAndCombinedStrategies(SeriesByAxesTuple seriesByAxes)
   at Telerik.Charting.ChartAreaModelWithAxes.ArrangeOverride(RadRect rect)
   at Telerik.Charting.ChartNode.Arrange(RadRect rect, Boolean shouldRoundLayout)
   at Telerik.Charting.ChartAreaModel.Arrange()
   at Telerik.Windows.Controls.ChartView.RadChartBase.CallUpdateUI()
   at Telerik.Windows.Controls.ChartView.RadChartBase.OnInvalidated()

...

I think the chart is enumerating through the collection to see if it needs to update the axes every time a point is added. I am setting both axes myself as I have said so I'd think it wouldn't have to do that. If my assumption is correct, is there a way to turn this off? Otherwise should I look at locking the collection, or creating a buffer and adding chunks of data at a time? It does happen when there is just one series, and all 4 series.

 

 

Sorry to put two questions in here, but they may be related. I am wondering how much I am overloading the chart. Maybe it's not intended to have the axis updated super frequently so it's view/window moves through time.

The other problem relates to the band annotations I am using. They actually don't change, at least not when the chart is moving through time. I am setting vertical bands. The Y axis range only changes when values come in that are too high. But when that happens, the bands still stay the same. Both upper and lower bands' To and From don't change when the chart is moving through time.

''-1' is not a valid value for 'Width'.'

   at System.Windows.DependencyObject.SetValueCommon(DependencyProperty dp, Object value, PropertyMetadata metadata, Boolean coerceWithDeferredReference, Boolean coerceWithCurrentValue, OperationType operationType, Boolean isInternal) in System.Windows\DependencyObject.cs:line 812
   at System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value) in System.Windows\DependencyObject.cs:line 605
   at Telerik.Windows.Controls.ChartView.CartesianPlotBandAnnotation.UpdatePresenters(ChartLayoutContext context)
   at Telerik.Windows.Controls.ChartView.ChartAnnotation.Update(ChartLayoutContext context)
   at Telerik.Windows.Controls.ChartView.CartesianStrokedAnnotation.UpdateUICore(ChartLayoutContext context)
   at Telerik.Windows.Controls.ChartView.PresenterBase.UpdateUI(ChartLayoutContext context)
   at Telerik.Windows.Controls.ChartView.RadChartBase.UpdatePresenters(ChartLayoutContext context, List`1 presenters)
   at Telerik.Windows.Controls.ChartView.RadChartBase.UpdateUICore(ChartLayoutContext context)
   at Telerik.Windows.Controls.ChartView.PresenterBase.UpdateUI(ChartLayoutContext context)
   at Telerik.Windows.Controls.ChartView.RadChartBase.CallUpdateUI()
   at Telerik.Windows.Controls.ChartView.RadChartBase.OnInvalidated()
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs) in System.Windows.Threading\ExceptionWrapper.cs:line 59
   at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler) in System.Windows.Threading\ExceptionWrapper.cs:line 24
 ...

 

The chart bands shouldn't ever have -1 being set as their width. When this exception happens, none of my code is changing the bands. The properties the bands' To and From are bound to aren't changing. I haven't seen this happen when I just comment out the bands in xaml.

 

 

j
Top achievements
Rank 1
Iron
 answered on 31 Oct 2024
2 answers
38 views

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
Telerik team
 answered on 16 Oct 2024
1 answer
52 views

I need to display a dataset of a scanned item where the dataset is a list of 3D values (X, Y and Z)
I want the diagram to display the Image as be a top-down view, using X and Y coordinates from the dataset using the  the height (Z) to color encode the point using a color gradient.

Using a 3D RadCartesianChart3D component I have created something similar, see the attached RadCartesianChar3D image. 
What I need now is a 2D image, something like what I try to illustrate in the attached ColorEncodedItem image.

What I need to know, is what component I should use for this job. 
I expect that using a RadCartesianChart3D will be to CPU intensive for the platform I will be running this software on + I don't know, how to make a top-down view of a diagram using this component

Martin Ivanov
Telerik team
 answered on 08 Aug 2024
2 answers
59 views

Hi,

i found a sample:


    <Window.Resources>
        <local:DoubleToDateTimeLabelConverter x:Key="DoubleToDateTimeLabelConverter" />
    </Window.Resources>
    <Grid>
        <telerik:RadCartesianChart>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis>
                    <telerik:LinearAxis.LabelTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding StringFormat='h:MM tt', Converter={StaticResource DoubleToDateTimeLabelConverter}}" />
                        </DataTemplate>
                    </telerik:LinearAxis.LabelTemplate>
                </telerik:LinearAxis>
            </telerik:RadCartesianChart.HorizontalAxis>
            
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:CategoricalAxis />
            </telerik:RadCartesianChart.VerticalAxis>
            
            <telerik:LineSeries CategoryBinding="City" ValueBinding="StartTimeOA" ItemsSource="{Binding}" />
        </telerik:RadCartesianChart>
    </Grid>


        public MainWindow()
        {
            InitializeComponent();

            var Items = new ObservableCollection<PlotItemViewModel>();
            var dateTime = DateTime.Now;
            Items.Add(new PlotItemViewModel() { City = "Atlanta", StartTime = dateTime.AddMinutes(5) });
            Items.Add(new PlotItemViewModel() { City = "Atlanta", StartTime = dateTime.AddMinutes(10), });
            Items.Add(new PlotItemViewModel() { City = "New York", StartTime = dateTime.AddMinutes(100), });
            Items.Add(new PlotItemViewModel() { City = "Miami", StartTime = dateTime.AddMinutes(120), });
            Items.Add(new PlotItemViewModel() { City = "Miami", StartTime = dateTime.AddMinutes(150), });
            Items.Add(new PlotItemViewModel() { City = "Savannah", StartTime = dateTime.AddMinutes(200), });
            Items.Add(new PlotItemViewModel() { City = "Birmingham", StartTime = dateTime.AddMinutes(250), });
            Items.Add(new PlotItemViewModel() { City = "New Orleans", StartTime = dateTime.AddMinutes(280), });

            this.DataContext = Items;
        }
    }

    public class PlotItemViewModel
    {
        public string City { get; set; }
        public DateTime StartTime { get; set; }
        public double StartTimeOA { get { return this.StartTime.ToOADate(); } }
    }

    public class DoubleToDateTimeLabelConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double doubleValue = double.Parse(value.ToString());
            return DateTime.FromOADate(doubleValue);
        }

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

The Result is:

Here is the Dateformat "us-US" (10:05 AM / 4:06 PM) but i need German "de-DE" (10:05 / 16:06) !

Have anyone a idea how i can do this?

Best regards

Bernd

 

 

BerndR
Top achievements
Rank 1
Iron
 answered on 19 Jun 2024
1 answer
67 views

Hi,

I am exploring the RadCartesianChart component and would like to know if there is a way to determine the intersection point between two series. For example, I have a SplineSeries and a LineSeries, and I would like to know where they intersect. Is there a component or method to accomplish this?

I may be using the wrong component to try to achieve that?

 <telerik:RadCartesianChart x:Name="telerikChart">

     <telerik:RadCartesianChart.VerticalAxis>
         <telerik:LinearAxis Title="Distance (m)" DesiredTickCount="10"/>
     </telerik:RadCartesianChart.VerticalAxis>

     <telerik:RadCartesianChart.HorizontalAxis>
         <telerik:DateTimeContinuousAxis Title="Time (HH:mm)" LabelFormat="HH:MM" 
                                         TickOrigin="{Binding Origin}" MaximumTicks="14" MajorStepUnit="Hour" MajorStep="1"
                                         Minimum="{Binding Minimum}" Maximum="{Binding Maximum}" />
     </telerik:RadCartesianChart.HorizontalAxis>

     <telerik:RadCartesianChart.Series>
         <telerik:SplineSeries x:Name="barSerie1" CategoryBinding="Time" ValueBinding="Distance" ItemsSource="{Binding DistanceSeries}" ShowLabels="True" />
         <telerik:LineSeries x:Name="barSerie2" CategoryBinding="Time" ValueBinding="Distance" ItemsSource="{Binding AverageLineSeries}" ShowLabels="True"/>
     </telerik:RadCartesianChart.Series>

     <telerik:RadCartesianChart.Grid>
         <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
     </telerik:RadCartesianChart.Grid>

 </telerik:RadCartesianChart>

 

Thanks for your time! 

Martin Ivanov
Telerik team
 answered on 27 Mar 2024
0 answers
70 views

This is my code.

I want real-time graph.

But when i play the graph, the graph have some blinking.
I want to remove the blinking.

How can i do? 
And what is the cause of this blinking?

                <!--Chart-->
                <telerik:RadCartesianChart x:Name="Chart" Palette="Windows8" Grid.Column="0" ClipToBounds="False" Margin="0,10,0,0">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseDown">
                            <prism:InvokeCommandAction Command="{Binding MouseDownCommand}" />
                        </i:EventTrigger>
                        <i:EventTrigger EventName="MouseMove">
                            <prism:InvokeCommandAction Command="{Binding MouseMoveCommand}" />
                        </i:EventTrigger>
                        <i:EventTrigger EventName="MouseUp">
                            <prism:InvokeCommandAction Command="{Binding MouseUpCommand}" />
                        </i:EventTrigger>
                        <i:EventTrigger EventName="MouseLeave">
                            <prism:InvokeCommandAction Command="{Binding MouseLeaveCommand}" />
                        </i:EventTrigger>
                        <i:EventTrigger EventName="MouseWheel">
                            <prism:InvokeCommandAction Command="{Binding MouseWheelCommand}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <!--Axis-->
                    <telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:CategoricalAxis x:Name="horizontalAxis" SmartLabelsMode="SmartStep" Title="{x:Static prop:Resources.TIME_AXIS}"/>
                    </telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:RadCartesianChart.VerticalAxis>
                        <telerik:LinearAxis x:Name="verticalAxis" FontFamily="Segoe UI" SmartLabelsMode="SmartStepAndRange" Title="{x:Static prop:Resources.STR_VALUE}">
                        </telerik:LinearAxis>
                    </telerik:RadCartesianChart.VerticalAxis>

                    <telerik:RadCartesianChart.Grid>
                        <telerik:CartesianChartGrid MajorLinesVisibility="Y" MajorYLineDashArray="3,4" />
                    </telerik:RadCartesianChart.Grid>

                    <!--Track Ball-->
                    <telerik:RadCartesianChart.TrackBallInfoStyle>
                        <Style TargetType="telerik:TrackBallInfoControl">
                            <Setter Property="Header" Value="{Binding TrackBallHeaderText}"/>
                            <Setter Property="Opacity" Value="0.7" />
                        </Style>
                    </telerik:RadCartesianChart.TrackBallInfoStyle>
                    <telerik:RadCartesianChart.TrackBallLineStyle>
                        <Style TargetType="Polyline">
                            <Setter Property="Stroke" Value="Red" />
                        </Style>
                    </telerik:RadCartesianChart.TrackBallLineStyle>
                    <telerik:RadCartesianChart.Behaviors>
                        <telerik:ChartTrackBallBehavior  ShowTrackInfo="{Binding IsVisibleTrackInfo}" ShowIntersectionPoints="True" TrackInfoUpdated="ChartTrackBallBehavior_TrackInfoUpdated" local:ChartUtilities.TrackBallGroup="g1" />
                    </telerik:RadCartesianChart.Behaviors>

                    <!--Annotations-->
                    <telerik:RadCartesianChart.Annotations>
                        <telerik:CartesianGridLineAnnotation x:Name="ChartAnnotation" Axis="{Binding ElementName=horizontalAxis}" Stroke="Red" StrokeThickness="1.5"
                                                     Value="{Binding CurrentPosition}" Label="{x:Static prop:Resources.STR_CURRENT_POSITION}" ClipToBounds="False" ClipToPlotArea="False">
                            <telerik:CartesianGridLineAnnotation.LabelDefinition>
                                <telerik:ChartAnnotationLabelDefinition Location="Top"
                                                        HorizontalAlignment="Center"/>
                            </telerik:CartesianGridLineAnnotation.LabelDefinition>
                        </telerik:CartesianGridLineAnnotation>
                    </telerik:RadCartesianChart.Annotations>

                    <telerik:RadCartesianChart.SeriesProvider>
                        <telerik:ChartSeriesProvider Source="{Binding Data}" SeriesCreated="ChartSeriesProvider_SeriesCreated">
                            <telerik:ChartSeriesProvider.SeriesDescriptors>
                                <telerik:CategoricalSeriesDescriptor CategoryPath="Category" 
                                                        ValuePath="Value" 
                                                        ItemsSourcePath="Items">
                                    <telerik:CategoricalSeriesDescriptor.Style>
                                        <Style TargetType="telerik:LineSeries">
                                            <Setter Property="VirtualizingPanel.IsVirtualizing" Value="True"/>
                                            <Setter Property="VirtualizingPanel.VirtualizationMode" Value="Standard"/>
                                            <Setter Property="Stroke" Value="{Binding Path=Color}">
                                            </Setter>
                                            <!--<Setter Property="LegendSettings" Value="{Binding Path=SeriesName, Converter={StaticResource LegendSettingsValueConverter}}"/>-->
                                            <Setter Property="TrackBallInfoTemplate">
                                                <Setter.Value>
                                                    <DataTemplate>
                                                        <StackPanel Orientation="Horizontal" Margin="5,0,0,0">
                                                            <TextBlock Text="{Binding DataPoint.Presenter.DataContext.SeriesName}"/>
                                                            <TextBlock Text=" : " FontWeight="Bold" />
                                                            <TextBlock Text="{Binding DataPoint.Value, StringFormat=0.0#}" />
                                                        </StackPanel>
                                                    </DataTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </telerik:CategoricalSeriesDescriptor.Style>
                                </telerik:CategoricalSeriesDescriptor>
                            </telerik:ChartSeriesProvider.SeriesDescriptors>
                        </telerik:ChartSeriesProvider>
                    </telerik:RadCartesianChart.SeriesProvider>
                </telerik:RadCartesianChart>


jihye
Top achievements
Rank 1
 asked on 20 Mar 2024
2 answers
73 views

Hello everyone,

I'm new to Telerik and a quite beginner in C#. I would like to use ChartView to display a real-time value that I read every X milliseconds and add it to the graph. The X-axis should indicate seconds, so each point is defined in terms of X and Y. Several thousand points need to be generated and displayed. The chart should display 3 curves. 1 RealTime curve , 1 Superior Limit that is fixed, 1 Inferior Limit that is fixed.

Could someone help me get started on this? (what structure for the points, adding series). Every help is welcome.

Cheers

Massimo

Massimo
Top achievements
Rank 1
Iron
 updated answer on 13 Feb 2024
1 answer
53 views
I want to zoom and pan the chart using the keyboard with the plus/minus and cursor keys. This works for the Map Control. However, I'm unable to use the mouse to set the focus on the chart to receive keys. I can tab to the chart, not clicking the mouse does not work and the focus remains on the currently focused element.
Martin Ivanov
Telerik team
 answered on 25 Jan 2024
1 answer
69 views

I am currently using a RadCartesianChart and ChartSeriesProvider to display multiple ScatterPointSeries.  These series will have 10's of thousands of points in them.  The only rendering option that has worked well for this is BitmapRenderOptions. However, when using BitmapRenderOptions I can't get tooltips to show and I can't select any points.

Is this a know limitation of the BitmapRenderOptions or is there a way to get it to work?  I'm basically using the Large Data demo but trying to add a selection and tooltip behavior. 

Selection and tooltip work fine if I use the default XamlRenderOptions, but the performance is too bad to use.

Martin Ivanov
Telerik team
 answered on 25 Dec 2023
1 answer
60 views

We are using the RadCartesianChart component to plot datasets that contain digitized signals from a communications channel. The signals are periodic in nature, and we divide the stream into a series of single period datasets. We will then plot all the datasets on the same RadCartesianChart using a common time reference. The result will be a large number of datasets overlaid on the same Cartesian surface.

So far so good.

Now we want the visual image to use color to show density of the overlaid plots similar to a communications eye diagram as shown below. In that diagram there are 8 million overlaid signals, and the colors encode a density scale allowing visualization of the distribution of discrepancies in the overlaid signals. Is this possible using the RadCartesianChart component? If not directly supported are there mechanisms to customize the plotting to achieve something like this?

Martin Ivanov
Telerik team
 answered on 14 Dec 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?