WPF Graph, display plot marker (with coordinates tooltip) on mouse event

[kirko7]

Hi,

I need to display plot's point coordinates when mouse pointer is hovering above/near it.

I already display a tooltip with coordinates by using code provided in this LINK (works for Graph as well).

However, it's not easy to see which location on the plot is selected, especially when you have more than one plot close to eachother.  Is there a way to display some sort of a "marker"?  Kinda of like on Signal Analyser?

Thank you.

[phansen · Accepted solution]

If you want to display a target and label next to the value as a user moves the mouse over a graph, one option would be to use SetRelativePosition on a cursor.

If you'd prefer to just use a marker in the graph, and keep the label in the tooltip, then you can set the relative position of a visual in the Children collection:

    XAML
    <ni:Graph x:Name="graph">
        <ni:Graph.Children>
            <!-- Option 1 -->
            <ni:Cursor x:Name="cursor" />
            <!-- Option 2 -->
            <Ellipse x:Name="marker" Width="10" Height="10"
                     Stroke="Black" StrokeThickness="2"
                     niPrimitives:RelativePanel.RelativeHorizontalAlignment="Center"
                     niPrimitives:RelativePanel.RelativeVerticalAlignment="Center"
                     />
        </ni:Graph.Children>
    </ni:Graph>

    Code
    private void OnPlotAreaMouseMove( object sender, MouseEventArgs e ) {
        IPlot plot = graph.AllPlots[0];
        Point screenPosition = graph.GetPlotAreaPosition( e );
        Point relativePosition = graph.ScreenToRelative( screenPosition );

        // Option 1
        cursor.SetRelativePosition( relativePosition );

        // Option 2
        PlotValue nearestValue = graph.FindNearestValue( plot, relativePosition, query );
        if( nearestValue != null ) {
            graph.ToolTip = string.Format(
                "Nearest value is at ({0},{1}).",
                nearestValue.Value.Cast<object>( ).ToArray( ) );

            Point nearestValuePosition = nearestValue.GetRelativePosition( );
            RelativePanel.SetRelativeHorizontalPosition( marker, nearestValuePosition.X );
            RelativePanel.SetRelativeVerticalPosition( marker, nearestValuePosition.Y );
        }
    }

[kirko7]

Wow, the Cursor option is a really beautiful solution so I'm definitely going with that

<ni:Cursor x:Name="CursorDC1" CrosshairBrush="Yellow" CrosshairThickness="0.6"/>

I tried the Ellipse too but when you soom in, the positioning wasn't spot on like with the Cursor.

Thank you very much!