2
votes

How can you dynamically update the datasource of a WPF ToolKit chartcontrol? In the following example I update the TextBlock.Text property succesfully with {Binding SomeText} and setting the DataContext of the MainWindow to the property Input. (Please see the code below)

TextBlock.Text is binded to Input.SomeText and the Chart is suppose to use Input.ValueList as a datasource.

The chart remains empty though. I can fill it once with placing

lineChart.DataContext = Input.ValueList;

in the Main Window constructor and set the binding in XAML to ItemsSource="{Binding}". But this only works at startup, it doesn't update when you click a button for example. I want to update the chart while the application is running with new incoming data.

I have the following XAML:

<chartingToolkit:Chart  Name="lineChart">

                <chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList}">
                </chartingToolkit:LineSeries>

</chartingToolkit:Chart>
<Button Width="100" Height="24" Content="More" Name="Button1" />
<TextBlock Name="TextBlock1" Text="{Binding SomeText}" />

With code:

class MainWindow
{

    public DeviceInput Input;

    public MainWindow()
    {
        InitializeComponent();

        Input = new DeviceInput();
        DataContext = Input;
            lineChart.DataContext = Input;
        Input.SomeText = "Lorem ipsum.";

    }

    private void Button1_Click(System.Object sender, System.Windows.RoutedEventArgs e)
    {
        Input.AddValues();
    }
}

public class DeviceInput : INotifyPropertyChanged
{

    private string _SomeText;
    public string SomeText {
        get { return _SomeText; }

        set {
            _SomeText = value;
            OnPropertyChanged("SomeText");
        }
    }


    public List<KeyValuePair<string, int>> ValueList {get; private set;}

    public DeviceInput()
    {
        ValueList = (new List<KeyValuePair<string, int>>());
        AddValues();
    }

    public void AddValues()
    {
            //add values (code removed for readability)
        SomeText = "Items: " + ValueList.Count.ToString();
        OnPropertyChanged("ValueList");
    }

    public event PropertyChangedEventHandler INotifyPropertyChanged.PropertyChanged;

    private void OnPropertyChanged(String info)
    {
        if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }

}

SomeText gets updated and to make sure the ValueList changes I place ValueList.Count in the textblock and you can see the count rising as it should, however the Chart remains the same.

So this results in 1 succesfull binding (but doesnt update):

lineChart.DataContext = Input.ValueList;

ItemsSource="{Binding}"

This doesn't bind at all:

ItemsSource="{Binding ValueList}"
1

1 Answers

6
votes

wpf bind to public properties so you need

 public List<KeyValuePair<string, int>> ValueList {get; private set;}

EDIT: here some more information about using the chart control.

EDIT2:

ItemsSource="{Binding ValueList}"

this can not work because you have to create ValueList as a property first and second you need to set the datacontext to an instance of DeviceInput (like you did in your mainwindow.cs).

EDIT3: quick and dirty example, simply copy&paste and if you hit the button data will be added

viewmodel

public class Input
{
    public ObservableCollection<KeyValuePair<string, int>> ValueList { get; private set; }

    public Input()
    {
        this.ValueList = new ObservableCollection<KeyValuePair<string, int>>();
        ValueList.Add(new KeyValuePair<string, int>("Developer", 60));
        ValueList.Add(new KeyValuePair<string, int>("Misc", 20));
        ValueList.Add(new KeyValuePair<string, int>("Tester", 50));
        ValueList.Add(new KeyValuePair<string, int>("QA", 30));
        ValueList.Add(new KeyValuePair<string, int>("Project Manager", 40));
    }

    public void Add(KeyValuePair<string, int> data)
    {
        ValueList.Add(data);
    }
}

window.cs

public partial class MainWindow : Window
{
  private Input data;
  public MainWindow()
  {
    data= new Input();
    InitializeComponent();
    this.DataContext = data;
  }

  private void button1_Click(object sender, RoutedEventArgs e)
  {
    this.data.Add(new KeyValuePair<string, int>("XXX", 27));
  }

}

xaml

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,-28,0,28">
    <Grid Height="921">
        <chartingToolkit:Chart Height="262" HorizontalAlignment="Left" Margin="33,0,0,620" Name="columnChart" Title="Column Series Demo" VerticalAlignment="Bottom" Width="360">
            <chartingToolkit:ColumnSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" />              
        </chartingToolkit:Chart>
        <chartingToolkit:Chart  Name="pieChart" Title="Pie Series Demo" VerticalAlignment="Top" Margin="449,39,43,0" Height="262">
            <chartingToolkit:PieSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" IsSelectionEnabled="True" />
        </chartingToolkit:Chart>
        <chartingToolkit:Chart  Name="areaChart" Title="Area Series Demo" VerticalAlignment="Top" Margin="33,330,440,0" Height="262">
            <chartingToolkit:AreaSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" IsSelectionEnabled="True"/>
        </chartingToolkit:Chart>
        <chartingToolkit:Chart  Name="barChart" Title="Bar Series Demo" VerticalAlignment="Top" Margin="449,330,43,0" Height="262">
            <chartingToolkit:BarSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" IsSelectionEnabled="True"/>
        </chartingToolkit:Chart>
        <chartingToolkit:Chart  Name="lineChart" Title="Line Series Demo" VerticalAlignment="Top" Margin="33,611,440,0" Height="254">
            <chartingToolkit:LineSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding ValueList }" IsSelectionEnabled="True"/>
        </chartingToolkit:Chart>
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="342,10,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    </Grid>
</ScrollViewer>