RadCartesianChart -- serie-specific tooltips?

[JC]

Hi telerik,

We are plotting ScatterlineSeries on a RadCartesianChart. Works well.

However, as we plot several series in same chart, our users request a tooltip with differents units. For example I got the TooltipTemplate following:

<DataTemplate x:Key="MomentTooltipTemplate">
    <Grid Height="56" Width="150" SnapsToDevicePixels="True">
        <Path Data="M0,0 L128.99968,3.4450557E-14 128.99968,36.850185 11,36.850185 8,40 5,36.850185 0,36.850185 z"
    Stretch="Fill"
    Fill="{Binding Presenter, Converter={StaticResource PaletteExtractorConverter}}"
    Stroke="White"
    StrokeThickness="1"
    SnapsToDevicePixels="True" HorizontalAlignment="Center" Width="150" />
        <Grid Margin="5,3,5,9" Height="45" SnapsToDevicePixels="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="15" />
                <RowDefinition Height="15" />
                <RowDefinition Height="15" />
            </Grid.RowDefinitions>
            <TextBlock Text="{Binding DataItem.SeriesName}" Foreground="White" FontFamily="Segoe UI" FontSize="11" VerticalAlignment="Center" Margin="0" />
            <TextBlock Text="{Binding DataItem.Y, ConverterCulture=fr-FR, StringFormat=Load: \{0:N2\} kN.m}" Foreground="White" FontFamily="Segoe UI" FontSize="11" Margin="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <TextBlock Text="{Binding DataItem.X, StringFormat=Distance: \{0:N2\} m}" Foreground="White" FontFamily="Segoe UI" FontSize="11" Margin="0" VerticalAlignment="Center" Grid.Row="2" />
        </Grid>
    </Grid>
</DataTemplate>

 

and the second one : 

<DataTemplate x:Key="AnnotationTemplate" DataType="telerik:DataPoint">
                <Grid Height="56" Width="111" SnapsToDevicePixels="True">
                    <Path Data="M0,0 L110,0 110,36.850185 11,36.850185 8,40 5,36.850185 0,36.850185 z"
                Stretch="Fill"
                Fill="{Binding Presenter, Converter={StaticResource PaletteExtractorConverter}}"
                Stroke="White"
                StrokeThickness="1"
                SnapsToDevicePixels="True" />
                    <Grid Margin="4,2,5,10" Width="100" Height="45" SnapsToDevicePixels="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="15" />
                            <RowDefinition Height="15" />
                            <RowDefinition Height="15" />
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding DataItem.SeriesName}" Foreground="White" FontFamily="Segoe UI" FontSize="11" VerticalAlignment="Center" Margin="0" />
                        <TextBlock Text="{Binding DataItem.Y, StringFormat=Load: \{0:N2\} kg}" Foreground="White" FontFamily="Segoe UI" FontSize="11" Margin="0" Grid.Row="1" VerticalAlignment="Center" />
                        <TextBlock Text="{Binding DataItem.X, StringFormat=Distance: \{0:N2\} m}" Foreground="White" FontFamily="Segoe UI" FontSize="11" Margin="0" VerticalAlignment="Center" Grid.Row="2" />
                    </Grid>
                </Grid>
            </DataTemplate>

 

x axes is the same for all series, but not y axes, for some series y-axe is kg and for some other it's kN.m. See attached files to see what I had and what i'd like.

Is it possible to do that with telerik or not ?

Thanks

 Regards

[Petar Marchev]

Hello,

You should be able to use the TooltipTemplate property of the series:

<telerik:LineSeries TooltipTemplate="{StaticResource ...}" />

Regards,
Petar Marchev
Telerik

[JC]

Thanks, it works.

For people who have the same case, here the piece of code I used :

