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
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
Rank 2
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?
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
Rank 2
Rank 1
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="" 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="" 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="" 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>
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
Rank 1