or
0 answers
13 views
I'm experiencing UI hang and slow chart updates when trying to plot ~10,000 points of scrolling data (10 traces, 1,000 points each) in a WPF .Net Core 8 application. This occurs with Direct2DRenderOptions and BitmapRenderOptions. I'm using a ScatterLineSeries ("SL") with data binding to a simple class with "X" and "Y" properties (see below). I'm adding points to each trace in real time and updating the HorizontalAxis Minimum and Maximum to make the data scroll across the screen. The update time is 5 FPS. The chart updating slows down at >=500 points in each trace and the UI starts to hang. I also reviewed the real time charting demo and have tried using the async data source described here xaml-sdk/ChartView/WPF/AsyncData at master ยท telerik/xaml-sdk with no improvement.
Any suggestions would be greatly appreciated.
SL.XValueBinding = new PropertyNameDataPointBinding("X");SL.YValueBinding = new PropertyNameDataPointBinding("Y");
SL.ItemsSource = PlotPen.data;
Thanks, Vern
1 answer
61 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 812at 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.
2 answers
45 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 >
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>
1 answer
60 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
2 answers
69 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
1 answer
73 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!
0 answers
82 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>2 answers
86 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
1 answer
57 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
78 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
