ToolTip on Mouse hover on Categorical Axcis Label

[Shilpa]

Hi,

I have a Telerik Rad Cartesian Spline Curve Chart where X axis Categorical axis and Y Axis is numerical. Currently the values of X Axis Labels are like eg 0,1,2,3....

On Mouse hover over the labels on Categorical X Axis I want to display a tool tip which represent some string corresponding to 0,1,2 accordingly.

eg: 0=> Apple

       1=> Orange etc

How do I acheive this?

 

Regards,

Shilpa

[Shilpa]

<Style x:Key="CategoricalAxisStyle" TargetType="telerik:CategoricalAxis" BasedOn="{StaticResource AxisStyle}" />
   <Style x:Key="AxisStyle" TargetType="telerik:Axis">
        <Setter Property="LabelStyle" Value="{StaticResource ItemLabelStyle}" />
        <Setter Property="TitleTemplate" Value="{StaticResource AxisTitleTemplate}" />
    </Style>
   <Style x:Key="ItemLabelStyle"
           TargetType="TextBlock">
        <Setter Property="FontFamily" Value="{DynamicResource FontFamilyDefault}" />
        <Setter Property="FontSize" Value="{DynamicResource TextSizeDefault}" />
        <Setter Property="FontStyle" Value="{DynamicResource FontStyleDefault}" />
        <Setter Property="FontWeight" Value="{DynamicResource FontWeightDefault}" />
        <Setter Property="ToolTip" Value="Hello"></Setter>

I am able to set a static text as tooltip, but how will I bind the value of tooltip to a string property with X & Y Value which defines the point. 

[Shilpa]

Hi,

I want to know how to get to the dataPoint DataContext so that i can set the tooltip to the property in my DataItem. Please hlep me

[Martin Ivanov]

Hello Shilpa,

In order to achieve your requirement you can use the LabelTemplate and Categories collection of the CategoricalAxis class. Basically, you can define a label template and bind its label visual to the string that comes as a DataContext of the template. As there is only a single string passed in the template, you can use a multi value converted to get the corresponding data point from the Categories collection.

For example:

<telerik:CategoricalAxis.LabelTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding}">
            <telerik:RadToolTipService.ToolTipContent>
                <MultiBinding Converter="{StaticResource textToDataPointInfoConverter}">
                    <Binding />
                    <Binding ElementName="categoricalAxis" Path="Categories" />
                </MultiBinding>
            </telerik:RadToolTipService.ToolTipContent>
        </TextBlock>
    </DataTemplate>
</telerik:CategoricalAxis.LabelTemplate>

public class TextToDataPointInfoConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var text = (string)values[0];
        var categories = (IEnumerable<ChartAxisCategoryInfo>)values[1];
        var categoryMatch = categories.FirstOrDefault(x => x.Category.Equals(text));
        var dp = categoryMatch.DataPoints[0];
        var plotInfo = (MyPlotInfo)dp.DataItem;
        return string.Format("Data point: X={0}; Y={1}", plotInfo.XValue, plotInfo.YValue);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

You can find this approach also in the attached project. I hope it helps.

Regards,
Martin
Telerik by Progress

[Shilpa]

Dear Martin,

I am using version 2014.3.1410.45 of Telerik.Windows.Controls.Chart. Unfortunately I cannot upgrade the version, could you please suggest a solution with my version of dll ? Please help me !

Thanks,

Shilpa

[Martin Ivanov]

Hi Shilpa,

In this case, you can use similar approach, but instead using the axis' Categories collection, you can define a collection or a method in the view model that returns all the categories. I updated my project to demonstrate this.

Regards,
Martin
Telerik by Progress

[Shilpa]

Dear Martin,

Yes the solution you provided works, but I do not want to use RadTooltip service. I am using normal tool tip textblock but using the multibinding I am not able to get the DataContext in the converter. Below is my xaml.

<telerik:CategoricalAxis.LabelTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Setter Property="FontFamily" Value="{DynamicResource FontFamilyDefault}"/>
                                    <Setter Property="FontSize" Value="{DynamicResource TextSizeDefault}"/>
                                    <Setter Property="FontStyle" Value="{DynamicResource FontStyleDefault}"/>
                                    <Setter Property="FontWeight" Value="{DynamicResource FontWeightDefault}"/>
                                </Style>
                            </TextBlock.Style>

                            <TextBlock.ToolTip>
                                <ToolTip>
                                    <ToolTip.Style>
                                        <Style TargetType="ToolTip">
                                            <Style.Setters>
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate>
                                                            <Grid Background="{DynamicResource BRUSH_TOOLTIP}" HorizontalAlignment="Right" Width="120" Height="70">
                                                                <StackPanel Margin="5" Orientation="Vertical">
                                                                    <TextBlock >
                                                                        <TextBlock.Text>
                                                                            <MultiBinding Converter="{StaticResource TextToDataPointInfoConverter}">
                                                                                <Binding></Binding>
                                                                                <Binding ElementName="Axis" Path="DataContext"></Binding>
                                                                            </MultiBinding>
                                                                        </TextBlock.Text>
                                                                    </TextBlock>
                                                                </StackPanel>
                                                            </Grid>
                                                        </ControlTemplate>
                                                    </Setter.Value>

                                                </Setter>
                                            </Style.Setters>
                                        </Style>
                                    </ToolTip.Style>
                                </ToolTip>
                            </TextBlock.ToolTip>
  </TextBlock>
                    </DataTemplate>
                </telerik:CategoricalAxis.LabelTemplate>

Could you please help me resolve this issue?

 

Thanks,

Shilpa

[Shilpa]

Hi Martin,

I achieved it through passing the datacontext of axis as relative source binding in Multi Binding. 

Thanks a lot for the solution!

Regards,

Shilpa