[Solved] ChartTooltipBehavior with >1 series?

[Robert]

I have figured out how to use the ChartTooltipBehavior to customize the display of data in the tooltip--which works great.

I can't solve the problem of multiple series, though.  I have two lines on a chart, and the tooltip displayed is always for the first series (even when the mouse is hovering over the second series line).  How can I either discriminate between the two series when displaying the tooltip...or at least bind to both series and display all series information in the tooltip whenever a tooltip is needed?

Thanks!

<!-- Chart -->

<telerik:RadCartesianChart

DataContext="{StaticResource UtilizationChartModel}"

ClipToBounds="False" Height="500" Margin="10" Width="600"

Palette="{StaticResource ChartCustomPalette}" VerticalAlignment="Top" HorizontalAlignment="Left">

<!-- A background Grid for easier reading -->

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="Y"/>

</telerik:RadCartesianChart.Grid>

<!-- Tooltip behavior -->

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartTooltipBehavior>

<telerik:ChartTooltipBehavior.ContentTemplate>

<DataTemplate>

<Border Background="White" Padding="10">

<StackPanel Orientation="Vertical">

<TextBlock FontSize="18" Text="{Binding DataPoint.Category, Converter={StaticResource stringConverter}, ConverterParameter=MMM-yy}"/>

<StackPanel Orientation="Horizontal">

<TextBlock FontSize="18" Text="{Binding DataPoint.Value, Converter={StaticResource stringConverter}, ConverterParameter=P1}"/>

</StackPanel>

</StackPanel>

</Border>

</DataTemplate>

</telerik:ChartTooltipBehavior.ContentTemplate>

</telerik:ChartTooltipBehavior>

</telerik:RadCartesianChart.Behaviors>

　

<!-- Default Y-Axis -->

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis LabelStyle="{StaticResource ChartLabelStyle}" LabelFormat="{}{0,0:P1}" />

</telerik:RadCartesianChart.VerticalAxis>

<!-- Default X-Axis -->

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeCategoricalAxis DateTimeComponent="Month" LabelFormat="{}{0,0:MMM-yy}" LabelStyle="{StaticResource ChartLabelStyle}"></telerik:DateTimeCategoricalAxis>

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.Series>

<!-- Series 1 -->

<telerik:LineSeries ItemsSource="{Binding Series1}" StrokeThickness="4.0">

<telerik:LineSeries.ValueBinding>

<telerik:PropertyNameDataPointBinding PropertyName="Value"></telerik:PropertyNameDataPointBinding>

</telerik:LineSeries.ValueBinding>

<telerik:LineSeries.CategoryBinding>

<telerik:PropertyNameDataPointBinding PropertyName="TimePeriod"></telerik:PropertyNameDataPointBinding>

</telerik:LineSeries.CategoryBinding>

</telerik:LineSeries>

<!-- Series 2-->

<telerik:LineSeries ItemsSource="{Binding Series2}" StrokeThickness="4.0">

<telerik:LineSeries.ValueBinding>

<telerik:PropertyNameDataPointBinding PropertyName="Value"></telerik:PropertyNameDataPointBinding>

</telerik:LineSeries.ValueBinding>

<telerik:LineSeries.CategoryBinding>

<telerik:PropertyNameDataPointBinding PropertyName="TimePeriod"></telerik:PropertyNameDataPointBinding>

</telerik:LineSeries.CategoryBinding>

</telerik:LineSeries>

</telerik:RadCartesianChart.Series>

</telerik:RadCartesianChart>

[Ivaylo Gergov]

Hello Robert,

Thank you for your interest.

This is a known issue and it is logged as a bug. It will be fixed in our next internal build which will be available in January.

I hope this information is useful. Let me know if I can assist you any further.


Kind regards,
Ivaylo Gergov
the Telerik team

[Finance]

I am facing the same problem ..... but now i have 4 series in the same chart , and i use the tooltip behavior of this chart..
and i use the "Context Needed" event to set the data to be shown in the tooltip..
but this event is fired for the default context ,which is the FIRST series that have data in this point

