Questions on UI for WPF Forum

1 answer

29 views

Intersect point of 2 series on RadCartesianChart

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!

Chart

ChartView

answered on 27 Mar 2024

0 answers

26 views

How to remove bliking of RadCartesianChart graph series

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>

Chart

ChartView

asked on 20 Mar 2024

1 answer

24 views

Is it possible to overlay multiple datasets on a RadCartesianChart and use color to show density of places where the datasets touch the same coordinates??

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?

Chart

ChartView

answered on 14 Dec 2023

0 answers

37 views

Sync up between 2 Rad Cartesian Charts

I have 2 radcartesianchart
one with label on the box axis
and the 2nd one is without the labels at all

I want to the top chart(the one without label) will the start after the labels end (on the y-axis) in the top chart
the label on the bottom chart are not fixed size and can be changed so doing something like fixed width or margin wont do the trick

I was trying to follow the guidelines from this questions ,but still it didn't worked for me

Chart

ChartView

asked on 21 Aug 2023

1 answer

69 views

RadPieChart - How to show in my pie chart only values not percentage

Hello.

I want to show in my pie chart only values not percentage. How I can do this?

<telerik:RadPieChart
     x:Name="chart"
     Palette="Windows8"
     HoverMode="FadeOtherItems"
     HorizontalAlignment="Stretch"
     Foreground="{StaticResource KolorCzcionki1}"
     FontSize="{StaticResource HeaderFontSize}"                            
     VerticalAlignment="Stretch">
         <telerik:PieSeries ItemsSource="{Binding Raport, UpdateSourceTrigger=PropertyChanged}"
              ShowLabels="True"                                               
              ValueBinding="Ilosc"
              DisplayName="Name">
                  <telerik:PieSeries.LegendSettings>
                      <telerik:DataPointLegendSettings TitleBinding="Name"/>
                  </telerik:PieSeries.LegendSettings>
           </telerik:PieSeries>          
</telerik:RadPieChart>

Chart

ChartView

answered on 27 Apr 2023

1 answer

52 views

Center XAxis on the 0 of YAxis on a RadCartesianChart

Hello,

I'm currently using a RadCartesianChart. I want to centre my HorizontalAxis which is a LinearAxis on my VerticalAxis.
I want to know if it's possible and how to do it? I've searched for a long time on this forum, but I didn't find any solution. I see an old subject with a conclusion that is impossible.

Thanks for your help. Tell me if you need some code or anything else.
Justin

Chart

ChartView

answered on 17 May 2022

2 answers

76 views

Pie chart: How to setting series label foreground color same as series color

Hi Telerik team,

I would like to have the foreground of the series labels same as the series color.

Below picture is the expected result:

Would you please help me how to obtain this?

Many thanks,

Minh Tuan.

Chart

ChartView

answered on 09 Feb 2022

1 answer

166 views

How to always show the last tick in X axis

I have a linear chart that contains data from 1/4/2019 to 31/3/2020. However, the last tick is not displayed? How to always display the last tick with the corresponding label. Thanks

<telerik:RadCartesianChart
        HorizontalZoomRangeStart="0.0" HorizontalZoomRangeEnd="1.0" RenderTransformOrigin="0.5,0.5">

        <telerik:RadCartesianChart.Resources>

            <Style BasedOn="{StaticResource LineSeriesStyle}" TargetType="{x:Type telerik:LineSeries}">
                <Setter Property="CategoryBinding" Value="X" />
                <Setter Property="ValueBinding" Value="Y" />
                <Setter Property="StrokeThickness" Value="2" />
                <Setter Property="Stroke" Value="#0083A9" /> <!-- Aon blue. See: https://brandmatters.aon.com/bms/damui/index.cfm?category=1450&assetID=4993 -->
            </Style>

        </telerik:RadCartesianChart.Resources>

        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:DateTimeContinuousAxis LabelFormat="{Binding HorizontalAxisFormatString}" 
                                            SmartLabelsMode="SmartStep" />
        </telerik:RadCartesianChart.HorizontalAxis>

        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis
                LabelFormat="{Binding VerticalAxisFormatString}"
                RangeExtendDirection="None"
                SmartLabelsMode="SmartStep" />
        </telerik:RadCartesianChart.VerticalAxis>

        <telerik:RadCartesianChart.SeriesProvider>
            <telerik:ChartSeriesProvider Source="{Binding ItemsSource}">
                <telerik:ChartSeriesProvider.SeriesDescriptors>
                    <telerik:ChartSeriesDescriptor ItemsSourcePath="Points" TypePath="SeriesType" />
                </telerik:ChartSeriesProvider.SeriesDescriptors>
            </telerik:ChartSeriesProvider>
        </telerik:RadCartesianChart.SeriesProvider>

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

    </telerik:RadCartesianChart>

Chart

ChartView

General Discussions

answered on 01 Feb 2022

1 answer

163 views

RadCartesianChart - BarSeries - Different colors for positive and negative values

How can I use different colors for positive and negative values?

This is my XAML Code:

                    <telerik:RadCartesianChart x:Name="DashboardChart" FontSize="{telerik:FluentResource ResourceKey=FontSizeS}">
                        <telerik:RadCartesianChart.HorizontalAxis>
                            <telerik:CategoricalAxis />
                        </telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:RadCartesianChart.VerticalAxis>
                            <telerik:LinearAxis LabelInterval="5"/>
                        </telerik:RadCartesianChart.VerticalAxis>
                        <telerik:RadCartesianChart.Series>
                            <telerik:BarSeries x:Name="DashboardChartBarSeries" ValueBinding="Difference" >
                            </telerik:BarSeries>
                        </telerik:RadCartesianChart.Series>
                    </telerik:RadCartesianChart>

The data binding is done in the C# code:

this.DashboardChartBarSeries.DataContext = _localViewModel.Document;

The values are displayed correctly. I would like to display negative values in red and positive values in green. How can I implement this?

Chart

ChartView

Styling

answered on 27 Dec 2021

1 answer

78 views

About count of DataPoints of a series of particular RadCartesianChart...

In my WPF application using c#, I need a count of DataPoints of a series of particular RadCartesianChart using c# (code behind). How can I achieve it?

I have used the following line:

int a = ((Telerik.Windows.Controls.ChartView.CategoricalSeries)new System.Collections.Generic.Mscorlib_CollectionDebugView<CartesianSeries>(((Telerik.Windows.Controls.RadCartesianChart)my SelectedChart).Series).Items[0]).DataPoints.Count;

But it gives the following error:

Error	CS0122	'Mscorlib_CollectionDebugView<T>' is inaccessible due to its protection level

answered on 30 Nov 2021

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools