Hi,
I am using xamDataChart which has two line series with CategoryDateTimeXAxis and NumericYAxis. I have enabled crosshair over chart and I want to show both Series values in a tooltip with crosshair.
I find a reference here to show the tooltip with cross hair but it is not showing me any Series Value where vertical line of crosshair is. Here is the image what I am getting.
I am using the same code which Graham suggest in his post but as show in screen shot, Value is empty.
Here is my complete XAML code of the view if it may help.
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" xmlns:ig="http://schemas.infragistics.com/xaml" xmlns:behaviour="clr-namespace:WpfApplication1" > <Window.Resources> <ResourceDictionary> <Style x:Key="CrosshairLineStyle1" TargetType="Line"> <Setter Property="Stroke" Value="Gray" /> <Setter Property="StrokeThickness" Value="1.5" /> </Style> <DataTemplate x:Key="tooltipTemplate"> <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Background="White" IsHitTestVisible="False" Padding="5"> <ItemsControl ItemsSource="{Binding}"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <ContentPresenter Content="{Binding}" ContentTemplate="{Binding Series.LegendItemBadgeTemplate}" /> <TextBlock Text="Series: " /> <TextBlock Text="{Binding Series.Title}" /> <TextBlock Text=" " /> <TextBlock Text="Value: " /> <TextBlock Text="{Binding Item.Value}" /> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Border> </DataTemplate> </ResourceDictionary> </Window.Resources> <Grid> <StackPanel> <TextBlock Text="{Binding XDateTime}" /> <TextBlock Text="{Binding YValue}" /> <ig:XamDock x:Name="xmDockContainer" Margin="2" VerticalAlignment="Stretch" Height="600"> <Border Background="White" > <Border.Effect> <DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="0" Opacity="0.7"></DropShadowEffect> </Border.Effect> </Border> <ig:XamDataChart Name="chtMain" BorderThickness="0" BorderBrush="Transparent" HorizontalZoomable="True" HorizontalZoombarVisibility="Visible" CrosshairVisibility="Visible" CrosshairLineStyle="{StaticResource CrosshairLineStyle1}" PropertyUpdated="chtMain_PropertyUpdated" SeriesCursorMouseMove="XamDataChart_SeriesCursorMouseMove"> <behaviour:ChartCrosshairBehaviors.CrosshairVisibility> <behaviour:ChartCrosshairVisibilityBehavior ShowHorizontalCrosshair="False" ShowVerticalCrosshair="True"></behaviour:ChartCrosshairVisibilityBehavior> </behaviour:ChartCrosshairBehaviors.CrosshairVisibility> <behaviour:ChartBehaviors.CursorTooltip> <behaviour:CursorTooltipBehavior TooltipTemplate="{StaticResource tooltipTemplate}" /> </behaviour:ChartBehaviors.CursorTooltip> <ig:XamDataChart.Axes> <ig:CategoryDateTimeXAxis x:Name="xAxis1" Label="{}{Date:MM/dd/yyyy}" ItemsSource="{Binding ChartSource}" DateTimeMemberPath="Date" MinorStroke="Transparent" MajorStroke="Transparent"> <ig:CategoryDateTimeXAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideBottom" Extent="45" Angle="30"></ig:AxisLabelSettings> </ig:CategoryDateTimeXAxis.LabelSettings> </ig:CategoryDateTimeXAxis> <ig:NumericYAxis x:Name="yAxis1" MinorStroke="Transparent" MajorStroke="Transparent"> <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideLeft" Extent="15" VerticalAlignment="Center" Visibility="Visible" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:LineSeries Thickness="2" MarkerType="None" Title="Actual Measures" ItemsSource="{Binding ChartSource}" ValueMemberPath="Value1" Legend="{Binding ElementName=AMLegend}" XAxis="{Binding ElementName=xAxis1}" YAxis="{Binding ElementName=yAxis1}"> <ig:LineSeries.ToolTip> <StackPanel Orientation="Vertical"> <TextBlock Text="{Binding Series.Title}" FontWeight="Bold" /> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Item.Date}" Foreground="Black"/> <TextBlock Text="{Binding Item.Value1}" Foreground="Black"/> </StackPanel> </StackPanel> </ig:LineSeries.ToolTip> </ig:LineSeries> <ig:LineSeries Thickness="2" MarkerType="None" Title="Predicted Rolling Four Quarters" ItemsSource="{Binding ChartSource}" ValueMemberPath="Value2" Legend="{Binding ElementName=AMLegend}" XAxis="{Binding ElementName=xAxis1}" YAxis="{Binding ElementName=yAxis1}" /> </ig:XamDataChart.Series> </ig:XamDataChart> <ig:Legend x:Name="AMLegend" Orientation="Horizontal" Height="28" ig:XamDock.Edge="OutsideBottom" ig:XamDock.VerticalDockAlignment="Bottom" ig:XamDock.HorizontalDockAlignment="Center" Margin="-2,2"> </ig:Legend> </ig:XamDock> </StackPanel> </Grid></Window>
Thank you.
Hello,
Thank you for your feedback. I am glad that you resolved your issue and I believe that other community members may benefit from this as well.
Thanks again.
Thank you Stefan, this is what I was looking for.
I modified the sample you sent me, so now it works as you want. Basically I changed the Binding in the DataTemplate for the ToolTip and add Converters to show/hide the unnecessarily values. Please let me know if this helps you or you need further assistance on this matter.
Looking forward for your reply.
Thank you Stefan.
However I have attached my sample application in which I am still getting empty values. Can you please point out what exactly I am missing in my sample application.
Thanks once again.
M. Irfan
I have been looking into your requirement and I have changed the sample and now it works as you want. Basically I the way the PopUp appears and added comments in the code where I made the changes. Please let me know if this helps you or you need further assistance on this matter.