Custom Tooltip

[Shilpa]

Hi,

I am using a tooltip template in Rad Cartesian Chart View for ScatterSplineSeries. I defined Point Template and tooltip template and able to display X & Y Values. I want to Display the Horizontal Axis Title along with X value and Vertical Axis Title with Y Value. Also I would like to display the spline name too. Somehow I am not able to display the contents. I read in telreik about DataItem property of DataPoint class and even tried using it but unsuccessful .Here is my XAML and View Model.

<telerik:RadCartesianChart x:Name="CartesianChart" Visibility="Visible" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                                  Style="{StaticResource RadCartesianChartStyle1}">
           <telerik:RadCartesianChart.Grid>
               <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineStyle="{StaticResource GridLineStyle}"
                                           MajorYLineStyle="{StaticResource GridLineStyle}" />
           </telerik:RadCartesianChart.Grid>
           <telerik:RadCartesianChart.HorizontalAxis>
               <telerik:LinearAxis Title="{Binding HorizontalAxisTitle}" Minimum="0" Maximum="35" LineThickness="2" LineStroke="Transparent"
                                   Foreground="{DynamicResource BRUSH_TEXT}" Style="{StaticResource LinearAxisStyle}" />
           </telerik:RadCartesianChart.HorizontalAxis>
           <telerik:RadCartesianChart.VerticalAxis>
               <telerik:LinearAxis Minimum="0" Maximum="120" Title="{Binding VerticalAxisTitle}" LineThickness="2" Foreground="{DynamicResource BRUSH_TEXT}"
                                   Style="{StaticResource LinearAxisStyle}" />
           </telerik:RadCartesianChart.VerticalAxis>

           <telerik:RadCartesianChart.Behaviors>
               <telerik:ChartPanAndZoomBehavior DragMode="Pan" ZoomMode="Both" PanMode="Both" />
               <telerik:ChartTooltipBehavior />
           </telerik:RadCartesianChart.Behaviors>


           <telerik:RadCartesianChart.SeriesProvider>
               <telerik:ChartSeriesProvider x:Name="ChartSeriesProvider" Source="{Binding SplineCollection}">

                   <telerik:ChartSeriesProvider.SeriesDescriptors>

                       <telerik:ScatterSeriesDescriptor ItemsSourcePath="Points" YValuePath="YValue" XValuePath="XValue">
                           <telerik:ScatterSeriesDescriptor.Style>
                               <Style TargetType="telerik:ScatterSplineSeries">
                                   <Setter Property="StrokeThickness" Value="{Binding StrokeThickness}" />
                                   <Setter Property="Stroke" Value="{Binding Color}" />
                                   <Setter Property="TooltipTemplate">
                                       <Setter.Value>
                                           <DataTemplate>
                                               <Border Background="{DynamicResource BRUSH_TOOLTIP}" BorderBrush="{DynamicResource BRUSH_TOOLTIP}"
                                                       BorderThickness="1" Padding="10">
                                                   <StackPanel Background="{DynamicResource BRUSH_TOOLTIP}">
                                                       <StackPanel Width="{TemplateBinding Width}" Orientation="Horizontal"
                                                                   Background="{DynamicResource BRUSH_TOOLTIP}" Margin="5">
                                                           <TextBlock Text="{Binding DataItem.VerticalAxisTitle}" />
                                                           <TextBlock Text="{Binding YValue}" />
                                                       </StackPanel>
                                                       <StackPanel Width="{TemplateBinding Width}" Orientation="Horizontal"
                                                                   Background="{DynamicResource BRUSH_TOOLTIP}" Margin="5">
                                                           <TextBlock Text="{Binding DataItem.HorizontalAxisTitle}" />
                                                           <TextBlock Text="{Binding XValue}" />
                                                       </StackPanel>
                                                       <TextBlock Text="{Binding DataItem.Name}" />
                                                   </StackPanel>
                                               </Border>
                                           </DataTemplate>
                                       </Setter.Value>
                                   </Setter>
                                   <Setter Property="PointTemplate">
                                       <Setter.Value>
                                           <DataTemplate>
                                               <Ellipse Width="20" Height="20" Fill="{DynamicResource BRUSH_SELECTION}" />
                                           </DataTemplate>
                                       </Setter.Value>
                                   </Setter>
                                   <Style.Triggers>
                                       <DataTrigger Binding="{Binding IsDashed}" Value="True">
                                           <Setter Property="DashArray" Value="5" />
                                       </DataTrigger>
                                   </Style.Triggers>
                               </Style>
                           </telerik:ScatterSeriesDescriptor.Style>
                       </telerik:ScatterSeriesDescriptor>
                   </telerik:ChartSeriesProvider.SeriesDescriptors>
               </telerik:ChartSeriesProvider>
           </telerik:RadCartesianChart.SeriesProvider>
       </telerik:RadCartesianChart>

 

ViewModels

