stackedbar chart selecting the whole stack

5 posts, 1 answers
  1. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 28 Mar 2011 Link to this post

    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
  2. Answer
    Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 31 Mar 2011 Link to this post

    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
  3. DevCraft banner
  4. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 31 Mar 2011 Link to this post

    thats works great Evgenia

    thanks
    dco
  5. Melvin
    Melvin avatar
    12 posts
    Member since:
    Dec 2011

    Posted 16 Feb 2012 Link to this post

    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
  6. Melvin
    Melvin avatar
    12 posts
    Member since:
    Dec 2011

    Posted 16 Feb 2012 Link to this post

    I found the extension already anyway.

    It is located at Telerik.Windows.Controls.

    Thanks.
Back to Top
DevCraft banner