This is a migrated thread and some comments may be shown as answers.

SurfaceSeries3D not showing Tooltips

4 Answers 119 Views
ChartView3D
This is a migrated thread and some comments may be shown as answers.
Sanem
Top achievements
Rank 1
Sanem asked on 06 Sep 2017, 07:57 AM
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>

4 Answers, 1 is accepted

Sort by
0
Sanem
Top achievements
Rank 1
answered on 06 Sep 2017, 08:12 AM
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.
0
Martin Ivanov
Telerik team
answered on 06 Sep 2017, 10:44 AM
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.
0
Sanem
Top achievements
Rank 1
answered on 06 Sep 2017, 02:23 PM

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

0
Dinko | Tech Support Engineer
Telerik team
answered on 11 Sep 2017, 12:27 PM
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.
Tags
ChartView3D
Asked by
Sanem
Top achievements
Rank 1
Answers by
Sanem
Top achievements
Rank 1
Martin Ivanov
Telerik team
Dinko | Tech Support Engineer
Telerik team
Share this question
or