WPF Make Interactive Charts

Question

I'm using System.Windows.Controls.DataVisualization.Toolkit for charts in my WPF application. The code for chart is:

<chartingToolkit:Chart>
                        <!-- Volume -->
                        <chartingToolkit:LineSeries
                            Title="Volume (M)"
                            ItemsSource="{StaticResource StockDataCollection}"
                            IndependentValuePath="Date"
                            DependentValuePath="Volume"/>
                        <!-- Price -->
                        <chartingToolkit:LineSeries
                            Title="Price ($)"
                            ItemsSource="{StaticResource StockDataCollection}"
                            IndependentValuePath="Date"
                            DependentValuePath="Price"/>
                        <chartingToolkit:Chart.Axes>
                            <!-- Axis for custom range -->
                            <chartingToolkit:LinearAxis
                                Orientation="Y"
                                Minimum="0"
                                Maximum="100"
                                ShowGridLines="True"/>
                            <!-- Axis for custom labels -->
                            <chartingToolkit:DateTimeAxis
                                Orientation="X">
                                <chartingToolkit:DateTimeAxis.AxisLabelStyle>
                                    <Style TargetType="chartingToolkit:DateTimeAxisLabel">
                                        <Setter Property="StringFormat" Value="{}{0:MMM d}"/>
                                    </Style>
                                </chartingToolkit:DateTimeAxis.AxisLabelStyle>
                            </chartingToolkit:DateTimeAxis>
                        </chartingToolkit:Chart.Axes>
                    </chartingToolkit:Chart>

I want the user be able to click line series at any point and drag it to up or down and so the Value will be changed ? This is like a two way data binding but I don't know how can I do it.

Answer 1

The WPF Toolkit chart control doesn't have any code to handle mouse dragging, so you'll have to write it yourself.

You should be able to subclass LineDataPoint to add dragging functionality, then subclass LineSeries and override CreateDataPoint() to create your custom LineDataPoint items.

In this case, your ItemsSource would not be an IEnumerable of values (eg IEnumerable<decimal>), but rather of value holder objects (eg IEnumerable<MyValueObject>). The value holder objects would have a property that can be used to retrieve or set the value at that point, Allowing the value to be updated by setting DependentValueBinding to a TwoWay binding to your property. You may be able to reuse existing objects in your application rather than creating a value holder object specifically for this purpose.