Telerik Forums
UI for WPF Forum
0 answers
7 views

Hello!

I'm using a `<RadCartesianChart>` with `<ScatterAreaSeries> to visualize some data as a histogram.

I'd like the user to be able to select a data point in that chart.

I've been using this guide: https://docs.telerik.com/devtools/wpf/controls/radchartview/features/behaviors/selection
but nothing seems to work.

If I add

<telerik:RadCartesianChart.Behaviors>
    <telerik:ChartSelectionBehavior />
</telerik:RadCartesianChart.Behaviors>

I still can't seem to select anything. The `SelectionChanged` event also never arrives when I click on the chart.
When I set a random point as selected programmatically via:

RadCartesianChart chart = this.GetTemplateChild("Histogram_Chart") as RadCartesianChart;
var chartSeries = (ScatterAreaSeries)chart.Series[0];
ScatterDataPoint dataPoint = chartSeries.DataPoints[10];
dataPoint.IsSelected = true;

it still doesn't change how the chart looks.

Am I missing something or is selection just not possible for ScatterAreaSeries?

Thanks in advance!

Dominic
Top achievements
Rank 1
 asked on 30 Mar 2024
1 answer
19 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
27 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
19 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
15 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
25 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
18 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
19 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
23 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
33 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?