Display series label with Trackball Info Template

3 posts, 1 answers
  1. Matt
    Matt avatar
    2 posts
    Member since:
    Jan 2016

    Posted 25 May Link to this post

    Using the sample below, how would I get the "VendorName" property to display next to the values of each series in the trackball info popup, just like it would appear in the legend?

     

    <telerik:RadCartesianChart x:Name="chart" Palette="Summer" Height="209">
     
               <telerik:RadCartesianChart.HorizontalAxis>
                   <telerik:CategoricalAxis></telerik:CategoricalAxis>
               </telerik:RadCartesianChart.HorizontalAxis>
     
               <telerik:RadCartesianChart.VerticalAxis>
                   <telerik:LinearAxis HorizontalAlignment="Right"></telerik:LinearAxis>
               </telerik:RadCartesianChart.VerticalAxis>
     
               <telerik:RadCartesianChart.Behaviors>
                   <telerik:ChartTrackBallBehavior ShowTrackInfo="True"
                                              ShowIntersectionPoints="True" />
               </telerik:RadCartesianChart.Behaviors>
                
               <telerik:RadCartesianChart.SeriesProvider>
                   <telerik:ChartSeriesProvider Source="{Binding ElementName=window1, Path=vendorSalesByYear}">
                       <telerik:ChartSeriesProvider.SeriesDescriptors>
     
                           <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Data" ValuePath="Sales" CategoryPath="MonthName">
                               <telerik:CategoricalSeriesDescriptor.Style>
                                   <Style TargetType="telerik:LineSeries">
                                       <Setter Property="LegendSettings">
                                           <Setter.Value>
                                               <telerik:SeriesLegendSettings Title="{Binding VendorName}"/>
                                           </Setter.Value>
                                       </Setter>
                                        
                                       <Setter Property="TrackBallInfoTemplate">
                                           <Setter.Value>
                                               <DataTemplate>
     
                                                   <StackPanel Background="White">
                                                       <StackPanel Orientation="Horizontal" Background="Transparent">
                                                           <TextBlock Text="{Binding  VendorName}" />
                                                           <TextBlock Text=": "/>
                                                           <TextBlock Text="{Binding Path=DataPoint.Value, StringFormat=N0}" />
                                                       </StackPanel>
     
                                                   </StackPanel>
     
                                               </DataTemplate>
                                           </Setter.Value>
                                       </Setter>
                                        
                                   </Style>
                               </telerik:CategoricalSeriesDescriptor.Style>
                           </telerik:CategoricalSeriesDescriptor>
     
                       </telerik:ChartSeriesProvider.SeriesDescriptors>
                   </telerik:ChartSeriesProvider>
     
               </telerik:RadCartesianChart.SeriesProvider>
           </telerik:RadCartesianChart>
     
           <telerik:RadLegend Items="{Binding LegendItems, ElementName=chart}" Margin="5" >
               <telerik:RadLegend.ItemsPanel>
                   <ItemsPanelTemplate>
                       <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" />
                   </ItemsPanelTemplate>
               </telerik:RadLegend.ItemsPanel>
     
           </telerik:RadLegend>

     

    public  partial class MainWindow : Window
        {
            public RadObservableCollection<VendorYearlyData> vendorSalesByYear { get; set; }
     
            public MainWindow()
            {
                vendorSalesByYear = GetSampleData();           
                InitializeComponent();       
            }
     
            private RadObservableCollection<VendorYearlyData> GetSampleData()
            {
                var result = new RadObservableCollection<VendorYearlyData>();
     
                result.Add(new VendorYearlyData()
                {
                    VendorName = "Vendor A",
                    Data = new RadObservableCollection<SalesInfo>()
                {
                    new SalesInfo() { MonthName = "Jan", Sales = 5 },
                    new SalesInfo() { MonthName = "Feb", Sales = 7 },
                    new SalesInfo() { MonthName = "Mar", Sales = 6 },
                    new SalesInfo() { MonthName = "Apr", Sales = 8 }
                }
                });
     
                result.Add(new VendorYearlyData()
                {
                    VendorName = "Vendor B",
                    Data = new RadObservableCollection<SalesInfo>()
                {
                    new SalesInfo() { MonthName = "Jan", Sales = 15 },
                    new SalesInfo() { MonthName = "Feb", Sales = 18 },
                    new SalesInfo() { MonthName = "Mar", Sales = 19 },
                    new SalesInfo() { MonthName = "Apr", Sales = 23 }
                }
                });
     
     
                result.Add(new VendorYearlyData()
                {
                    VendorName = "Vendor C",
                    Data = new RadObservableCollection<SalesInfo>()
                {
                    new SalesInfo() { MonthName = "Jan", Sales = 21 },
                    new SalesInfo() { MonthName = "Feb", Sales = 25 },
                    new SalesInfo() { MonthName = "Mar", Sales = 26 },
                    new SalesInfo() { MonthName = "Apr", Sales = 25 }
                }
                });
     
                return result;
            }
        }
     
     
        public class SalesInfo
        {
            public string MonthName { get; set; }
            public double Sales { get; set; }
        }
     
        public class VendorYearlyData
        {
            public string VendorName { get; set; }
            public RadObservableCollection<SalesInfo> Data { get; set; }
        }

     

  2. Answer
    Martin
    Admin
    Martin avatar
    1101 posts

    Posted 26 May Link to this post

    Hello Matt,

    Thank you for the code snippets. 

    In order to get the VendorName and display it in the trackball info you can use the Presenter property of the DataPoint object in the TrackBallInfoTemplate. The Presenter holds a reference to the series that corresponds at the specific data point.
    <Setter Property="TrackBallInfoTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Background="White">
                    <StackPanel Orientation="Horizontal" Background="Transparent">
                        <TextBlock Text="{Binding Path=DataPoint.Presenter.DataContext.VendorName}" />
                        <TextBlock Text=": "/>
                        <TextBlock Text="{Binding Path=DataPoint.Value, StringFormat=N0}" />
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>

    I hope this helps.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Matt
    Matt avatar
    2 posts
    Member since:
    Jan 2016

    Posted 26 May in reply to Martin Link to this post

    Thank you. That's exactly what I was looking for.
Back to Top