<charts:RadCartesianChart x:Name="LaboratoryOrdersChart" Foreground="Black" HorizontalAlignment="Stretch"  Margin="20,-40,20,0" MinHeight="90" Canvas.ZIndex="9"  >
                                  <charts:RadCartesianChart.Behaviors>

                                      <charts:ChartTooltipBehavior SnapToClosestPoint="False"  ContextNeeded="ChartTooltipBehavior_ContextNeeded_3" TouchOverhang="-20,-30" >
                                          <charts:ChartTooltipBehavior.ContentTemplate>
                                              <DataTemplate>
                                                  <StackPanel>
                                                      <!--<Border BorderBrush="Blue" BorderThickness="2" CornerRadius="6">-->
                                                      <ListBox Background="#FF7A1E1E" ItemsSource="{Binding PatientHomeVM.LabOrderPiontChart, Source={StaticResource Locator}}" Canvas.ZIndex="1">
                                                          <ListBox.ItemTemplate>
                                                              <DataTemplate>
                                                                  <TextBlock Text="{Binding ORDER_DESCRIPTION}" Foreground="White"></TextBlock>
                                                              </DataTemplate>
                                                          </ListBox.ItemTemplate>
                                                      </ListBox>

                                                      <!--<StackPanel Background="WhiteSmoke" Margin="5,5,5,5" >
                                                      <TextBlock Text="{Binding DataPoint.Value}" Foreground="#FF022531" />
                                                      <TextBlock Text="{Binding DataPoint.Category, ConverterParameter=\{0:HH:mm\}, Converter={StaticResource StringFormatingConverter}}" Foreground="#FF022531"/>
                                                  </StackPanel>-->
                                                      <!--</Border>-->
                                                      <Border Background="#FF7A1E1E" Width="10" Height="10"  RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" Margin="30,-7,0,5" Canvas.ZIndex="-1" >
                                                          <Border.RenderTransform>
                                                              <CompositeTransform Rotation="-45"/>
                                                          </Border.RenderTransform>
                                                      </Border>
                                                  </StackPanel>
                                              </DataTemplate>
                                          </charts:ChartTooltipBehavior.ContentTemplate>
                                      </charts:ChartTooltipBehavior>
                                  </charts:RadCartesianChart.Behaviors>
                                  <charts:RadCartesianChart.HorizontalAxis >
                                      <charts:DateTimeCategoricalAxis   LabelFormat="{}{0,0:dd-MMM}"  Foreground="Black" LineStyle="{StaticResource CustomAxisLineStyle}"
                                              PlotMode="OnTicksPadded" VerticalLocation="Top" Margin="17,0,50,0"/>
                                  </charts:RadCartesianChart.HorizontalAxis>
                                  <charts:RadCartesianChart.VerticalAxis>
                                      <charts:LinearAxis  Visibility="Collapsed" Foreground="Black"  LineStyle="{StaticResource CustomAxisLineStyle}" LabelInterval="2" FontSize="20" />
                                  </charts:RadCartesianChart.VerticalAxis>
                                  <charts:RadCartesianChart.Grid>
                                      <charts:CartesianChartGrid MajorLinesVisibility="X" MajorXLineStyle="{StaticResource GridLineStyle}"   />
                                  </charts:RadCartesianChart.Grid>

                                  <charts:PointSeries  PointerEntered="LabSeries_PointerEntered" x:Name="LabSeries" ItemsSource="{Binding TLLaboratory}"  VerticalAlignment="Center" ClipToPlotArea="True"  ShowLabels="False" Foreground="#FF7A1E1E" PointTemplate="{StaticResource PointTemplate}"    Margin="15,27,15,0" MinHeight="50" Height="50" >
                                      <charts:PointSeries.CategoryBinding>
                                          <charts:PropertyNameDataPointBinding PropertyName="StartDateDate"/>
                                      </charts:PointSeries.CategoryBinding>
                                      <charts:PointSeries.ValueBinding>
                                          <charts:PropertyNameDataPointBinding PropertyName="FixedStep"/>
                                      </charts:PointSeries.ValueBinding>
                                  </charts:PointSeries>
                                  <charts:PointSeries x:Name="RadSeries" ItemsSource="{Binding TLRadiology}" ClipToPlotArea="False"  ShowLabels="False" Foreground="#FF205FE4" PointTemplate="{StaticResource PointTemplate}"    MinHeight="50" Height="50" Margin="15,67,70,15"  Canvas.ZIndex="10">
                                      <charts:PointSeries.CategoryBinding>
                                          <charts:PropertyNameDataPointBinding PropertyName="StartDateDate"/>
                                      </charts:PointSeries.CategoryBinding>
                                      <charts:PointSeries.ValueBinding>
                                          <charts:PropertyNameDataPointBinding PropertyName="FixedStep"/>
                                      </charts:PointSeries.ValueBinding>
                                  </charts:PointSeries>
                                  <charts:PointSeries x:Name="ProSeries" ClipToPlotArea="False" ItemsSource="{Binding TLProcedure}" ShowLabels="False" Foreground="#FF4A9E4A" PointTemplate="{StaticResource PointTemplate}"  Background="Beige" MinHeight="50" Height="50"  Margin="15,102,70,15" >
                                      <charts:PointSeries.CategoryBinding>
                                          <charts:PropertyNameDataPointBinding PropertyName="StartDateDate"/>
                                      </charts:PointSeries.CategoryBinding>
                                      <charts:PointSeries.ValueBinding>
                                          <charts:PropertyNameDataPointBinding PropertyName="FixedStep"/>
                                      </charts:PointSeries.ValueBinding>
                                  </charts:PointSeries>
                                  <charts:PointSeries x:Name="MedSeries" ClipToPlotArea="False" ItemsSource="{Binding TLMedication}" ShowLabels="False" Foreground="#FF6E3E7C" PointTemplate="{StaticResource PointTemplate}"  Background="Beige" MinHeight="50" Height="50"  Margin="15,137,70,15" >
                                      <charts:PointSeries.CategoryBinding>
                                          <charts:PropertyNameDataPointBinding PropertyName="StartDateDate"/>
                                      </charts:PointSeries.CategoryBinding>
                                      <charts:PointSeries.ValueBinding>
                                          <charts:PropertyNameDataPointBinding PropertyName="FixedStep"/>
                                      </charts:PointSeries.ValueBinding>
                                  </charts:PointSeries>

                              </charts:RadCartesianChart>

 private void ChartTooltipBehavior_ContextNeeded_3(object sender, TooltipContextNeededEventArgs e)
        {
            _patientVM.LabOrderPiontChart.Clear();
            //_patientVM.RadOrderPiontChart.Clear();
            //_patientVM.ProceduresPointChart.Clear();
            //_patientVM.MedicationsPointChart.Clear();
            if (e.DefaultContext.ClosestDataPoint.Series.Name == "LabSeries")
            {
                foreach (PatientOrder d in LaboratoryOrdersChart.Series[0].ItemsSource)
                {
                    if (d.StartDateDate == (e.DefaultContext.ClosestDataPoint.DataPoint.DataItem as PatientOrder).StartDateDate)
                    {
                        _patientVM.LabOrderPiontChart.Add(d);
                    }
                }
            }
            if (e.DefaultContext.ClosestDataPoint.Series.Name == "RadSeries")
            {
                foreach (PatientOrder d in LaboratoryOrdersChart.Series[1].ItemsSource)
                {
                    if (d.StartDateDate == (e.DefaultContext.ClosestDataPoint.DataPoint.DataItem as PatientOrder).StartDateDate)
                    {
                        _patientVM.LabOrderPiontChart.Add(d);
                    }
                }
            }
            if (e.DefaultContext.ClosestDataPoint.Series.Name == "ProSeries")
            {
                foreach (PatientOrder d in LaboratoryOrdersChart.Series[2].ItemsSource)
                {
                    if (d.StartDateDate == (e.DefaultContext.ClosestDataPoint.DataPoint.DataItem as PatientOrder).StartDateDate)
                    {
                        _patientVM.LabOrderPiontChart.Add(d);
                    }
                }
            }
            if (e.DefaultContext.ClosestDataPoint.Series.Name == "MedSeries")
            
            {
                foreach (PatientOrder d in LaboratoryOrdersChart.Series[3].ItemsSource)
                {
                    if (d.StartDateDate == (e.DefaultContext.ClosestDataPoint.DataPoint.DataItem as PatientOrder).StartDateDate)
                    {
                        _patientVM.LabOrderPiontChart.Add(d);
                    }
                }
            }
          
        }

[Ivaylo Gergov]

Hi,

As I could not reproduce the issue, I have attached a sample project using parts of the sample code and everything works as expected. Could you please take a look and try to modify it to reproduce the issue?

I am looking forward to your reply.

Regards,
Ivaylo Gergov
Telerik