Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1060
Series values in tooltip with crosshair
posted

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.