stackedbar chart selecting the whole stack

[David Ocasio]

I have a stacked bar chart with two data series.

I am using the selectionchanged event to indicate to another external chart control the data to render when a bar is selected.

Since the data for the other chart derives from the whole stack
i would like to highlight both bars (the whole stack) when either  one is selected.
And unhighlight both when one is removed.

Ideally with one border highlight but if that is not possible a border highlight around each one would be acceptable.

Both series share the same itemsource.

<telerik:RadChart Grid.Column="0" Grid.Row="0" x:Name="chartYears" UseDefaultLayout="False" Margin="10" >
    <telerik:RadContextMenu.ContextMenu >
        <telerik:RadContextMenu x:Name="contextChartForcast">
            <telerik:RadMenuItem Header="Export to Excel" x:Name="menuExcelTotals" >
                <telerik:RadMenuItem.Icon>
                    <Image Source="/images/excel_16x16.png"  />
                </telerik:RadMenuItem.Icon>
            </telerik:RadMenuItem>
        </telerik:RadContextMenu>
    </telerik:RadContextMenu.ContextMenu>
    <Grid>
        <Grid.ColumnDefinitions>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="35" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <telerik:ChartTitle Grid.Row="0" x:Name="charttitle1" Content="Yearly Breakdown"   />
        <telerik:ChartArea Grid.Row="1" x:Name="chartarea1" SelectionChanged="chartarea1_SelectionChanged" Margin="10" EnableAnimations="False" Grid.Column="0" />
    </Grid>
    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping LegendLabel="Shipped Orders" ChartAreaName="chartarea1" >
            <telerik:SeriesMapping.SeriesDefinition   >
                <telerik:StackedBarSeriesDefinition StackGroupName="Revenue" ShowItemLabels="True" ShowItemToolTips="True" LegendDisplayMode="None" x:Name="barYear"   >
                    <telerik:StackedBarSeriesDefinition.Appearance>
                        <telerik:SeriesAppearanceSettings  />
                    </telerik:StackedBarSeriesDefinition.Appearance>
                    <telerik:StackedBarSeriesDefinition.InteractivitySettings >
                        <telerik:InteractivitySettings HoverScope="Item" SelectionScope="Item" SelectionMode="Single"  />
                    </telerik:StackedBarSeriesDefinition.InteractivitySettings>
                    <telerik:StackedBarSeriesDefinition.LabelSettings >
                        <telerik:BarLabelSettings LabelDisplayMode="Auto" ShowZeroValueLabels="False" />
                    </telerik:StackedBarSeriesDefinition.LabelSettings>
                </telerik:StackedBarSeriesDefinition>
            </telerik:SeriesMapping.SeriesDefinition>
            <telerik:SeriesMapping.ItemMappings>
                <telerik:ItemMapping DataPointMember="XCategory"    FieldName="PeriodName" />
                <telerik:ItemMapping DataPointMember="YValue"       FieldName="ShippedRevenue"  />
            </telerik:SeriesMapping.ItemMappings>
        </telerik:SeriesMapping>

        <telerik:SeriesMapping LegendLabel="Shipped Orders" ChartAreaName="chartarea1" >
            <telerik:SeriesMapping.SeriesDefinition   >
                <telerik:StackedBarSeriesDefinition StackGroupName="Revenue" ShowItemLabels="True" ShowItemToolTips="True" LegendDisplayMode="None"     >
                    <telerik:StackedBarSeriesDefinition.Appearance>
                        <telerik:SeriesAppearanceSettings  />
                    </telerik:StackedBarSeriesDefinition.Appearance>
                    <telerik:StackedBarSeriesDefinition.InteractivitySettings >
                        <telerik:InteractivitySettings HoverScope="Item" SelectionScope="Item" SelectionMode="Single"  />
                    </telerik:StackedBarSeriesDefinition.InteractivitySettings>
                    <telerik:StackedBarSeriesDefinition.LabelSettings >
                        <telerik:BarLabelSettings LabelDisplayMode="Auto" ShowZeroValueLabels="False" />
                    </telerik:StackedBarSeriesDefinition.LabelSettings>
                </telerik:StackedBarSeriesDefinition>
            </telerik:SeriesMapping.SeriesDefinition>
            <telerik:SeriesMapping.ItemMappings>
                <telerik:ItemMapping DataPointMember="XCategory"    FieldName="PeriodName" />
                <telerik:ItemMapping DataPointMember="YValue"       FieldName="OpenRevenue"  />
            </telerik:SeriesMapping.ItemMappings>
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>

Imports System.Collections.ObjectModel

