locked
How Is Code Behind Used to Set Custom Tooltip for LineSeries? RRS feed

  • Question

  • Situation:

    I am learning about customizing chart features in WPF (via C#) as I transition from MATLAB to .NET Framework. I have a question about further customization of the tooltips beyond what I learned from existing posts and from the this link:

    http://istacee.wordpress.com/2013/03/19/wpf-toolkit-chart-custom-tooltip-on-lineseries-charts/

    Question:

    How may I use a method from code behind to display the desired string when one hovers over a point on the chart? More specifically, is it possible to use the method "MyComplexToMyString" to display the desired string?

    Below is the code I have working so far. The vertical dots simply signify segments of charting code that are identical to what has been already displayed for the first line series.

    The XAML extract:

    <Window x:Class="TestApp.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Line Chart"
            xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
            xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
            Height="675" Width="1200" >

    <Grid Grid.Column="0" Margin="1">
    <chartingToolkit:Chart Name="myLineChart" Height="auto" Width="auto" BorderBrush="#FFC0C0C0">
    <chartingToolkit:LineSeries  Name="firstLineSeries"
    Title="first curve"
    ItemsSource="{Binding [0]}"
    DependentValuePath="Value"
    IndependentValuePath="Key"
    IsSelectionEnabled="True">
    <chartingToolkit:LineSeries.DataPointStyle>
    <Style TargetType="chartingToolkit:DataPoint">
    <Setter Property="Background" Value="Red" />
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="BorderThickness" Value="5" />
    <Setter Property="Width" Value="12" />
    <Setter Property="Height" Value="12" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
    <Grid x:Name="Root" Opacity="1">
    <ToolTipService.ToolTip>
    <StackPanel Margin="10,2,10,2">
    <ContentControl Content="ABC:" FontWeight="Bold"/>
    <ContentControl Content="{TemplateBinding IndependentValue}" />
    <ContentControl Content="{TemplateBinding DependentValue}" />
    </StackPanel>
    </ToolTipService.ToolTip>
    <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
    </Grid>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </chartingToolkit:LineSeries.DataPointStyle>
    </chartingToolkit:LineSeries>
    </chartingToolkit:Chart>
    <chartingToolkit:Chart Name="myLineChart" Height="auto" Width="auto" BorderBrush="#FFC0C0C0">
    <chartingToolkit:LineSeries  Name="secondLineSeries"
    Title="second curve"
    ItemsSource="{Binding [1]}"
    .
    .
    .
    <StackPanel Margin="10,2,10,2">
    <ContentControl Content="JKL:" FontWeight="Bold"/>
    <ContentControl Content="{TemplateBinding IndependentValue}" />
    <ContentControl Content="{TemplateBinding DependentValue}" />
    </StackPanel>
    </ToolTipService.ToolTip>
    .
    .
    .
    </chartingToolkit:LineSeries>
    </chartingToolkit:Chart>
    <chartingToolkit:Chart Name="myLineChart" Height="auto" Width="auto" BorderBrush="#FFC0C0C0">
    <chartingToolkit:LineSeries  Name="secondLineSeries"
    Title="second curve"
    ItemsSource="{Binding [2]}"
    .
    .
    .
    <StackPanel Margin="10,2,10,2">
    <ContentControl Content="XYZ:" FontWeight="Bold"/>
    <ContentControl Content="{TemplateBinding IndependentValue}" />
    <ContentControl Content="{TemplateBinding DependentValue}" />
    </StackPanel>
    </ToolTipService.ToolTip>
    .
    .
    .
    </chartingToolkit:LineSeries>
    </chartingToolkit:Chart>
    </Grid>

    The C# Code Behind:

    private void btnCreateChart_Click(object sender, RoutedEventArgs e)
    {
    GetChartCoordinates();
    }

    private void GetChartCoordinates()
    {
    ((LineSeries)myLineChart.Series[0]).ItemsSource =
    new KeyValuePair<double, double>[]{
    new KeyValuePair<double,double>(0, 0),
    new KeyValuePair<double,double> (6.4, 7.8)};
    ((LineSeries)myLineChart.Series[1]).ItemsSource =
    new KeyValuePair<double, double>[]{
    new KeyValuePair<double,double>(0, 0),
    new KeyValuePair<double,double> (5.9, 2.3)};
    ((LineSeries)myLineChart.Series[2]).ItemsSource =
    new KeyValuePair<double, double>[]{
    new KeyValuePair<double,double>(0, 0),
    new KeyValuePair<double,double> (8.1, 4.7)};
    }

    public string MyComplexToMyString(double myXAxisReal, double myYAxisImaginary)
    {
    string myFormattedMagnitudeAndAngle = "";
    // ... do math and convert the x-axis and y-axis coordinates to a magnitude and an angle
    return myFormattedMagnitudeAndAngle;
    }


    Thursday, April 10, 2014 6:46 PM

All replies

  • Why not use binding?

    http://istacee.wordpress.com/2013/03/19/wpf-toolkit-chart-custom-tooltip-on-lineseries-charts/

    http://istacee.wordpress.com/author/manu404/


    Best Regards,
    Please remember to mark the replies as answers if they help

    Friday, April 11, 2014 2:55 AM
  • I made some progress in testing data binding and below are extracts of code added to that on the original post.

    The Code Behind:

    public class MyStrObject
    {
    public string myStr { get; set; }
    }

    MyStrObject stringInstanceFirstPoint = new MyStrObject();

    private void BindObjToTxtBlk(MyStrObject theStr, TextBlock theTxtBlk)
    {
    // create object
    Binding myBind = new Binding();

    // set properties
    myBind.Path = new PropertyPath("myStr");
    myBind.Mode = BindingMode.OneTime;

    // set source
    myBind.Source = theStr;

    // attach binding
    theTxtBlk.SetBinding(TextBlock.TextProperty, myBind);
    }

    string strFirst = "You can see me now.";
    stringInstanceFirstPoint.myStr = strFirst;
    BindObjToTxtBlk(stringInstanceFirstPoint, TextBlockChartFirstPoint);

    Situation 1: The XAML That Does Work (on Border and Grid Elements):

    <Border Grid.Column="0" Background="Blue" Margin="5" CornerRadius="5">
    <ToolTipService.ToolTip>
    <ToolTip>
    <!-- <ToolTip ToolTipService.ShowDuration="15">-->
    <StackPanel>
    <TextBlock FontWeight="Bold">Test</TextBlock>
    <TextBlock x:Name="TextBlockChartFirstPoint" Foreground="Red"></TextBlock>
    </StackPanel>
    </ToolTip>
    </ToolTipService.ToolTip>
    <Grid>
    <TextBlock Grid.Row="0" Grid.Column="0" Margin="5"
      FontSize="18" FontFamily="Comic Sans MS" FontWeight="Normal"
      HorizontalAlignment="Center" VerticalAlignment="Center"
      Text="Phases">
    </TextBlock>
    </Grid>
    </Border>

    Situation 2: The XAML That Does Not Work (on charting elements):

    .
    .
    .
    <ContentControl>
    <ContentControl Content="ABC:" FontWeight="Bold"/>
    <ContentControl Content="{TemplateBinding IndependentValue}" />
    <ContentControl Content="{TemplateBinding DependentValue}" />
    <TextBlock x:Name="TextBlockChartFirstPoint" Foreground="Red"></TextBlock>
    </ContentControl>
    .
    .
    .

    Problem:

    When I try the binding in the ContentControl, the XAML code has no errors but the code behind in the line with "BindObjToTxtBlk(stringInstanceFirstPoint, TextBlockChartFirstPoint);" says: the name "TextBlockChartFirstPoint" does not exist in the current context. Why does the binding work in Situation 1 but not in Situation 2?

    • Edited by maporojo Friday, April 11, 2014 6:57 PM updated test results
    Friday, April 11, 2014 2:37 PM
  • I tried using binding but had promising but mixed results. See the two "situations" I report; one that works when the element to which I am binding the data is outside that charting element and one that does not work when the element to which I am binding the data is inside the charting element. How can I make the method that binds the data work inside: <ControlTemplate TargetType="chartingToolkit:LineDataPoint"> .. </ControlTemplate> element?
    • Edited by maporojo Monday, April 14, 2014 3:06 PM Clarification
    Saturday, April 12, 2014 9:24 PM
  • I partially resolved this problem through a workaround that is not the most elegant approach. I say partial because the approach does work in the SilverLight chart (i.e. shows a ToolTip with the value at TextBlockMyString) but does not work in its WPF counterpart (i.e. shows a blank Tooltip).

    Resolution:

    I have a TextBlock in one of the grids that already contains the text that I would like to show on the ToolTip. I add this content to the control template using:

    <Style TargetType="chartingToolkit:DataPoint">
    <Setter Property="Background" Value="Red" />
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="BorderThickness" Value="5" />
    <Setter Property="Width" Value="12" />
    <Setter Property="Height" Value="12" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
    <Grid x:Name="firstLineSeriesRoot" Opacity="1">
    <ToolTipService.ToolTip>
    <ToolTip>
    <StackPanel>
    <ContentControl>
    <TextBlock Text="{Binding ElementName=TextBlockMyString, Path=Text, StringFormat='\{0\}'}">
    </TextBlock>
    </ContentControl>
    </StackPanel>
    </ToolTip>
    </ToolTipService.ToolTip>
    <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
    </Grid>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>

    • Edited by maporojo Tuesday, April 22, 2014 2:58 PM Questions has been partially resolved.
    Monday, April 21, 2014 4:51 PM