Custom Tooltip

4 posts, 0 answers
  1. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 05 Jan Link to this post

    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

  2. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 07 Jan in reply to Shilpa Link to this post

    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>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Ivan
    Admin
    Ivan avatar
    44 posts

    Posted 07 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 07 Jan in reply to Ivan Link to this post

    Thank you Ivan. 

    I made the changes :)

Back to Top