Display series label with Trackball Info Template

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

    Posted 25 May 2016 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 Ivanov
    Admin
    Martin Ivanov avatar
    1258 posts

    Posted 26 May 2016 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. Matt
    Matt avatar
    2 posts
    Member since:
    Jan 2016

    Posted 26 May 2016 in reply to Martin Ivanov Link to this post

    Thank you. That's exactly what I was looking for.
  4. li
    li avatar
    6 posts
    Member since:
    Feb 2016

    Posted 24 Apr Link to this post

    I  refer to your writing but can not be achieved.   There are my codes(refer to your demo actually)

    XAML:

     <telerik:RadCartesianChart Palette="Flower">
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" />
                </telerik:RadCartesianChart.Behaviors>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeContinuousAxis MajorStepUnit="Second" MajorStep="5" LabelFormat="mm:ss" TickOrigin="2014/11/05" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis />
                </telerik:RadCartesianChart.VerticalAxis>
                
                <!--<telerik:RadCartesianChart.TooltipTemplate>
                    <DataTemplate>
                        <Border>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Presenter.DataContext.name}"/>
                                <TextBlock Text="{Binding YVal}"/>
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </telerik:RadCartesianChart.TooltipTemplate>-->
                
                <telerik:RadCartesianChart.SeriesProvider>
                    <telerik:ChartSeriesProvider Source="{Binding SeriesModels}">
                        <telerik:ChartSeriesProvider.SeriesDescriptors>
                            <telerik:CategoricalSeriesDescriptor CategoryPath="Date" ValuePath="YVal" ItemsSourcePath="Data"  TypePath="Type">
                                <!--<telerik:CategoricalSeriesDescriptor.Style>
                                    <Style TargetType="telerik:LineSeries">
                                        <Setter Property="StrokeThickness" Value="2"/>
                                    </Style>
                                </telerik:CategoricalSeriesDescriptor.Style>-->
                                <telerik:CategoricalSeriesDescriptor.Style>
                                        <Style TargetType="telerik:LineSeries">
                                            <Setter Property="StrokeThickness" Value="2"/>
                                            <Setter Property="TrackBallInfoTemplate">
                                                <Setter.Value>
                                                    <DataTemplate>
                                                        <Border>
                                                            <StackPanel Orientation="Horizontal" >
                                                            <TextBlock Text="{Binding DataPoint.Presenter.DataContext.name,StringFormat='线名称: {0}'}"/>
                                                            <TextBlock Text="{Binding DataPoint.Value,StringFormat='输出参数: {0}'}"/>
                                                            </StackPanel>
                                                        </Border>
                                                    </DataTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </telerik:CategoricalSeriesDescriptor.Style>
                            </telerik:CategoricalSeriesDescriptor>
                        </telerik:ChartSeriesProvider.SeriesDescriptors>
                    </telerik:ChartSeriesProvider>
                </telerik:RadCartesianChart.SeriesProvider>
            </telerik:RadCartesianChart>

     

    Model:  class:  SeriesVM ,    PlotInfo,

    Add a new attribute to  “SeriesVM ”   named   "name"

    I want to see lineseries  show their  "name " informations when  my  mouse move on the chart ,  but  I can't achieve with your suggestion.

    Please tell me how to do it, Thanks !!!!!

     

     

     

     

  5. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1258 posts

    Posted 25 Apr Link to this post

    Hello Li,

    The tooltip of the chart will be displayed only when the mouse is over a visual element of the series (an ellipse, a bar, a candlestick, etc.). On the other hand the line series doesn't have a visual element for its data points and the tooltip won't be displayed. You won't be able to use the behavior to display a tooltip when you mouse over the mouse. Instead you can try the following approaches:
    • Use the chart's TrackBall behavior instead of tooltip.
    • Define a DefaultVisualStyle for the line series. This way when you hover the data point's visual (ellipse by default) a tooltip will be displayed.
    • Or if you want to show a tooltip when you hover the line of the series you can implement this with custom code. For example, you can subscribe for the chart's mouse events to track the mouse position. Then use the Conversion API of the chart to convert between mouse coordinates and chart coordinates. And use RadToolTip for example to display a custom tooltip.

    Regards,
    Martin
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top