[Solved] How can I determine a data point for a stacked bar series from a Tapped event?

[Geri]

Dear reader(s),

I have the following situation. I have a stacked bar chart with multiple, dynamic series (in code), in Xaml in C#. The chart is contained in a grid, which is contained in a frame from another page (the main page). The frame, again, is part of a grid.

The bars are stacked vertically. All is displayed correctly. 

I want to be able to click on the chart, determine what data belongs to it, and jump to another page (not a chart) with that specific information..

The problem is that the ChartSelectionBehavior doesn't appear to detect the correct series. Even clicking on a bar somehow selects a different bar than the one that was clicked. It would appear that the calculation of the bar is somehow off.
I believe that problem was described already in this forum.
So, instead I would like to be able to use the tapped event on the grid. However, I'm unable to find a method to determine what data point belongs to the location of the tapped event.
Any pointers?

The code of the framed page containing the chart is below:

    <Grid>
        <Grid.Resources>
            <Style TargetType="Line" x:Key="StripLinesStyle">
                <Setter Property="Stroke" Value="{StaticResource AppceteraDarkColor66}"></Setter>
                <Setter Property="StrokeDashArray" Value="2 1"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120"/>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
            <StackPanel Orientation="Horizontal" Margin="5">               
                <TextBlock Text="Year/Month:" Style="{StaticResource BaselineTextStyle}" Width="100"/>
                <Input:RadDatePicker x:Name="YearMonthPicker" SelectorFormat="y/m" VerticalAlignment="Top" Height="25" Width="120" ValueChanged="DateChanged"  />
            </StackPanel>
            <Primitives:RadLegendControl x:Name="legend" LegendProvider="{Binding ElementName=chart}" >
                <Primitives:RadLegendControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </Primitives:RadLegendControl.ItemsPanel>
                <Primitives:RadLegendControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Width="20" Height="20" Fill="{Binding Fill}" Visibility="{Binding Visibility}"/>
                            <TextBlock Text="{Binding Title}" Foreground="{StaticResource AppceteraDarkForegroundThemeBrush}"  Margin="10" FontWeight="Bold" Visibility="{Binding Visibility}" />
                        </StackPanel>
                    </DataTemplate>
                </Primitives:RadLegendControl.ItemTemplate>
            </Primitives:RadLegendControl>
        </StackPanel>
        <telerik:RadCartesianChart x:Name="chart" Tapped="OnTapped" Grid.Row="0" Grid.Column="2" >
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeCategoricalAxis Title="Date"
                                                    x:Name="TimeAxis"
                                                    LabelFitMode="MultiLine"
                                                    FontWeight="Bold"
                                                    FontSize="14"
                                                    Foreground="{StaticResource AppceteraDarkForegroundThemeBrush}"  >
                    <telerik:DateTimeCategoricalAxis.TitleTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" Foreground="{StaticResource AppceteraDarkForegroundThemeBrush}"/>
                        </DataTemplate>
                    </telerik:DateTimeCategoricalAxis.TitleTemplate>
                </telerik:DateTimeCategoricalAxis>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Title="Time"
                                    Minimum="0"
                                    MajorStep="15"
                                    LabelInterval="4"
                                    FontWeight="Bold"
                                    FontSize="14"
                                    Foreground="{StaticResource AppceteraDarkForegroundThemeBrush}" >
                    <telerik:LinearAxis.TitleTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" Foreground="{StaticResource AppceteraDarkForegroundThemeBrush}"/>
                        </DataTemplate>
                    </telerik:LinearAxis.TitleTemplate>
                </telerik:LinearAxis>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY"
                                            Foreground="{StaticResource AppceteraDarkForegroundThemeBrush}"
                                            BorderBrush="{StaticResource AppceteraDarkForegroundThemeBrush}"
                                            MajorXLineStyle="{StaticResource StripLinesStyle}"
                                            MajorYLineStyle="{StaticResource StripLinesStyle}"  />
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.Behaviors>
                <!--<telerik:ChartSelectionBehavior SelectionChanged="ChartSelectionBehavior_SelectionChanged" DataPointSelectionMode="Single"  /> -->
                <telerik:ChartPanAndZoomBehavior PanMode="Horizontal" ZoomMode="None" />
            </telerik:RadCartesianChart.Behaviors>
        </telerik:RadCartesianChart>
    </Grid>


Thanks and kind regards,

  Geri Wolters

[Ivaylo Gergov]

Hello Geri,

Thank you for contacting us.

Indeed there is a problem with the ChartSelectionBehavior in the current version of the control that exhibits itself when the chart origin (top-left position) differs from the application origin (selection is incorrect for some items). Our developers have already addressed this problem and the fix will be included in the internal build scheduled for later today so you will be able to get the updated binaries.

Meanwhile, as a workaround you can achieve the desired functionality with the Tapped event like this (note that you need to set BarSeries.IsHitTestVisible property to True and remove the ChartSelectionBehavior for this to work):

XAML

<telerik:RadCartesianChart Tapped="RadCartesianChart_Tapped_1" PaletteName="DefaultDark">
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:BarSeries IsHitTestVisible="True">
        <telerik:BarSeries.DataPoints>
            <charting:CategoricalDataPoint Category="a" Value="1" />
            <charting:CategoricalDataPoint Category="b" Value="2" />
            <charting:CategoricalDataPoint Category="c" Value="3" />
        </telerik:BarSeries.DataPoints>
    </telerik:BarSeries>

</telerik:RadCartesianChart>

C#

private void RadCartesianChart_Tapped_1(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
    var barItem = e.OriginalSource as Border;
    if (barItem != null)
    {
        CategoricalDataPoint dataPoint = barItem.Tag as CategoricalDataPoint;
        if (dataPoint != null)
        {
            // handle the bar item click as appropriate based on the information provided by its DataPoint
            // ...
        }
    }
}

I hope this information is useful. Let me know if I can assist you any further.

 

Regards,
Ivaylo Gergov
the Telerik team

[Geri]

The solution seems to work well. Thanks very much!