[RadCartesianChart] How to change line adsorption to point adsorption in RadCartesianChart?

4 posts, 0 answers
  1. asd
    asd avatar
    2 posts
    Member since:
    May 2017

    Posted 27 Aug Link to this post

    I am facing point adsorption issues on RadCartesianChart.

    When moving the mouse in chart, there is a line adsorption with the related data. But as in customer data, there are many very similiar data in one abscissa, so I want to change the line adsorption to point adsorption when mouse is moved on it, and at the same time, the point style can be changed, for example, change color and enlarge. 

    Please see the png and suggest me some ideas to rectify this problem. Thanks!

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1410 posts

    Posted 30 Aug Link to this post

    Hello,

    I am not sure that I understand your requirement. Currently, you have a line drawn on the chart. Can you tell me how you draw this line and what is the relation with the data points? Is the line drawn using an annotation?

    Also, can you send me drawings of the expected result?

    In the meantime you can check the following resource:
    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. asd
    asd avatar
    2 posts
    Member since:
    May 2017

    Posted 01 Sep Link to this post

    Thank you for your first answer. 

    Yes, we are using the ChartTrackball behaavior. Here is part of code:

    <telerik:RadCartesianChart Margin="0" x:Name="FreqDataChart"
                                                                           Palette="{StaticResource customPalette}"
                                                                           local:ChartUtilities.IsDragToSelectEnabled="{Binding Path=SelectToolEnabled}"
                                                                           local:ChartUtilities.SelectionRectangleStyle="{StaticResource SelectionRectangleStyle}">
                                                    <telerik:RadCartesianChart.Behaviors>
                                                        <telerik:ChartPanAndZoomBehavior PanMode="Both" ZoomMode="Both">
                                                            <telerik:ChartPanAndZoomBehavior.DragMode>
                                                                <MultiBinding Converter="{StaticResource BoolToDragConverter}">
                                                                    <Binding Path="ZoomToolEnabled"></Binding>
                                                                    <Binding Path="PanToolEnabled"></Binding>
                                                                </MultiBinding>
                                                            </telerik:ChartPanAndZoomBehavior.DragMode>
                                                        </telerik:ChartPanAndZoomBehavior>
                                                        <telerik:ChartTrackBallBehavior TrackInfoUpdated="ChartTrackBallBehavior_TrackInfoUpdated" ShowIntersectionPoints="False" ShowTrackInfo="False"/>
                                                    </telerik:RadCartesianChart.Behaviors>
                                                    <telerik:RadCartesianChart.HorizontalAxis>
                                                        <telerik:LinearAxis Title="Toa(us)"></telerik:LinearAxis>
                                                    </telerik:RadCartesianChart.HorizontalAxis>
                                                    <telerik:RadCartesianChart.VerticalAxis>
                                                        <telerik:LinearAxis Title="Freq(MHz)" ></telerik:LinearAxis>
                                                    </telerik:RadCartesianChart.VerticalAxis>
                                                    <telerik:RadCartesianChart.Grid>
                                                        <telerik:CartesianChartGrid StripLinesVisibility="Y"></telerik:CartesianChartGrid>
                                                    </telerik:RadCartesianChart.Grid>
                                                    <telerik:ScatterPointSeries x:Name="FreqSeries0" PointSize="3,3" XValueBinding="Toa_us" YValueBinding="Freq" ItemsSource="{Binding}">
                                                        <telerik:ScatterPointSeries.RenderOptions>
                                                            <telerik:BitmapRenderOptions></telerik:BitmapRenderOptions>
                                                        </telerik:ScatterPointSeries.RenderOptions>
                                                    </telerik:ScatterPointSeries>

    .......

    What I expected result is highlight the point which mouse on it, like the result as Specifying a custom TrackBallTemplate:

    <telerik:ScatterLineSeries.TrackBallTemplate><DataTemplate><Rectangle Width="20"Height="20"Fill="Violet"RenderTransformOrigin="0.5,0.5"><Rectangle.RenderTransform><RotateTransform Angle="45"/></Rectangle.RenderTransform></Rectangle></DataTemplate></telerik:ScatterLineSeries.TrackBallTemplate>

    But it is invalid. What's your suggestion?

    Thanks in advance.

  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1410 posts

    Posted 06 Sep Link to this post

    Hello,

    It seems that the template is not valid because the ScatterLineSeries.TrackBallTemplate is set in a ScatterPointSeries. You can fix this by changing the ScatterLineSeries.TrackBallTemplate to ScatterPointSereis.TrackBallTemplate.
    <telerik:ScatterPointSeries>
               <telerik:ScatterPointSeries.TrackBallTemplate>
               </telerik:ScatterPointSeries.TrackBallTemplate>
    </telerik:ScatterPointSeries>
    Also, in order to display the trackball visual element you will need to set ShowIntersectionPoints property of the behavior to True. Then you can use the TrackBallLineStyle property of the chart to hide the trackball line. 
    <telerik:RadCartesianChart.TrackBallLineStyle>
        <Style TargetType="Polyline">
            <Setter Property="Visibility" Value="Collapsed" />
        </Style>
    </telerik:RadCartesianChart.TrackBallLineStyle>
    I attached a sample project based on your code to show this approach. I hope it helps.

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top