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

Customize Default Multiple Line Series Tooltip

7 Answers 215 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 2
Sam asked on 03 Feb 2016, 05:20 PM

Hi,

I need help customizing the default trackinfo tooltip for showing multiple line series values in the same tooltip at once (or achieve a tooltip similar to the one from the 'First Look' -see attached image).

I've been able to customize bar series tooltips in the past by doing something like the following, but using the same thing for line series doesn't show anything (it also only shows one series value at a time which isn't really what I'm trying to do):

<telerik:RadCartesianChart.Behaviors>
     <telerik:ChartTooltipBehavior/>
</telerik:RadCartesianChart.Behaviors>
 
 <telerik:RadCartesianChart.TooltipTemplate>
      <DataTemplate>
<Border Background="White" BorderBrush="Black" BorderThickness="1" Padding="5" CornerRadius="3">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Tool Tip!"  />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Label}"  />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Category}"  />
</StackPanel>
<StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding Value}"  />
</StackPanel>
 </StackPanel>
</Border>
 </DataTemplate>
 </telerik:RadCartesianChart.TooltipTemplate>

 

I can also show the default "Category: xxxx Value: xxxx" tooltip for multiple line series at once with this:

 

<telerik:RadCartesianChart.Behaviors>
<telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="True"/>
</telerik:RadCartesianChart.Behaviors>

 

Is there any way to customize the "ShowTrackInfo" tooltip? I haven't been able to reapply the first look example directly because I'm dynamically adding/removing/changing the number of series in the chart. I'm doing that like this:

 

private void UpdateChart()
       {
           LineTrendChart.Series.Clear();
           LineTrendChart.VerticalAxis = new LinearAxis();
           LineTrendChart.HorizontalAxis = new CategoricalAxis();
 
           for (int seriesIncrementer = 0; seriesIncrementer < numberOfSeries; seriesIncrementer++)
           {
                   CategoricalSeries series1 = new LineSeries();
                   for (int i = 0; i < numberOfDataPointsToDisplay; i++)
                   {
                       series1.DataPoints.Add(new CategoricalDataPoint { Value = RawData[seriesIncrementer][i], Category = DateList[i].ToString("MM/dd") });
                   }
                   LineTrendChart.Series.Add(series1);
           }
       }

 

My gut tells me I'm missing something very simple but I've been at this for a little while and haven't gotten anywhere .

Thanks in advance for any help.

 


 
 
 

7 Answers, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 08 Feb 2016, 03:31 PM
Hello Samuel,

You can change the default style of the trackball info by setting custom DataTemplate to the ChartSeries' TrackInfoTemplate property. You can take a look at the TrackBall help article where you can read more about how to set this property. For your convenience, we have prepared a sample project demonstrating this approach.

Regards,
Dinko
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
0
Sam
Top achievements
Rank 2
answered on 29 Feb 2016, 03:04 AM

Thanks for the example - I'm now able to set custom tooltips for static number of series in the chart.

However I'm still a little confused on how to set a custom tooltip when dynamically adding series to the chart. Does this custom trackball info 'tooltip' have to be configured in the xaml? Can I create and add them in the C# at runtime?

0
Accepted
Dinko
Telerik team
answered on 02 Mar 2016, 05:29 PM
Hello Sam,

Let make one step back because in your last reply you again mentioned tooltip. Keep in mind that there is a difference between TrackBall and ToolTip. 
- TrackBall -  The trackball is a vertical line across the chart plot area and it can display little visual indicators (circles by default) at points where the trackball line crosses the visualization of a series object.
- ToolTip - Basically,  when you hover a data point the chart the chart visualize arbitrary information related to it.