<controls:RadCartesianChart x:Name="ChartMoment"  TooltipTemplate="{StaticResource MomentTooltipTemplate}" Margin="8,8,220,8">

                            <controls:RadCartesianChart.Palette>
                                <telerik:ChartPalette>
                                    <telerik:ChartPalette.GlobalEntries>
                                        <telerik:PaletteEntry Fill="#FF1FAFD3" Stroke="#0055BF" AdditionalFill="#FF01FFFF" AdditionalStroke="#FF70040E"/>
                                        <telerik:PaletteEntry Fill="#FF1FAFD3" Stroke="#FF1FAFD3" AdditionalFill="#FF01FFFF" AdditionalStroke="#FFC30A1B"/>
                                        <telerik:PaletteEntry Fill="#FF1FAFD3" Stroke="#FF01FFFF" AdditionalFill="#FF1FAFD3" AdditionalStroke="#FFB65B3B"/>
                                        <telerik:PaletteEntry Fill="#FFC32E0A" Stroke="#FF70040E" AdditionalFill="#FFB65B3B" AdditionalStroke="#AD2EAC50"/>
                                        <telerik:PaletteEntry Fill="#FFC32E0A" Stroke="#FFC30A1B" AdditionalFill="#FFB65B3B" AdditionalStroke="#FFAAC30A"/>
                                        <telerik:PaletteEntry Fill="#FFC32E0A" Stroke="#FFB65B3B" AdditionalFill="#FFB65B3B" AdditionalStroke="#FF2EE850"/>
                                        <telerik:PaletteEntry Fill="#AD2EAC50" Stroke="#AD2EAC50" AdditionalFill="#FF2EE850" AdditionalStroke="#FF61007D"/>
                                        <telerik:PaletteEntry Fill="#AD2EAC50" Stroke="#FFAAC30A" AdditionalFill="#FF2EE850" AdditionalStroke="#FF9906C3"/>
                                        <telerik:PaletteEntry Fill="#AD2EAC50" Stroke="#FF2EE850" AdditionalFill="#FF2EE850" AdditionalStroke="#FFCC1DFF"/>
                                        <telerik:PaletteEntry Fill="#FF61007D" Stroke="#FF61007D" AdditionalFill="#FF9906C3" AdditionalStroke="#FF0C0B0B"/>
                                        <telerik:PaletteEntry Fill="#FF61007D" Stroke="#FF9906C3" AdditionalFill="#FF9906C3" AdditionalStroke="#FF4F4F4F"/>
                                        <telerik:PaletteEntry Fill="#FF61007D" Stroke="#FFCC1DFF" AdditionalFill="#FF9906C3" AdditionalStroke="#FF959494"/>
                                        <telerik:PaletteEntry Fill="#FF0C0B0B" Stroke="#FF0C0B0B" AdditionalFill="#FF4F4F4F" AdditionalStroke="#0055BF"/>
                                        <telerik:PaletteEntry Fill="#FF0C0B0B" Stroke="#FF4F4F4F" AdditionalFill="#FF4F4F4F" AdditionalStroke="#FF1FAFD3"/>
                                        <telerik:PaletteEntry Fill="#FF0C0B0B" Stroke="#FF959494" AdditionalFill="#FF4F4F4F" AdditionalStroke="#FF01FFFF"/>
                                    </telerik:ChartPalette.GlobalEntries>
                                </telerik:ChartPalette>
                            </controls:RadCartesianChart.Palette>

                            <controls:RadCartesianChart.Behaviors>
                                <chartView:ChartTooltipBehavior Placement="Top" HorizontalOffset="-6" />
                                <chartView:ChartSelectionBehavior DataPointSelectionMode="Single" SelectionChanged="MomentChartSelectionBehaviorOnSelectionChanged" />
                                <chartView:ChartPanAndZoomBehavior ZoomMode="Both" />
                            </controls:RadCartesianChart.Behaviors>

                            <controls:RadCartesianChart.HorizontalAxis>
                                <chartView:LinearAxis Title="Radius (m)" MajorStep="2" />
                            </controls:RadCartesianChart.HorizontalAxis>

                            <controls:RadCartesianChart.VerticalAxis>
                                <chartView:LinearAxis Title="Load (kg)" Minimum="0"/>
                            </controls:RadCartesianChart.VerticalAxis>

                            <controls:RadCartesianChart.Annotations>
                                <chartView:CartesianCustomAnnotation x:Name="AnnotationMoment" ContentTemplate="{StaticResource MomentAnnotationTemplate}" HorizontalOffset="-9" VerticalOffset="-3"
                  Visibility="Hidden" ClipToPlotArea="False" HorizontalAlignment="Right" VerticalAlignment="Top" />
                            </controls:RadCartesianChart.Annotations>

                            <controls:RadCartesianChart.SeriesProvider>
                                <chartView:ChartSeriesProvider Source="{Binding FilteredLoadCurves}">
                                    <chartView:ChartSeriesProvider.SeriesDescriptors>
                                        <chartView:ScatterSeriesDescriptor ItemsSourcePath="Points" XValuePath="X" YValuePath="Y">
                                            <chartView:ScatterSeriesDescriptor.Style>
                                                <Style TargetType="{x:Type chartView:ScatterLineSeries}">
                                                    <Setter Property="IsHitTestVisible" Value="True" />
                                                    <Setter Property="LegendSettings">
                                                        <Setter.Value>
                                                            <chartView:SeriesLegendSettings Title="{Binding SeriesName}" MarkerGeometry="{StaticResource LineSeriesLegendGeometry}" />
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="PointTemplate">
                                                        <Setter.Value>
                                                            <DataTemplate>
                                                                <local:CustomEllipse Width="5" Height="5"
                                  BorderBrush="{Binding Converter={StaticResource PaletteExtractorConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type chartView:ScatterLineSeries}}}"
                                  Background="White"
                                  Foreground="{Binding Converter={StaticResource PaletteExtractorConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type chartView:ScatterLineSeries}}}" />
                                                            </DataTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="TooltipTemplate" Value="{StaticResource AnnotationTemplate}"/>
                                                </Style>
                                            </chartView:ScatterSeriesDescriptor.Style>
                                        </chartView:ScatterSeriesDescriptor>
                                        <chartView:ScatterSeriesDescriptor ItemsSourcePath="Moments" XValuePath="X" YValuePath="Y">
                                            <chartView:ScatterSeriesDescriptor.Style>
                                                <Style TargetType="{x:Type chartView:ScatterLineSeries}">
                                                    <Setter Property="IsHitTestVisible" Value="True" />
                                                    <Setter Property="LegendSettings">
                                                        <Setter.Value>
                                                            <chartView:SeriesLegendSettings Title="{Binding MomentSeriesName}" MarkerGeometry="{StaticResource LineSeriesLegendGeometry}" />
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="PointTemplate">
                                                        <Setter.Value>
                                                            <DataTemplate>
                                                                <local:CustomEllipse Width="5" Height="5"
                                  BorderBrush="{Binding Converter={StaticResource PaletteExtractorConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type chartView:ScatterLineSeries}}}"
                                  Background="White"
                                  Foreground="{Binding Converter={StaticResource PaletteExtractorConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type chartView:ScatterLineSeries}}}" />
                                                            </DataTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="TooltipTemplate" Value="{StaticResource MomentTooltipTemplate}"/>
                                                    <Setter Property="VerticalAxis" Value="{StaticResource MomentAxis}"/>
                                                </Style>
                                            </chartView:ScatterSeriesDescriptor.Style>
                                        </chartView:ScatterSeriesDescriptor>
                                    </chartView:ChartSeriesProvider.SeriesDescriptors>
                                </chartView:ChartSeriesProvider>
                            </controls:RadCartesianChart.SeriesProvider>

                            <controls:RadCartesianChart.Grid>
                                <chartView:CartesianChartGrid MajorLinesVisibility="XY" />
                            </controls:RadCartesianChart.Grid>
                        </controls:RadCartesianChart>

Regards