SurfaceSeries3D not showing Tooltips

5 posts, 0 answers
  1. Sanem
    Sanem avatar
    3 posts
    Member since:
    Sep 2017

    Posted 06 Sep Link to this post

    Hi, we are evaluating DevCraft - the most critical portion that will affect our decision is the 3D charts functionality in WPF for our software. I used the WPF sample code in this https://github.com/telerik/xaml-sdk/tree/master/ChartView3D/WPF and successfully created a Surface Plot with colorizer.

     

    Yet no matter what I do I cannot get the Tooltips to work - Tooltips are critical for our functionality and we need to show the datapoint that is closest in the surface plot in order to satisfy our need. 

    I followed the directions in http://docs.telerik.com/devtools/wpf/controls/radchartview3d/features/behaviors/tooltipbehavior3d with no success.
     
    The code below is my modified version of the code in the github to add tooltips.

    https://github.com/telerik/xaml-sdk/blob/master/ChartView3D/WPF/ValueGradientColorizer/SurfaceGradients.xaml

     

    I am using this project in Windows 10 professional with Telerik UI for WPF version 2017.2.629.0

    A quick response would be appreciated since I will have to present a report tomorrow comparing Telerik with alternative 3D visualization libraries. 

    Kind regards

    <UserControl x:Class="ValKueGradientColorizer.SurfaceGradients"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 mc:Ignorable="d"
                 d:DesignHeight="300" d:DesignWidth="300">
        <Grid>
            <telerik:RadCartesianChart3D >
                <telerik:RadCartesianChart3D.TooltipTemplate>
                    <DataTemplate>
                        <StackPanel Background="Fuchsia" MinHeight="100" MinWidth="100">
                            <StackPanel Orientation="Horizontal"  Background="Yellow">
                                <TextBlock Text="X - " FontWeight="Bold" Foreground="Blue"/>
                                <TextBlock Text="{Binding XValue}"  />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal"  Background="Yellow">
                                <TextBlock Text="Y - " FontWeight="Bold" />
                                <TextBlock Text="{Binding YValue}"   Foreground="Blue"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" Background="Yellow">
                                <TextBlock Text="Z - " FontWeight="Bold" />
                                <TextBlock Text="{Binding ZValue}"   Foreground="Blue"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
     
                </telerik:RadCartesianChart3D.TooltipTemplate>
                <telerik:RadCartesianChart3D.XAxis>
                    <telerik:LinearAxis3D />
                </telerik:RadCartesianChart3D.XAxis>
                <telerik:RadCartesianChart3D.YAxis>
                    <telerik:LinearAxis3D />
                </telerik:RadCartesianChart3D.YAxis>
                <telerik:RadCartesianChart3D.ZAxis>
                    <telerik:LinearAxis3D />
                </telerik:RadCartesianChart3D.ZAxis>
                <telerik:RadCartesianChart3D.Grid>
                    <telerik:CartesianChart3DGrid />
                </telerik:RadCartesianChart3D.Grid>
                <telerik:RadCartesianChart3D.Behaviors>
                    <telerik:Chart3DTooltipBehavior InitialShowDelay="200" ShowDuration="200000">
                         
                    </telerik:Chart3DTooltipBehavior>
                    <telerik:Chart3DCameraBehavior />
                </telerik:RadCartesianChart3D.Behaviors>
     
                <telerik:RadCartesianChart3D.Series>
                    <telerik:SurfaceSeries3D XValueBinding="X"
                                             YValueBinding="Y"
                                             ZValueBinding="Z"
                                             ItemsSource="{Binding}"
                                             ToolTipService.ShowOnDisabled="True"
                                              
                                             >
     
                        <telerik:SurfaceSeries3D.Colorizer>
                            <telerik:SurfaceSeries3DValueGradientColorizer IsAbsolute="True">
                                <telerik:SurfaceSeries3DValueGradientColorizer.GradientStops>
                                    <GradientStopCollection>
                                        <GradientStop Offset="-100" Color="Blue" />
                                        <GradientStop Offset="50" Color="Green" />
                                        <GradientStop Offset="100" Color="Red" />
                                    </GradientStopCollection>
                                </telerik:SurfaceSeries3DValueGradientColorizer.GradientStops>
                            </telerik:SurfaceSeries3DValueGradientColorizer>
                        </telerik:SurfaceSeries3D.Colorizer>
                        <telerik:SurfaceSeries3D.ToolTip>
                            <StackPanel MinWidth="200" MinHeight="200" Background="Fuchsia" ><TextBlock Background="Aqua" Foreground="Black">100000</TextBlock></StackPanel>
                        </telerik:SurfaceSeries3D.ToolTip>
                        <telerik:SurfaceSeries3D.TooltipTemplate>
                            <DataTemplate>
                                <StackPanel Background="Fuchsia" MinHeight="100" MinWidth="100">
                                    <StackPanel Orientation="Horizontal"  Background="Yellow">
                                        <TextBlock Text="X - " FontWeight="Bold" Foreground="Blue"/>
                                        <TextBlock Text="{Binding XValue}"  />
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal"  Background="Yellow">
                                        <TextBlock Text="Y - " FontWeight="Bold" />
                                        <TextBlock Text="{Binding YValue}"   Foreground="Blue"/>
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal" Background="Yellow">
                                        <TextBlock Text="Z - " FontWeight="Bold" />
                                        <TextBlock Text="{Binding ZValue}"   Foreground="Blue"/>
                                    </StackPanel>
                                </StackPanel>
                            </DataTemplate>
     
                        </telerik:SurfaceSeries3D.TooltipTemplate>
     
                    </telerik:SurfaceSeries3D>
                </telerik:RadCartesianChart3D.Series>
            </telerik:RadCartesianChart3D>
        </Grid>
    </UserControl>
  2. Sanem
    Sanem avatar
    3 posts
    Member since:
    Sep 2017

    Posted 06 Sep Link to this post

    I figured it out thanks, for people who need this in the future - you will need to set the PointSize for the SurfaceSeries3D, the tooltip only shows if it hits to an actual point and not the interpretations - play with it to find the optimal size.
  3. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1410 posts

    Posted 06 Sep Link to this post

    Hello Sanem,

    Thank you for sharing this in the forum.

    Indeed, the behavior shows the tooltip only when you hover the visual element of the data point. By default the SurfaceSeries3D doesn't have visuals for its data points until you set the PointSize property.

    Regards,
    Martin Ivanov
    Progress Telerik
    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.
  4. Sanem
    Sanem avatar
    3 posts
    Member since:
    Sep 2017

    Posted 06 Sep Link to this post

    Thanks Martin, a quick question - is it possible to set the point colors as well? From what I see I am not allowed to put multiple colorizers so I cannot define gradient color and point color at the same time. 

    Especially I am interested if I can set the point color to transparent if possible and make it large to have both tooltips and colors. 

    Is there any way I can do this?

    Thanks

  5. Dinko
    Admin
    Dinko avatar
    416 posts

    Posted 11 Sep Link to this post

    Hi Sanem,

    I am not sure that I have fully understood your approach but if you want to have a gradient and solid colors you can take a look at the ValueGradientColorizer SDK demo in our GitHub repository. This example demonstrates one of the colorizer for the 3D surface series and how to get gradients and solid colors. Give it a try and let me know if it works for you.

    Regards,
    Dinko
    Progress Telerik
    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