How to : Load the co-ordinates when mouse is hovered on a line graph

Nov 6, 2013 at 12:30 PM
I am working on a project which demands the real time data display of co-ordinates(X,Y axis) when the mouse is hovered on a line graph. please let me know if this is supported in D3 and if so how to enable this? . currently XAML code looks something like this.
  <d3:ChartPlotter  Name="chartPlot" Grid.Row="0" Grid.Column="1">
  <d3:LineGraph x:Name="linegraph" Stroke="Blue"  StrokeThickness="5">
  </d3:LineGraph>
  </d3:ChartPlotter>
The graph is plotted perfectly but when i place my mouse pointer on the graph(line graph) it wont show any co-ordinate data (x,y axis data).
Sep 4, 2014 at 1:30 PM
Hi,

I also need the same requirement into our project. Also need to get the data source of the line.
If anybody implement it, please advise me.

Regards,
George
Jun 27, 2015 at 4:00 AM
My code behind is C#, and I'm not using the Silverlight version, but sticking with the WPF original. It's doing what I need. I hope it will be the same for you.

Here's what I've done for the cursor. I cribbed it from the source code for the D3 samples.

Below is a fairly generic method for setting the coordinate cursor to display the X and Y values. It takes in a standard formatting string. In this case "F3" (for 3 decimals) is the default.
public CursorCoordinateGraph SetCoordCursor(string FormatString = "F3")
{
    CursorCoordinateGraph graphCursor = new CursorCoordinateGraph();
    graphCursor.XTextMapping = x => x.ToString(FormatString);
    graphCursor.YTextMapping = y => y.ToString(FormatString);
    return graphCursor;
}
This can then be applied to any chart.

Given this fairly simple chart:
<d3:ChartPlotter Name="chartTemperature">
</d3:ChartPlotter>
In your code behind enter the following line attaching the coordinate graph to the chart.
chartTemperature.Children.Add(SetCoordCursor());
By default, this presents the X value adjacent to the bottom (X) axis and the Y value adjacent to the left (Y) axis, with dashed lines across the chart, crossing at the displayed coordinate.

Another option can make use of a HorizontalDateTimeAxis when you've got date data on the X-Axis.

In your XAML, set up the HorizontalDateTimeAxis:
<d3:ChartPlotter Name="chartTemperature">
    <d3:ChartPlotter.HorizontalAxis>
        <d3:HorizontalDateTimeAxis Name="dateAxisTemp"/>
    </d3:ChartPlotter.HorizontalAxis>
</d3:ChartPlotter>
The 'SetCoordinateCusor' method looks like this:
public CursorCoordinateGraph SetCoordCursor(HorizontalDateTimeAxis DateAxis, string DateFormat ="dd MMM yyyy hh:mm:ss") )
{
    CursorCoordinateGraph graphCursor = new CursorCoordinateGraph();
    graphCursor.XTextMapping = x => DateAxis.ConvertFromDouble(x).ToString(DateFormat);
    graphCursor.YTextMapping = y => y.ToString("F1");
    return graphCursor;
}
Set the coordinate cursor like this:
chartTemperature.Children.Add(SetCoordCursor(dateAxisTemp));
I hope this helps anyone who finds this topic.

I'm currently trying to find a way of getting the X and Y values processing them and setting the result to the coordinate cursor. It's proving troublesome.

I'll probably post it separately, but I'm not getting much joy out of another post, so I'm starting to lose faith in this forum.