RadCartesianChart First and Last data doesn't show on the Trackball/Tooltip Behavior

[ahmar20]

Description

I am using RadCartesianChart in my UWP app to plot some values and there is a little issue. The data when plotted on the chart shows most of the values accurately but with some values it just skips the data rows entirely and then moves on to next. Also it does not show the first data row and the last one on mouse-over behavior which works well otherwise in the data. Have a look at the screenshots.
In first one the trackball is at start but it does not show the first value, it shows 2nd or 3rd value from the data. If you actually look close enough there is a small gap there which indicates that it wont go any further to the start. So it also happens at the end of the data with the same behavior. Second thing can be seen from the 2nd and 3rd screenshots where the tooltip is being shown but there is a lot of gap between the data. I think it could be due to the the fact that value of the actual data is quite same there but there is difference in time and it's around 15 minutes but still it skips all the data and goes to the next intersection point.

Steps to Reproduce

1. Use any type of data value and plot it on the Chart, just make sure the data has atleast 3 values in it otherwise it would not make sense
2. Enable the trackball behavior and see for yourself

Expected Behavior

The trackball behavior should show all the data that is available on the chart and should not skip it.

Actual Behavior

As discussed above.

Basic Information

• Version with issue: 1.0.1.6
• IDE: VS Community 2017
• UWP SDK: I am running Windows 10 v18875 and targeting v17763
• Nuget Packages: 1.0.1.6

Screenshots

Reproduction Link

If you want the actual data that I am using, please head to https://dps.psx.com.pk/ in your browser so the website sets a cookie and then head to https://dps.psx.com.pk/timeseries/int/KSE100 to see the actual data. This data is in reverse format as so the first value will be the last value for the day and the last value will be the first one for the day. So you can reverse the whole JsonArray and be done with it. Every item in the array has 3 values: UNIX timestamp, Current Value at that time and Volume. It's a Stock Exchange website.

The XAML part that I am using is here:

<chart:RadCartesianChart
                            Name="seriesChart"
                            MinHeight="200">
                            <chart:RadCartesianChart.HorizontalAxis>
                                <chart:DateTimeContinuousAxis x:Name="seriesChartDateAxis" LabelFormat="{}{0,0:hh:mm}" MaximumTicks="5"/>
                            </chart:RadCartesianChart.HorizontalAxis>
                            <chart:RadCartesianChart.VerticalAxis>
                                <chart:LinearAxis/>
                            </chart:RadCartesianChart.VerticalAxis>
                            <chart:AreaSeries
                                ItemsSource="{Binding FilteredSeries, Mode=OneWay, UpdateSourceTrigger=Default}">
                                <chart:AreaSeries.ValueBinding>
                                    <chart:PropertyNameDataPointBinding PropertyName="CurrentValue"/>
                                </chart:AreaSeries.ValueBinding>
                                <chart:AreaSeries.CategoryBinding>
                                    <chart:PropertyNameDataPointBinding PropertyName="SeriesTime"/>
                                </chart:AreaSeries.CategoryBinding>
                                <chart:ChartTrackBallBehavior.TrackInfoTemplate>
                                    <DataTemplate>
                                        <Border Background="LimeGreen" Padding="5" MinWidth="200">
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                </Grid.RowDefinitions>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="Auto"/>
                                                </Grid.ColumnDefinitions>
                                                <TextBlock
                                                    Text="{Binding DataPoint.DataItem.SeriesTime, Mode=OneWay, UpdateSourceTrigger=Default}"
                                                    Style="{StaticResource BaseTextBlockStyle}" Grid.ColumnSpan="2"/>
                                                <TextBlock Grid.Row="1">
                                                    <Run Text="{Binding DataPoint.DataItem.Name, Mode=OneWay, UpdateSourceTrigger=Default}"/>
                                                </TextBlock>
                                                <TextBlock Grid.Row="1" Grid.Column="1"
                                                           Text="{Binding DataPoint.DataItem.CurrentValue, Mode=OneWay, UpdateSourceTrigger=Default, Converter={StaticResource NumberToFormattedCountConverter}}"/>
                                                <TextBlock Grid.Row="2"
                                                           Text="Volume"/>
                                                <TextBlock
                                                    Grid.Row="2"
                                                    Grid.Column="1"
                                                    Text="{Binding DataPoint.DataItem.Volume, Mode=OneWay, UpdateSourceTrigger=Default, Converter={StaticResource NumberToFormattedCountConverter}}"/>
                                            </Grid>
                                        </Border>
                                    </DataTemplate>
                                </chart:ChartTrackBallBehavior.TrackInfoTemplate>
                            </chart:AreaSeries>
                            <chart:RadCartesianChart.Grid>
                                <chart:CartesianChartGrid MajorLinesVisibility="XY"/>
                            </chart:RadCartesianChart.Grid>
                            <chart:RadCartesianChart.Behaviors>
                                <chart:ChartTrackBallBehavior InfoMode="Multiple" ShowIntersectionPoints="True" SnapMode="ClosestPoint">
                                    <chart:ChartTrackBallBehavior.InfoStyle>
                                        <Style TargetType="chartPrimitives:TrackBallLineControl">
                                            <Setter Property="Background" Value="#00000000"/>
                                        </Style>
                                    </chart:ChartTrackBallBehavior.InfoStyle>
                                </chart:ChartTrackBallBehavior>
                            </chart:RadCartesianChart.Behaviors>
                        </chart:RadCartesianChart>

[APopatanasov]

Hi @ahmar20 ,

Thank you for the detailed description. Using it I was able to reproduce the described behavior. Basically, after checking the ChartTrackBallBehavior implementation there are a few places in the code that could be improved.

If you are interested on working on this improvements you can check the UpdateVisuals method that plays a major role whether the TrackBall to be visualized on not using the mouse point and the constraints of the Chart. By improving the logic in that particular method I believe part of your issues will be resolved.

You can submit a PR and I will be glad to review it. I hope the provided information will be helpful for you.

[ahmar20]

I have seen the implementation and I think that something may need to be changed from HandleDrag and/or UpdateViuals functions. Sadly I dont think I can implement it myself. Someone else may have to do it. I may be able to help in the future but at the moment I am working on some projects and cant spare much time.