If you are talking about the trackball info - you can change the default visualization of the trackball both in XAML and in code. If you are using a series provider, you can add a setter for the TrackBallInfoTemplate property:
<telerik:RadCartesianChart.SeriesProvider>
    <telerik:ChartSeriesProvider Source="{Binding YourData}">
        <telerik:ChartSeriesProvider.SeriesDescriptors>
            <telerik:CategoricalSeriesDescriptor ItemsSourcePath="YourData" ValuePath="Value" CategoryPath="Category">
                <telerik:CategoricalSeriesDescriptor.Style>
                    <Style TargetType="telerik:BarSeries">
                        <Setter Property="TrackBallInfoTemplate" Value="{StaticResource YourCustomTemplate}"/>
                    </Style>
                </telerik:CategoricalSeriesDescriptor.Style>
            </telerik:CategoricalSeriesDescriptor>
        </telerik:ChartSeriesProvider.SeriesDescriptors>
    </telerik:ChartSeriesProvider>
</telerik:RadCartesianChart.SeriesProvider>

If you are manually creating series in code, you can set the property directly:
LineSeries series = new LineSeries();
series.TrackBallInfoTemplate = ...

Regards,
Dinko
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
0
Sam
Top achievements
Rank 2
answered on 02 Mar 2016, 09:30 PM
Ah ok, thanks for stepping me through that! Working perfectly now.
0
Saulo
Top achievements
Rank 1
answered on 21 Aug 2019, 10:50 PM

