Telerik Forums
UI for WPF Forum
1 answer
4 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
1 answer
24 views

If I have set the Angle Range on a RadPieChart so that I have a semicircle, is there a good way to make the remaining chart take up the entire area used for the RadPieChart or at least a good way to center it?


<telerik:RadPieChart x:Name="Chart" Background="Yellow">

    <telerik:RadPieChart.Series>

        <telerik:DoughnutSeries x:Name="DonutSeries" ShowLabels="False">

            <telerik:DoughnutSeries.DataPoints>
                <telerik:PieDataPoint Label="TestLabel1" Value="15"/>
                <telerik:PieDataPoint Label="TestLabel2" Value="50"/>
            </telerik:DoughnutSeries.DataPoints>

            <telerik:DoughnutSeries.LegendSettings>
                <telerik:DataPointLegendSettings TitleBinding="Label"/>
            </telerik:DoughnutSeries.LegendSettings>

            <telerik:DoughnutSeries.AngleRange>
                <telerik:AngleRange StartAngle="180" SweepAngle="180" SweepDirection="Clockwise"/>
            </telerik:DoughnutSeries.AngleRange>

        </telerik:DoughnutSeries>


    </telerik:RadPieChart.Series>
</telerik:RadPieChart>

 

Thank You!

Dimitar
Telerik team
 answered on 25 Mar 2024
0 answers
10 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
1 answer
10 views


if (mainChart.Camera is ProjectionCamera)
{
    ProjectionCamera projectionCamera = (ProjectionCamera)mainChart.Camera;

    Point3D point3D = projectionCamera.Position;
    point3D.X = 714;
    point3D.Y = -1852;
    point3D.Z = 1255;
    projectionCamera.Position = point3D;

    Vector3D vector3D = projectionCamera.LookDirection;
    vector3D.X = -114;
    vector3D.Y = 1952;
    vector3D.Z = -665;
    projectionCamera.LookDirection = vector3D;

}

I have the above code to try to set the initial camera position via the Loaded event but it does not work.
If I use the code on a keydown event it moves the camera to the position that I want.

What am I missing to make it set the initial camera position?

Martin Ivanov
Telerik team
 answered on 15 Mar 2024
1 answer
10 views

<telerik:RadCartesianChart3D>

    <telerik:RadCartesianChart3D.XAxis>
        <telerik:CategoricalAxis3D />
    </telerik:RadCartesianChart3D.XAxis>

    <telerik:RadCartesianChart3D.YAxis>
        <telerik:CategoricalAxis3D />
    </telerik:RadCartesianChart3D.YAxis>

    <telerik:RadCartesianChart3D.ZAxis>
        <telerik:LinearAxis3D />
    </telerik:RadCartesianChart3D.ZAxis>

    <telerik:RadCartesianChart3D.Series>
        <telerik:BarSeries3D ItemsSource="{Binding TheDataPoints}">
        </telerik:BarSeries3D>
    </telerik:RadCartesianChart3D.Series>
    <telerik:RadCartesianChart3D.Grid>
        <telerik:CartesianChart3DGrid />
    </telerik:RadCartesianChart3D.Grid>
</telerik:RadCartesianChart3D>
In my ViewModel I have public ObservableCollection<PlotInfo> TheDataPoints but all I get is an empty chart

public class PlotInfo
{
  public string XValue { get; set; }
  public double YValue { get; set; }
  public double ZValue { get; set; }
}

Is something else needed because XValue is a string?
Martin Ivanov
Telerik team
 answered on 12 Mar 2024
1 answer
15 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
0 answers
15 views

I want to hide YAxies when LineSeries is not showing.I have checkBoxes to show and hide LineSeries and property  bool IsLineSeriesVisible.

<telerik:LineSeries ItemsSource="{Binding data, Mode=OneWay}" CategoryBinding="time" ValueBinding="value" >
                        <telerik:LineSeries.VerticalAxis>
                            <telerik:LinearAxis x:Name="yaxis" HorizontalLocation="Right" Title="{global:LocalizeKey TitleResKey, Default='value'}">
                                <telerik:LinearAxis.Style>
                                    <Style TargetType="telerik:LinearAxis">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding IsLineSeriesVisible}" Value="False">
                                                <Setter Property="Visibility" Value="Collapsed" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </telerik:LinearAxis.Style>
                            </telerik:LinearAxis>
                        </telerik:LineSeries.VerticalAxis>
                    </telerik:LineSeries>