Public Class CustomerOnTimeDeliveryPeriod
    Inherits agDataClassBase

    <Display(Name:="PeriodName", Description:="PeriodName")> _
    Public Property PeriodName() As String
        Get
            Return _PeriodName
        End Get
        Set(ByVal value As String)
            _PeriodName = value
            FirePropertyChanged("PeriodName")
        End Set
    End Property
    Protected _PeriodName As String

    <Display(Name:="Revenue", Description:="Revenue")> _
    Public Property ShippedRevenue() As Decimal
        Get
            Return _ShippedRevenue
        End Get
        Set(ByVal value As Decimal)
            _ShippedRevenue = value
            FirePropertyChanged("Revenue")
        End Set
    End Property
    Protected _ShippedRevenue As Decimal = 0

    <Display(Name:="OpenRevenue", Description:="OpenRevenue")> _
    Public Property OpenRevenue() As Decimal
        Get
            Return _OpenRevenue
        End Get
        Set(ByVal value As Decimal)
            _OpenRevenue = value
            FirePropertyChanged("OpenRevenue")
        End Set
    End Property
    Protected _OpenRevenue As Decimal = 0

    <Display(Name:="CombinedReveue", Description:="CombinedReveue")> _
    Public Property CombinedReveue() As Decimal
        Get
            Return _CombinedReveue
        End Get
        Set(ByVal value As Decimal)
            _CombinedReveue = value
            FirePropertyChanged("CombinedReveue")
        End Set
    End Property
    Protected _CombinedReveue As Decimal

    <Display(Name:="lstOpenMonthly", Description:="lstOpenMonthly")> _
    Public Property lstOpenMonthly() As List(Of vCustomerOpenMonthlyStat)
        Get
            Return _lstOpenMonthly
        End Get
        Set(ByVal value As List(Of vCustomerOpenMonthlyStat))
            _lstOpenMonthly = value
            FirePropertyChanged("lstOpenMonthly")
        End Set
    End Property
    Protected _lstOpenMonthly As New List(Of vCustomerOpenMonthlyStat)

    <Display(Name:="lstShippedMonthly", Description:="lstShippedMonthly")> _
    Public Property lstShippedMonthly() As List(Of vCustomerShippedMonthlyStat)
        Get
            Return _lstShippedMonthly
        End Get
        Set(ByVal value As List(Of vCustomerShippedMonthlyStat))
            _lstShippedMonthly = value
            FirePropertyChanged("lstShippedMonthly")
        End Set
    End Property
    Protected _lstShippedMonthly As New List(Of vCustomerShippedMonthlyStat)

    <Display(Name:="Children", Description:="Children")> _
    Public Property Children() As ObservableCollection(Of CustomerOnTimeDeliveryPeriod)
        Get
            Return _Children
        End Get
        Set(ByVal value As ObservableCollection(Of CustomerOnTimeDeliveryPeriod))
            _Children = value
            FirePropertyChanged("Children")
        End Set
    End Property
    Protected _Children As New ObservableCollection(Of CustomerOnTimeDeliveryPeriod)

End Class

thanks
dco

[Evgenia]

Hello David,

You can subscribe to ItemClick event of the ChartArea and Select all StackedBars that have same XCategory (XValue) compared to the selected StackedBar's XCategory:

void ChartArea_ItemClick(object sender, ChartItemClickEventArgs e)
      {
          if (RadChart1.DefaultView.ChartArea.SelectedItems.Count > 1)
          {
              RadChart1.DefaultView.ChartArea.ClearSelection();
          }
          List<DataPoint> barsInStack = new List<DataPoint>();
          foreach (StackedBar item in this.RadChart1.DefaultView.ChartArea.ChildrenOfType<StackedBar>())
          {
              if (item.DataPoint.XCategory == e.DataPoint.XCategory)
              {
                  barsInStack.Add(item.DataPoint);
              }
          }
          RadChart1.DefaultView.ChartArea.SelectItems(barsInStack);
      }

NOTE that you should set the Interactivity's SelectionMode to Multiple in order to select the whole Stack of Bars.

Greetings,
Evgenia
the Telerik team

[David Ocasio]

thats works great Evgenia

thanks
dco

[Melvin]

Hi,

I need help here. I can't seem to find the extension for "ChildrenOfType" and my project cannot be compiled. Where can I get the reference for "ChildrenOfType"?

I have been googling for the whole morning but can't find the desired answer.

Thanks and regards,
Melvin

[Melvin]

I found the extension already anyway.

It is located at Telerik.Windows.Controls.

Thanks.