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 post. I have been looking into it and I created a sample project for you using the code Graham provided and everything seems to work ok on my side. If the sample doesn’t satisfies all your needs feel free to modify it, so it reproduces your behavior and send it back to me for further investigation.
Looking forward for your reply.
Hello Stefan,
Thank you very much for your reply and sample project. I was using "CategoryDateTimeXAxis" in my project which I think causing the problem. Anyhow I go through your sample project and it looks working fine with simple CategoryAxis, however I will integrate your sample application logic with my actual project and let you know the final result.
However one weird thing I noticed in you application is that when I move the cursor to the right of chart then tooltip does not display and cursor start blinking. I understand that it might be because there is not enough space for tooltip but I think, in this case, tooltip should display to the left side of cursor? Any suggestion to handle this situation.
Thanks,
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.
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.
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.
Thank you Stefan, this is what I was looking for.
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.