And this is my xaml, dataTrigger is not working when i remove trigger it hiddes yAxis but when i try to add trigger to hide axies when series is not showing it doesn`t do anything

Djordje
Top achievements
Rank 1
 asked on 30 Nov 2023
0 answers
19 views

Hello,

I am facing application crash issue with : Out of memory exception.

While analysing, we got to know that scatterDataPoint is taking more memory

 

I am trying to add multiple ScatterLineSeries in telerik:RadCartesianChart.

XAML Code :


<telerik:RadCartesianChart Palette="Windows8" MouseDoubleClick="RadCartesianChart_MouseDoubleClick">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis Minimum="0" 
                                    Maximum="5000"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Minimum="0" 
                                     Maximum="10000" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="Red" />
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="Blue" />
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="Pink" />
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="Yellow" />
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="Green" />
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="Orange"/>
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="AliceBlue" />
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="Black" />
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="Violet" />
                <telerik:ScatterLineSeries ItemsSource="{Binding}" YValueBinding="YValue" XValueBinding="XValue" BorderBrush="Red" StrokeThickness="3" Stroke="Cornsilk" />
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>

 

I am updating value in specific time intervarl. Example:

We have created 1 observable collection in which we are adding plot values(xaxis,yaxis)


public class PlotInfo
        {
            public double XValue { get; set; }
            public double YValue { get; set; }
        }

ObservableCollection<PlotInfo> ColPlotInfo = new ObservableCollection<PlotInfo>();

//Initially adding 100 records in observable collection & binding values to CartesianChart series.

            ArrayPlotInfo = arrayPlotInfo = new ChartViewModel.PlotInfo[100];
            for (int i = 0; i<100; i++)
                {

                ColPlotInfo.Add(new ChartViewModel.PlotInfo() { XValue = i + 100, YValue = i + 101 });
                }

On double click of chart, we are adding records on Timer_Elapsed.


private void RadCartesianChart_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            Timer timer = new Timer(100);
            timer.Enabled = true;
            timer.Elapsed += Timer_Elapsed;
            
        }
private void Timer_Elapsed(object sender, ElapsedEventArgs e)
        {

            App.Current.Dispatcher.Invoke((Action)delegate
            {
                ChartViewModel.PlotInfo plotInfo = new ChartViewModel.PlotInfo() { XValue = (x = x + DateTime.Now.Second), YValue = DateTime.Now.Second };
                ColPlotInfo.Add(plotInfo);
            });
}

Here if we do not bind to series then memory is not icreaseing it only increases when we update graph and application gets crashed.

I tried many things like –

  1. Used the items virtualization feature and restrict the viewport
  2. Tried different rendering options for ScatterLineSeries.
  3. Kept minimum bindings
  4. Used ObservableCollection for binding datapoints
  5. Enabled caching

 

Can anyone please help me with this? What else can I try so that memory increasing will be restrict?

Renuka
Top achievements
Rank 1
 asked on 30 Nov 2023
0 answers
29 views
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
Ofir
Top achievements
Rank 1
 asked on 21 Aug 2023
0 answers
41 views

Hello

 

I have a RadCartesianChart with two LineSeries, one of the series is populated with a list of categories and values and the other is loads its categories based on a timer. Every time the timer ticks, a new category and value is added to the green line series. 

Let me show you a screenshot.

I know exactly what are the categories and values for the grey line. The chart is loaded with them and that works well.

But the green line series ends up in the wrong place as I add new categories that were not there in first place. I wish that in the example above the categories could be 1 ... 2 ... 3 ...

Do I need to sort it? But how?

Here's my code example:

<Window
    x:Class="Telerik.Question.Charts.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Title="MainWindow"
    Width="1200"
    Height="450"
    mc:Ignorable="d">

    <Grid>
        <telerik:RadCartesianChart
            x:Name="chart"
            Width="1050"
            Height="176">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis
                    LineThickness="0"
                    MajorTickLength="0"
                    SmartLabelsMode="SmartStep"
                    TickThickness="0" />
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis
                    LineThickness="0"
                    MajorTickLength="30"
                    TickThickness="0" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:LineSeries
                    x:Name="scriptSeries"
                    Stroke="#525E68"
                    StrokeThickness="4" />
                <telerik:LineSeries
                    x:Name="scriptChangesSeries"
                    Stroke="#07D19C"
                    StrokeThickness="4">
                    <telerik:LineSeries.Resources>
                        <DataTemplate x:Key="lastPointTemplate">
                            <Ellipse
                                Width="32"
                                Height="32"
                                Fill="White"
                                Stroke="#07D19C"
                                StrokeThickness="11" />
                        </DataTemplate>
                    </telerik:LineSeries.Resources>
                </telerik:LineSeries>
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
    </Grid>
</Window>


using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Timers;
using System.Windows;
using Telerik.Windows.Controls.ChartView;

namespace Telerik.Question.Charts
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            scriptSeries.CategoryBinding = new PropertyNameDataPointBinding() { PropertyName = "Category" };
            scriptSeries.ValueBinding = new PropertyNameDataPointBinding() { PropertyName = "Value" };
            scriptSeries.ItemsSource = new List<ChartDataObject>()
            {
                new ChartDataObject(2,  4 ),
                new ChartDataObject(2,  4 ),
                new ChartDataObject(2,  8 ),
                new ChartDataObject(4,  8 ),
                new ChartDataObject(4,  4 ),
                new ChartDataObject(6,  4 ),
                new ChartDataObject(6,  8 ),
                new ChartDataObject(9,  8 ),
                new ChartDataObject(9,  10 ),
                new ChartDataObject(11,  10 ),
                new ChartDataObject(11,  4 ),
                new ChartDataObject(12,  4 ),
                new ChartDataObject(12,  18 ),
                new ChartDataObject(14,  18 ),
            };

            var scriptChangesSeriesDataSource = new ObservableCollection<ChartDataObject>();
            scriptChangesSeries.CategoryBinding = new PropertyNameDataPointBinding() { PropertyName = "Category" };
            scriptChangesSeries.ValueBinding = new PropertyNameDataPointBinding() { PropertyName = "Value" };
            scriptChangesSeries.ItemsSource = scriptChangesSeriesDataSource;


            var timer = new Timer
            {
                Interval = 1000
            };
            var i = 0d;
            timer.Elapsed += (e, a) =>
            {
                i += 1;
                scriptChangesSeriesDataSource.Add(new ChartDataObject(i, 5));
            };
            timer.Start();
        }
    }

    public class ChartDataObject
    {
        public ChartDataObject(double category, double value)
        {
            Category = category;
            Value = value;
        }

        public double Category { get; set; }
        public double Value { get; set; }
    }
}

 

What do I need to do to achieve that?

 

Thanks!

 

Maurício
Top achievements
Rank 1
 asked on 14 Aug 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?