Questions on UI for WPF Forum

1 answer

27 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

1 answer

36 views

Semi-Circular Donut Pie Chart

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!

Chart

answered on 25 Mar 2024

1 answer

20 views

RadCartesianChart3D cannot set initial camera position

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?

Chart

answered on 15 Mar 2024

1 answer

29 views

cannot get 3D chart to show bound data

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

Chart

answered on 12 Mar 2024

1 answer

23 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

1 answer

44 views

RadCartesianChart3D -> SeriesProvider

Hi,

I am trying to implement a RadCartesianChart3D, but am missing the SeriesProvider Property to be able to bind view models and dynamically create series.. The Telerik package reference is Telerik.UI.for.WPF.NetCore.Xaml (2021.2.615). Was this property not implemented at that time? If so, how do I overcome this?

Example of what Id like to implement:

<telerik:RadCartesianChart3D x:Name="chart">        
        <!--...-->
        <telerik:RadCartesianChart3D.SeriesProvider>
            <telerik:ChartSeriesProvider3D Source="{Binding SeriesData}">
                <telerik:XyzSeries3DDescriptor XValuePath="Year" YValuePath="Industry" ZValuePath="Revenue" ItemsSourcePath="Data">
                    <telerik:XyzSeries3DDescriptor.Style>
                        <Style TargetType="telerik:BarSeries3D" BasedOn="{StaticResource BarSeries3DStyle}" />
                    </telerik:XyzSeries3DDescriptor.Style>
                </telerik:XyzSeries3DDescriptor>
            </telerik:ChartSeriesProvider3D>
        </telerik:RadCartesianChart3D.SeriesProvider>
    </telerik:RadCartesianChart3D>

Edit: This feature seems to have been implemented in WPF R2 2022 and I do not have the option to upgrade the Telerik package. Is there a workaround for this?

Thanks in advance,

Chris

Chart

ChartView3D

updated question on 17 Jul 2023

1 answer

62 views

Binding of LineSeries.DefaultVisualStyle Properties

Hi Team,

In my LineSeries chart I want to change the color of the line dots based on a property of my bound list item.

The ItemSource of my LineSeries is an ObservableCollection<MonthlyTracking> . The MonthlyTracking class looks like this:

   public class MonthlyTracking : INotifyPropertyChanged
    {
        [....]

        private string monthString;
        public string MonthString
        {
            get => this.monthString;
            set
            {
                this.monthString = value;
                this.OnPropertyChanged(nameof(this.MonthString));
            }
        }

        private double actualValue;
        public double ActualValue
        {
            get => this.actualValue;
            set
            {
                this.actualValue = value;
               this.OnPropertyChanged(nameof(this.ActualValue));
            }
        }

        private int statusId;
        public int StatusId
        {
            get => this.statusId;
            set
            {
                this.statusId = value;
                this.OnPropertyChanged(nameof(this.StatusId));
            }
        }

     [....]

    }

My XAML Code looks like this:

<telerik:RadCartesianChart>
     <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis ShowLabels="True"/>
     </telerik:RadCartesianChart.HorizontalAxis>
	 
     <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.VerticalAxis>
                
	<telerik:RadCartesianChart.Series>                   
         <telerik:LineSeries ItemsSource="{Binding MonthlyTrackingList}" CategoryBinding="MonthString" ValueBinding="ActualValue" >
             <telerik:LineSeries.DefaultVisualStyle>
                <Style TargetType="Path">
                    <Setter Property="Width" Value="10" />
                    <Setter Property="Height" Value="10" />     
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding StatusId}" Value="1">
                            <Setter Property="Fill" Value="LimeGreen" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding StatusId}" Value="2">
                            <Setter Property="Fill" Value="LightCoral" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </telerik:LineSeries.DefaultVisualStyle>
         </telerik:LineSeries>
    </telerik:RadCartesianChart.Series>
	
</telerik:RadCartesianChart>

The line is drawn in the chart. Unfortunately my binding in telerik:LineSeries.DefaultVisualStyle is wrong. The property StatusId is not found. Can you help me?

Kind regards,

Mario

Chart

answered on 19 Jun 2023

1 answer

65 views

Create RadCartesianChart by c# code

I need to translate the following xaml code into c# to build the real-time graph, but I always get reported that there are no series defined. If instead I directly use the xaml code in binding with my object it works regularly. Where am I doing wrong?

                <TK:RadCartesianChart x:Name="RadCartesianChart"
                                      Margin="0,18,0,0"
                                      Palette="Windows8">
                    <TK:RadCartesianChart.HorizontalAxis>
                        <TK:CategoricalAxis LabelInterval="15"
                                            ShowLabels="True" />
                    </TK:RadCartesianChart.HorizontalAxis>

                    <TK:RadCartesianChart.VerticalAxis>
                        <TK:LinearAxis LabelInterval="15"
                                       ShowLabels="True" />
                    </TK:RadCartesianChart.VerticalAxis>

                    <TK:RadCartesianChart.SeriesProvider>
                        <TK:ChartSeriesProvider Source="{Binding Path=grafico[0].dataSERIE, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
                            <TK:ChartSeriesProvider.SeriesDescriptors>
                                <TK:CategoricalSeriesDescriptor CategoryPath="etichetta"
                                                                ItemsSourcePath="dataITEM"
                                                                ValuePath="valore">
                                    <TK:CategoricalSeriesDescriptor.Style>
                                        <Style TargetType="TK:BarSeries">
                                            <Setter Property="LegendSettings">
                                                <Setter.Value>
                                                    <TK:SeriesLegendSettings Title="{Binding Path=serie, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </TK:CategoricalSeriesDescriptor.Style>
                                </TK:CategoricalSeriesDescriptor>
                            </TK:ChartSeriesProvider.SeriesDescriptors>
                        </TK:ChartSeriesProvider>
                    </TK:RadCartesianChart.SeriesProvider>
                </TK:RadCartesianChart>