PROBLEMS WITH DYNAMIC SERIES
I am painting a series line dynamically, all those link to its context viewmodel, now the problem is that when drawing more than one series they begin to distort, now as you can see in the image, when hidden by in the middle of a CheckBox of his legend the others and I just leave one this goes well, the first hurts the second, and the second to the third, and so on, already e checking the values, and those are correct, I think I have problems with the horizontal axis, but I don't know how to solve it. It can be seen in the image of how it looks.
Here I leave the same as the xaml where I work. Can someone help me what is happening.

 

 

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:DISTRIBUCION_GAS.Views"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:clases="clr-namespace:DISTRIBUCION_GAS.Clases"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:PENDIENTES_IGUALES="clr-namespace:PENDIENTES_IGUALES;assembly=PENDIENTES_IGUALES" 
             x:Class="DISTRIBUCION_GAS.Views.LiquidoGasView"
             mc:Ignorable="d" 
     d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <clases:BoolColor x:Key="colorCombobox"/>
        <!--<DataTemplate x:Key="ComboBoxCustomTemplate">
            <TextBlock Foreground="{Binding ESTATUS, Converter={StaticResource colorCombobox}}"  FontSize="10" FontWeight="Bold"  Text="{Binding NOMBRE}" />
        </DataTemplate>-->

        <DataTemplate x:Key="contenidoTemplate">
            <Grid>
                <local:PozoView DataContext="{Binding objCabeceraPozoGBN, Mode=TwoWay}"/>
            </Grid>
        </DataTemplate>


        <telerik:VisibilityToBooleanConverter x:Key="visibilityToBooleanConverter" />

    </UserControl.Resources>
    <Grid>
        <GroupBox Header="Produción de líquido vs Inyección de Gas" FontWeight="Bold" Margin="1,5,1,1" FontSize="14">
            <Grid Margin="1,5,1,1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="280"/>
                    <ColumnDefinition Width="280*"/>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25"/>
                        <RowDefinition Height="155*"/>
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
                        <telerik:RadComboBox  Text="Selecione un Pozo" Width="108" Margin="5,0,0,0" Foreground="{Binding ESTATUS, Converter={StaticResource colorCombobox}}" ItemsSource="{Binding ListaPA_GetPozoGasBN_Result, Mode=TwoWay}" SelectedItem="{Binding objPA_GetPozoGasBN_Result, Mode=TwoWay}" >
                            <telerik:RadComboBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Foreground="{Binding ESTATUS, Converter={StaticResource colorCombobox}}"  FontSize="10" FontWeight="Bold"  Text="{Binding NOMBRE}" />
                                </DataTemplate>
                            </telerik:RadComboBox.ItemTemplate>
                        </telerik:RadComboBox>
                        <telerik:RadButton Command="{Binding BtnAgregarPozo}" Height="Auto" IsEnabled="{Binding habilitarAgregar, Mode=TwoWay}" Width="Auto" Margin="5,0,0,0">
                            <telerik:RadGlyph Glyph="&#xE120;" Foreground="Black" FontSize="20" />
                        </telerik:RadButton>
                        <telerik:RadButton Command="{Binding BtnEditarPozo}" IsEnabled="{Binding habilitarEditar, Mode=TwoWay}" Height="Auto" Width="Auto" Margin="5,0,0,0">
                            <telerik:RadGlyph Glyph="&#xE64A;" Foreground="Black" FontSize="20" />
                        </telerik:RadButton>
                        <telerik:RadButton Height="Auto" Command="{Binding BtnEliminarPozo}" IsEnabled="{Binding habilitarEditar, Mode=TwoWay}" Width="Auto" Margin="5,0,0,0">
                            <telerik:RadGlyph Glyph="&#xE10C;" Foreground="Black" FontSize="20" />
                        </telerik:RadButton>
                        <CheckBox Margin="5,5,1,1" IsChecked="{Binding gastosAgua, Mode=TwoWay}" />
                        <Label  Margin="1,0,1,1" Content="% Agua" FontWeight="Normal" FontSize="10" />
                    </StackPanel>
                    <telerik:RadTabControl Grid.Row="1" ItemsSource="{Binding ListaPozoCabecera, Mode=TwoWay}" SelectedItem="{Binding objPozoCabecera, Mode=TwoWay}" DisplayMemberPath="Nombre" ContentTemplate="{StaticResource contenidoTemplate}"/>
                </Grid>
                <telerik:RadCartesianChart Grid.Column="1" Margin="5" x:Name="rccgrafica" FontSize="10">
                    <telerik:RadCartesianChart.Grid>
                        <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="5, 5" MajorYLineDashArray="5, 5">
                            <telerik:CartesianChartGrid.MajorYLineStyle>
                                <Style TargetType="{x:Type Line}">
                                    <Setter Property="Stroke" Value="Gray"/>
                                </Style>
                            </telerik:CartesianChartGrid.MajorYLineStyle>
                            <telerik:CartesianChartGrid.MajorXLineStyle>
                                <Style TargetType="{x:Type Line}">
                                    <Setter Property="Stroke" Value="Gray"/>
                                </Style>
                            </telerik:CartesianChartGrid.MajorXLineStyle>
                        </telerik:CartesianChartGrid>
                    </telerik:RadCartesianChart.Grid>
                    <telerik:RadCartesianChart.HorizontalAxis >
                        <telerik:CategoricalAxis Title="QGAS de BN [Mscf/D]" />
                    </telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:RadCartesianChart.VerticalAxis>
                        <telerik:LinearAxis Title="QLiquido [STB/D]" />
                    </telerik:RadCartesianChart.VerticalAxis>
                    <telerik:RadCartesianChart.Behaviors>
                        <telerik:ChartPanAndZoomBehavior ZoomMode="Both" />
                        <telerik:ChartCrosshairBehavior />

                    </telerik:RadCartesianChart.Behaviors>
                    <telerik:RadCartesianChart.SeriesProvider>
                        <telerik:ChartSeriesProvider Source="{Binding ListaPozoCabecera, Mode=TwoWay}">
                            <telerik:CategoricalSeriesDescriptor ItemsSourcePath="CondicionesOperacion.DatosInyeccion"  CategoryPath="qGasBN" ValuePath="qLiq">
                                <telerik:CategoricalSeriesDescriptor.Style>
                                    <Style TargetType="{x:Type telerik:LineSeries}">
                                        <Setter Property="StrokeThickness" Value="{Binding SizeL}" />
                                        <Setter Property="LegendSettings" >
                                            <Setter.Value>
                                                <telerik:SeriesLegendSettings Title="{Binding Nombre}" />
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="Stroke" Value="{Binding Background, Mode=TwoWay}"  />
                                        
                                        <Setter Property="ToolTip"  >
                                            <Setter.Value>
                                                <StackPanel>
                                                    <TextBlock Text="{Binding Nombre, Mode=TwoWay}"/>
                                                </StackPanel>
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" />

                                    </Style>
                                </telerik:CategoricalSeriesDescriptor.Style>
                            </telerik:CategoricalSeriesDescriptor>
                            <!--<telerik:CategoricalSeriesDescriptor ItemsSourcePath="CondicionesOperacion.ListaDatos"  CategoryPath="qGasBN" ValuePath="qLiquido">
                                <telerik:CategoricalSeriesDescriptor.Style>
                                    <Style TargetType="{x:Type telerik:PointSeries}">
                                        <Setter Property="ToolTip" Value="{Binding Nombre, Mode=TwoWay}"/>
                                        <Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" />
                                        <Setter Property="PointSize" Value="{Binding SizeP}" />
                                        <Setter Property="DefaultVisualStyle">
                                            <Setter.Value>
                                                <Style TargetType="{x:Type Path}">
                                                    <Setter Property="Fill" Value="{Binding Background}" />
                                                </Style>
                                            </Setter.Value>
                                        </Setter>
                                        
                                    </Style>
                                </telerik:CategoricalSeriesDescriptor.Style>
                            </telerik:CategoricalSeriesDescriptor>-->
                        </telerik:ChartSeriesProvider>
                    </telerik:RadCartesianChart.SeriesProvider>
                </telerik:RadCartesianChart>
                <telerik:RadLegend Items="{Binding LegendItems, ElementName=rccgrafica}" Grid.Column="2" >
                    <telerik:RadLegend.ItemsPanel>
                        <ItemsPanelTemplate>
                            <telerik:RadWrapPanel />
                        </ItemsPanelTemplate>
                    </telerik:RadLegend.ItemsPanel>
                    <telerik:RadLegend.ItemTemplate>
                        <DataTemplate>
                            <Border Background="{Binding MarkerFill}" BorderThickness="1" BorderBrush="{Binding MarkerStroke}">
                                <Grid Width="95">
                                    <CheckBox Checked="CheckBox_Checked" IsChecked="{Binding Presenter.Visibility, Converter={StaticResource visibilityToBooleanConverter}, Mode=TwoWay}" FontSize="10"/>
                                    <TextBlock Text="{Binding Title}" Foreground="White" Margin="15,2,0,2" FontWeight="Normal" FontSize="10" />
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </telerik:RadLegend.ItemTemplate>
                </telerik:RadLegend>
            </Grid>
        </GroupBox>
    </Grid>
</UserControl>

0
Dinko
Telerik team
answered on 23 Aug 2019, 12:16 PM
Hi Saulo,

Thank you for the .gif file.

This behavior comes from the CategoricalAxis. Let me try to explain. The CategoricalAxis of the chart works with discrete data. This means that a category will be created for each distinct category value in the data source. The values of the axis will appear in order as they comes from the data source. As you are using multiple series, the labels position will be depending on the first series data. Looking at the .gif file some of the series have different categories. As you are working with numbers I would suggest you to use a LinearAxis (for Vertical and Horizontal axis) instead with ScatterLineSeries. This way the values on the horizontal axis values will be ordered.

Give this approach a try and let me know how it goes.

Regards,
Dinko
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Saulo
Top achievements
Rank 1
answered on 23 Aug 2019, 03:24 PM
thanks, indeed when changing the type of axis I remain, thank you very much
Tags
ChartView
Asked by
Sam
Top achievements
Rank 2
Answers by
Dinko
Telerik team
Sam
Top achievements
Rank 2
Saulo
Top achievements
Rank 1
Share this question
or