Search code examples
c#wpfxamlchartswpftoolkit

WPF Toolkit Chart Does Not Display Data

I create WPF app, added chart to markup, made bindings. When I add new points to the graph data, axis changes their max values, but graph line doesn't displayed.

I can't understand what is wrong.

Here is markup of my chart:

<chartingToolkit:Chart x:Name="chart" 
                           BorderThickness="1" 
                           VerticalAlignment="Stretch" 
                           Grid.Row="1">
        <chartingToolkit:LineSeries Title="Options Count" 
                                    Visibility="Visible"
                                    Background="Transparent"
                                    ItemsSource="{Binding MyGraph}"
                                    IndependentValuePath="Key"
                                    DependentValuePath="Value"
                                    DataPointStyle="{StaticResource DataPointStyle1}"
                                    />
        <chartingToolkit:Chart.Axes>
            <chartingToolkit:LinearAxis Orientation="Y" 
                                        Minimum="0" 
                                        Maximum="{Binding MaxValueForAxis}" 
                                        ShowGridLines="True" />

            <chartingToolkit:DateTimeAxis Orientation="X" 
                                          ShowGridLines="True" 
                                          Minimum="{Binding MinDateForAxis}" 
                                          Maximum="{Binding MaxDateForAxis}" 
                                          IntervalType="Auto" 
                                          AxisLabelStyle="{StaticResource AxisStyle}"/>
        </chartingToolkit:Chart.Axes>
    </chartingToolkit:Chart>

And ViewModel code that adds values

public void AddNew()
    {
        MyGraph.Add(DateTime.Now.AddDays(i), i * 100);
        i++;

        OnPropertyChanged("MyGraph");
        OnPropertyChanged("MaxValueForAxis");
        OnPropertyChanged("MinDateForAxis");
        OnPropertyChanged("MaxDateForAxis");
    }

Here is how I set DataContext

ViewModel vm = new ViewModel();
    public MainWindow()
    {
        InitializeComponent();
        DataContext = vm;
    }

enter image description here

Solution

  • Use ObservableCollection<KeyValuePair<DateTime,int>> in your view model, reason being that this collection already implements INotifyCollectionChanged and INotifyPropertyChanged, while Dictionary<> doesn't.

    enter image description here

    XAML:

    <Window x:Class="WpfApplication339.MainWindow"
        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:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:local="clr-namespace:WpfApplication339"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="10*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Content="Add" Grid.Row="0" Click="Button_Click" Width="75" HorizontalAlignment="Left"/>
        <chartingToolkit:Chart x:Name="chart" 
                           BorderThickness="1" 
                           VerticalAlignment="Stretch" 
                           Grid.Row="1">
            <chartingToolkit:LineSeries Title="Options Count" 
                                    Visibility="Visible"
                                    Background="Transparent"
                                    ItemsSource="{Binding MyGraph}"
                                    IndependentValuePath="Key"
                                    DependentValuePath="Value"
                                    />
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:LinearAxis Orientation="Y" 
                                        Minimum="0" 
                                        Maximum="{Binding MaxValueForAxis}" 
                                        ShowGridLines="True" />

                <chartingToolkit:DateTimeAxis Orientation="X" 
                                          ShowGridLines="True" 
                                          Minimum="{Binding MinimumDateForAxis}" 
                                          Maximum="{Binding MaxDateForAxis}" 
                                          IntervalType="Auto" 
                                              />
            </chartingToolkit:Chart.Axes>
        </chartingToolkit:Chart>
    </Grid>
</Window>

    MainWindow:

    public partial class MainWindow : Window
{
    MyViewModel vm;
    int i;

    public MainWindow()
    {
        InitializeComponent();

        vm = new MyViewModel();
        DataContext = vm;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        vm.MyGraph.Add(new KeyValuePair<DateTime, int>(DateTime.Now.AddDays(i), i * 100));
        i++;
    }
}

    ViewModel:

    public class MyViewModel
{
    public ObservableCollection<KeyValuePair<DateTime,int>> MyGraph { get; set; }

    public MyViewModel()
    {
        MyGraph = new ObservableCollection<KeyValuePair<DateTime, int>>();
    }
}