Displaying line series in WPF chart with vb.Net

Question

I'm having a rather frustrating time porting some VB.Net winforms code to WPF, and could do with a quick bit of assistance:

In short, I have data that is generated dynamically that I need to plot on a lineseries. Regardless of what I try, the chart is stubbornly refusing to display my data! I've messed about with just about every combination of .DataContext / .ItemsSource / Bindings / etc. I can find and have had a serious google about, but good VB.Net examples seem to be thin on the ground. I've clearly missed something "simple"... any suggestions will be welcomed.

Cut-down code is as follows:

XAML:

    <Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>

    <chartingToolkit:Chart x:Name="MyChart" HorizontalAlignment="Left" Margin="10,10,0,0" Title="Chart Title" VerticalAlignment="Top" Height="300" Width="497">
        <chartingToolkit:LineSeries x:Name="MyLineSeries" DependentValueBinding="{Binding Path=Intensity}"  IndependentValueBinding="{Binding Path=PxNum}" IsSelectionEnabled="True" ItemsSource="{Binding}" >


            <!-- Vertical axis for Intensity values -->
            <chartingToolkit:LineSeries.DependentRangeAxis>
                <chartingToolkit:LinearAxis
                                Orientation="Y"
                                Title="Intensity"
                                Minimum="0"
                                Maximum="65535"
                                Interval="8000"
                                ShowGridLines="True"
                    />
            </chartingToolkit:LineSeries.DependentRangeAxis>
        </chartingToolkit:LineSeries>

        <chartingToolkit:Chart.Axes>
            <!-- Shared horizontal axis -->
            <chartingToolkit:LinearAxis
                            Orientation="X"
                            Title="Detector px"
                            Interval="64"
                            Minimum="0"
                            Maximum="256"
                            ShowGridLines="True"/>
        </chartingToolkit:Chart.Axes>

    </chartingToolkit:Chart>

</Grid>
</Window>

VB:

    Imports System.Collections.ObjectModel

    Class MainWindow

    Dim Series_Saturation As New ObservableCollection(Of GraphPoint)

    Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded


    Series_Saturation.Add(New GraphPoint() With {.PxNum = 0, .Intensity = 54000}) '    New KeyValuePair(Of Int32, Int32)(0, 54000))
    Series_Saturation.Add(New GraphPoint() With {.PxNum = 200, .Intensity = 54000}) '   New KeyValuePair(Of Int32, Int32)(nPX, 54000))

    MyLineSeries.DataContext = Series_Saturation
End Sub

End Class


Public Class GraphPoint

    Public Property PxNum As Long
    Public Property Intensity As Long

End Class

Zippy · Answer 1 · 2014-08-01T10:50:05.030

Sorted it :-)

The vital nugget of information was in this link: how to plot values in line series graph using two textboxes in wpf

There seemed to be two subtleties going on - neither seemed to fix things in isolation, but the combination of the two did:

Basically, when you just drag-and-drop a WPF Toolkit chart on the a VB WPF window it add the xmlns entry:

    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="MainWindow"

Title="MainWindow" Height="350" Width="525">

and your chart is defined as

    <chartingToolkit:Chart x:Name="MyChart"    ...>
    </chartingToolkit:Chart>

It all seems to compile up OK, but with my VB code would not display the points. Note the different xmlns in the following code, which appears to work just fine. This may be due to my development PC having multiple development environments on it?

Also, note that in this example, the datacontext is set for the chart, not the line series. My next challenge will be to see what happens when I try to display multiple lines!

I should add also, that the change in the way the axes are defined was not the thing that made it behave, that was just one of many avenues explored. The text boxes & button are just to demonstrate adding points - I make no apologies for a lack of finesse in the layout, I just wanted the thing to work!!

xaml:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Toolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
x:Class="MainWindow"
Title="MainWindow" Height="352.357" Width="803.114">
<Grid>


    <Toolkit:Chart Name="MyChart" 
                   Title="Line Series Demo" 
                   VerticalAlignment="Top" 
                   Height="320"
                   Width="500" Margin="32,0,263,0">
        <Toolkit:Chart.Axes>
            <!-- Shared horizontal axis -->
            <Toolkit:LinearAxis
                            Orientation="X"
                            Title="Detector px"
                            Interval="64"
                            Minimum="0"
                            Maximum="256"
                            ShowGridLines="True"/>
            <Toolkit:LinearAxis
                                Orientation="Y"
                                Title="Intensity"
                                Minimum="0"
                                Maximum="65535"
                                Interval="8000"
                                ShowGridLines="True"/>
        </Toolkit:Chart.Axes>

        <Toolkit:LineSeries  DependentValuePath="Intensity" 
                             IndependentValuePath="PxNum" 
                             ItemsSource="{Binding UpdateSourceTrigger=PropertyChanged}" 
                             IsSelectionEnabled="True"/>
    </Toolkit:Chart>

    <TextBox x:Name="txtX" HorizontalAlignment="Left" Height="25" Margin="550,10,0,0" TextWrapping="Wrap" Text="0" VerticalAlignment="Top" Width="78"/>
    <TextBox x:Name="txtY" HorizontalAlignment="Left" Height="25" Margin="648,10,0,0" TextWrapping="Wrap" Text="0" VerticalAlignment="Top" Width="78"/>
    <Button x:Name="butAdd" Content="Add Point" HorizontalAlignment="Left" Height="29" Margin="648,40,0,0" VerticalAlignment="Top" Width="78"/>

</Grid>
</Window>

VB:

Imports System.Collections.ObjectModel

Class MainWindow

Dim Series_Saturation As New ObservableCollection(Of GraphPoint)

Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded


    Series_Saturation.Add(New GraphPoint() With {.PxNum = 0, .Intensity = 54000}) '    New KeyValuePair(Of Int32, Int32)(0, 54000))
    Series_Saturation.Add(New GraphPoint() With {.PxNum = 200, .Intensity = 4000}) '   New KeyValuePair(Of Int32, Int32)(nPX, 54000))


    MyChart.DataContext = Series_Saturation

End Sub



Private Sub butAdd_Click(sender As Object, e As RoutedEventArgs) Handles butAdd.Click

    Dim X As Int32 = CInt(txtX.Text)
    Dim Y As Int32 = CInt(txtY.Text)

    Series_Saturation.Add(New GraphPoint() With {.PxNum = X, .Intensity = Y}) 

End Sub
End Class


Public Class GraphPoint

    Public Property PxNum As Long
    Public Property Intensity As Long

End Class

I sincerely hopes this help someone else!

Displaying line series in WPF chart with vb.Net

1 Answers1