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
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.
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 >
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
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
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!
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>
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
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.
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?