Display series label with Trackball Info Template

[Matt]

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; }
    }

 

[Martin Ivanov]

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

[It]

Thanks for providing this answer that helped

 

[Matt]

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

[li]

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 !!!!!

 

 

 

 

[Martin Ivanov]

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