public class MainViewModel : ViewModelBase

    {

        public string HorizontalAxisTitle { get; set; }

 

        public string VerticalAxisTitle { get; set; }

 

        public ObservableCollection<SplineSeries> SplineCollection { get; set; }

 

        public MainViewModel()

        {

            HorizontalAxisTitle = string.Format("{0}", "Grey Value");

            VerticalAxisTitle = string.Format("{0}", "Volume");

            this.SplineCollection = GetSplineCollection();

        }

 

        private ObservableCollection<SplineSeries> GetSplineCollection()

        {

            var result = new ObservableCollection<SplineSeries>

            {

                new SplineSeries()

                {

                    Color = new SolidColorBrush(Colors.Red),

                    StrokeThickness = 2,

                    Name = "Structure1",

                    Points = new ObservableCollection<Data>()

                    {

                        new Data() {XValue = 0, YValue = 100},

                        new Data() {XValue = 5, YValue = 100},

                        new Data() {XValue = 9, YValue = 90},

                        new Data() {XValue = 10, YValue = 50},

                        new Data() {XValue = 20, YValue = 80},

                        new Data() {XValue = 25, YValue = 60},

                        new Data() {XValue = 30, YValue = 0}

                    }

                },

                new SplineSeries()

                {

                    Color = new SolidColorBrush(Colors.Orange),

                    IsDashed = true,

                    StrokeThickness = 2,

                    Name = "Structure2",

                    Points = new ObservableCollection<Data>()

                    {

                        new Data() {XValue = 0, YValue = 100},

                        new Data() {XValue = 5, YValue = 100},

                        new Data() {XValue = 10, YValue = 50},

                        new Data() {XValue = 20, YValue = 0}

                    }

                }

            };

            return result;

        }

public class SplineSeries : ViewModelBase

    {

        private SolidColorBrush myBrush = new SolidColorBrush( Colors.OrangeRed );

        public SolidColorBrush Color

        {

            get { return myBrush; }

            set { myBrush = value; }

        }

        public string  Name { get; set; }

        public double StrokeThickness { get; set; }

 

        public bool IsDashed { get; set; }

 

        public ObservableCollection<Data> Points { get; set; }

    }

 

public class Data:ViewModelBase
   {
       public double XValue { get; set; }
       public double YValue { get; set; }
   }

How do I acheive this. Kindly Help me

[Shilpa]

Hi,

I figured out that I had to use parent CartesianChart's Datacontext and set the value using Binding. Now I am able to display Horizontal and Vertical Axis Title in tooltip template.

Here is what I did

<telerik:RadCartesianChart.TooltipTemplate>
                <DataTemplate>
                    <Border Background="{DynamicResource BRUSH_TOOLTIP}" BorderBrush="{DynamicResource BRUSH_TOOLTIP}" BorderThickness="1" Padding="10">
                        <StackPanel Background="{DynamicResource BRUSH_TOOLTIP}">
                            <StackPanel Width="{TemplateBinding Width}" Orientation="Horizontal" Background="{DynamicResource BRUSH_TOOLTIP}" Margin="5">
                                <TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type telerik:RadCartesianChart}}, Path=DataContext.VerticalAxisTitle}" />
                                <TextBlock Text="{Binding YValue}" />
                            </StackPanel>
                            <StackPanel Width="{TemplateBinding Width}" Orientation="Horizontal" Background="{DynamicResource BRUSH_TOOLTIP}" Margin="5">
                                <TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type telerik:RadCartesianChart}}, Path=DataContext.HorizontalAxisTitle}" />
                                <TextBlock Text="{Binding XValue}" />
                            </StackPanel>
                            <TextBlock Text="{Binding Presenter.DisplayName}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </telerik:RadCartesianChart.TooltipTemplate>

[Ivan]

Hello Shilpa,

In order to display the spline name with your setup, you can use a small change inside the tooltip template. It is demonstrated in the following code snippet. The amendment is marked in orange.

<telerik:RadCartesianChart.TooltipTemplate>

<DataTemplate>

<Border BorderThickness="1" Padding="10">

<StackPanel>

<StackPanel Width="{TemplateBinding Width}" Orientation="Horizontal" Margin="5">

<TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadCartesianChart}}, Path=DataContext.VerticalAxisTitle}" /> 
     <TextBlock Text="{Binding YValue}" />

</StackPanel>

<StackPanel Width="{TemplateBinding Width}" Orientation="Horizontal" Margin="5">

<TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadCartesianChart}}, Path=DataContext.HorizontalAxisTitle}" />

<TextBlock Text="{Binding XValue}" />

</StackPanel>
      <TextBlock Text="{Binding Presenter.DataContext.Name}" />
    </StackPanel>

</Border>

 </DataTemplate>

</telerik:RadCartesianChart.TooltipTemplate>

With this setup the DataContext of the Presenter is the SplineSeries object, where the property Name can be accessed.

If you have further questions about this let us know.

Regards,
Ivan
Telerik

[Shilpa]

Thank you Ivan. 

I made the changes :)