C# code

            RadCartesianChart ctrl = new RadCartesianChart() { Name = "RadCartesianChart" };
            ctrl.Palette = ChartPalettes.Windows8;
            ctrl.VerticalAxis = new LinearAxis() { ShowLabels = true, LabelInterval = 15 };
            ctrl.HorizontalAxis = new CategoricalAxis() { ShowLabels = true, LabelInterval = 15 };

            ChartSeriesProvider series = new ChartSeriesProvider()
            {
                Source = new Binding("grafico[0].dataSERIE") { Mode = BindingMode.OneWay, UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged },
            };

            CategoricalSeriesDescriptor seriesDescriptor = new CategoricalSeriesDescriptor
            {
                ItemsSourcePath   = "dataITEM",
                CategoryPath      = "etichetta",
                ValuePath         = "valore",
                Style = new Style(typeof(BarSeries))
            };
            seriesDescriptor.Style.Setters.Add(new Setter(BarSeries.LegendSettingsProperty,
                                                          new Binding("serie") { Mode = BindingMode.OneWay, UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged }));
            series.SeriesDescriptors.Add(seriesDescriptor);
            ctrl.SeriesProvider = series;

Object data

        public ObservableCollection<OGRecGrafico> grafico
        {
            get { return _grafico; }
            set { _grafico = value; RaisePropertyChanged(() => grafico); }
        }
        private ObservableCollection<OGRecGrafico> _grafico = new ObservableCollection<OGRecGrafico>();

    publicclassOGRecGrafico : NotificationObject
    {
        publicstring titolo { get; set; }
        public ObservableCollection<OGRecGraficoSerie> dataSERIE { get; set; } = new ObservableCollection<OGRecGraficoSerie>();
    }

    publicclassOGRecGraficoSerie : NotificationObject
    {
        publicobject serie { get; set; }
        public ObservableCollection<OGRecGraficoItem> dataITEM { get; set; } = new ObservableCollection<OGRecGraficoItem>();
    }

    publicclassOGRecGraficoItem : NotificationObject
    {
        publicobject serie
        {
            get { return _serie; }
            set { _serie = value; RaisePropertyChanged(() => serie); }
        }
        privateobject _serie = null;

        publicobject etichetta
        {
            get { return _etichetta; }
            set { _etichetta = value; RaisePropertyChanged(() => etichetta); }
        }
        privateobject _etichetta = null;

        publicobject valore
        {
            get { return _valore; }
            set { _valore = value; RaisePropertyChanged(() => valore); }
        }
        privateobject _valore = null;

        publicstring scriptSQL
        {
            get { return _scriptSQL; }
            set { _scriptSQL = value; RaisePropertyChanged(() => scriptSQL); }
        }
        privatestring _scriptSQL = null;
    }

Chart

answered on 19 May 2023

1 answer

53 views

can't debuging and execute demo app

Hi. I have some question.

An exception occurred while debugging the ExecutiveDashboard demo source code.

exception text :
System.InvalidOperationException: 'An error occurred while processing this request.'
DataServiceTransportException: The request was aborted: Could not create SSL/TLS secure channel.
WebException: The request was aborted: Could not create SSL/TLS secure channel.

An error occurred while downloading and installing the ExecutiveDashboard demo app(setup.exe).

install.log :
The following properties have been set:
Property: [AdminUser] = true {boolean}
Property: [InstallMode] = HomeSite {string}
Property: [NTProductType] = 1 {int}
Property: [ProcessorArchitecture] = AMD64 {string}
Property: [VersionNT] = 10.0.0 {version}
Running checks for package '.NET Desktop Runtime 6.0.1 (x64)', phase BuildList
Checking conditions before installer checks for command 'net6desktopruntime_x64\windowsdesktop-runtime-6.0.1-win-x64.exe'
Result of running operator 'ValueNotEqualTo' on property 'ProcessorArchitecture' and value 'AMD64': false
Result of checking conditions before installer checks for command 'net6desktopruntime_x64\windowsdesktop-runtime-6.0.1-win-x64.exe' is: No action
Running external check with command 'C:\Users\jmkim\AppData\Local\Temp\VSD29A9.tmp\net6desktopruntime_x64\NetCoreCheck.exe' and parameters 'Microsoft.WindowsDesktop.App 6.0.1'
Process exited with code 0
Setting value '0 {int}' for property 'NetCoreCheck'
The following properties have been set for package '.NET Desktop Runtime 6.0.1 (x64)':
Property: [NetCoreCheck] = 0 {int}
Running checks for command 'net6desktopruntime_x64\windowsdesktop-runtime-6.0.1-win-x64.exe'
Result of running operator 'ValueNotEqualTo' on property 'ProcessorArchitecture' and value 'AMD64': false
Result of running operator 'VersionLessThan' on property 'VersionNT' and value '6.1.0': false
Result of running operator 'ValueEqualTo' on property 'NetCoreCheck' and value '0': true
Result of checks for command 'net6desktopruntime_x64\windowsdesktop-runtime-6.0.1-win-x64.exe' is 'Bypass'
'.NET Desktop Runtime 6.0.1 (x64)' RunCheck result: No Install Needed
Launching Application.
URLDownloadToCacheFile failed with HRESULT '-2146697208'
Error: An error occurred trying to download 'http://demos.telerik.com/wpf/executivedashboard/ExecutiveDashboard.application'.

The same problem occurred with the SalesDashboard demo source code and app.

What caused the problem?

Chart

Gauges

Installer and Visual Studio Extensions

ProgressBar

answered on 05 May 2023

1 answer

67 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>