How to add a marker at a specific point in a Dynamic Data Display plot?

Question

I'm using a Dynamic Data Display (v0.4) plot and I want add a circle marker at a specific data point of series to highlight the position of the maximum value of the plot.

Taking into account the very small amount of documentation and examples provided by the developers of Dynamic Data Display, does anybody know how to add a marker at a specific point?

UPDATE

Since v0.4 does not have d3:CircleMarkerGraph and I would like to use this version instead of v0.3 (reverting also requires code adjustment), I've tried the following:

View:

<d3:ChartPlotter x:Name="spectrumPlot" />
    <d3:LineGraph x:Name="spectrumLineGraph" DataSource="{Binding SpectrumPlotData}"/>
    <d3:MarkerPointsGraph x:Name="spectrumMarkers" DataSource="{Binding SpectrumMarkersData}" />
</d3:ChartPlotter>

Viewmodel:

private IPointDataSource _spectrumMarkersData;
    public IPointDataSource SpectrumMarkersData
    {
        get { return _spectrumMarkersData; }
        set
        {
            _spectrumMarkersData = value;
            OnPropertyChanged("SpectrumMarkersData");
        }
    }

private void UpdatePlotData()
    {
        EnumerableDataSource<double> xDataSource, yDataSource;
        xDataSource = new EnumerableDataSource<double>(SignalProcessor.Instance.GetXAxisSpectrum()); xDataSource.SetXMapping(X => X);
        yDataSource = new EnumerableDataSource<double>(SignalProcessor.Instance.GetYAxisSpectrum()); yDataSource.SetYMapping(Y => Y);
        SpectrumPlotData = new CompositeDataSource(xDataSource, yDataSource);
        SpectrumMarkersData = new CompositeDataSource(xDataSource, yDataSource);
    }

I would expect a marker at every point in the spectrum plot, but none appears. Does anyone know what I am doing wrong?

score 2 · Answer 1 · answered Jul 19 '16 at 11:46

In the online tutorial for the Silverlight version, in the Drawing multiple graphs section, they use a second plot to mark specific items. That is, the markers are overlaid on the graph as a second plot.

The WPF version, that you can download in source form from CodePlex (most recent downloadable version is v0.3), does not expose the same objects or namespaces as the Silverlight version.

Assuming a simple list of data points, where the X coordinate is the index of the item in the array. The markers use Point objects to map and X index to a point Y value. This is so that you do not need to have a marker for every item in the data set. You will need to implement the GetDataPoints() and GetMarkPoints() yourself, or use whatever collections your already have.

C# code-behind example:

public partial class GraphView : UserControl
{
    public GraphView()
    {
        InitializeComponent();

        // Get the data and mark points.
        double dataPoints[] = GetDataPoints();
        Point markPoints[] = GetMarkPoints();

        // Plot the data.
        line.Plot(dataPoints);

        // Plot the markers.
        markers.Plot(markPoints);
    }
}

And the (Silverlight) XAML:

<UserControl x:Class="GraphView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d3="clr-namespace:Microsoft.Research.DynamicDataDisplay;assembly=DynamicDataDisplay.Silverlight"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <d3:Chart>
            <Grid>
                <!-- Plot line graph -->
                <d3:LineGraph Name="line" 
                              Description="Actual data" 
                              Stroke="Green"/>                
                <!-- Plot additional points over line graph -->
                <d3:CircleMarkerGraph Name="markers" 
                                      Description="Interesting points" 
                                      Size="5" Color="Black"/>
            </Grid>
        </d3:Chart>
    </Grid>
</UserControl>

Thank you for this solution. However before reverting to v0.3, I would like to further try v0.4. Please check my updated question. — Cristian M, Jul 21 '16 at 12:46

How to add a marker at a specific point in a Dynamic Data Display plot?

1 Answers1