RadCartesianChart -- serie-specific tooltips?

3 posts, 1 answers
  1. JC
    JC avatar
    16 posts
    Member since:
    Oct 2015

    Posted 15 Feb Link to this post

    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

  2. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 17 Feb Link to this post

    Hello,

    You should be able to use the TooltipTemplate property of the series:
    <telerik:LineSeries TooltipTemplate="{StaticResource ...}" />

    Regards,
    Petar Marchev
    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. JC
    JC avatar
    16 posts
    Member since:
    Oct 2015

    Posted 17 Feb in reply to Petar Marchev Link to this post

    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

Back to Top