binding chart plotter using mvvm

Question

I am trying to make graphs using dynamic data display. I am using MVVM. My senderviewmodel code is the following

     voltagePointCollection = new VoltagePointCollection();

        updateCollectionTimer = new DispatcherTimer();
        updateCollectionTimer.Interval = TimeSpan.FromMilliseconds(1);
        updateCollectionTimer.Tick += new EventHandler(updateCollectionTimer_Tick);
        updateCollectionTimer.Start();

        var ds = new EnumerableDataSource<VoltagePoint>(voltagePointCollection);
        ds.SetXMapping(x => dateAxis.ConvertToDouble(x.Date));
        ds.SetYMapping(y => y.Voltage);
        ((MainWindow)System.Windows.Application.Current.MainWindow).TextBlock1.Text = "Setting Text from My Program";
        ((MainWindow)System.Windows.Application.Current.MainWindow).plotter.AddLineGraph(ds, Colors.Green, 2, "Volts");
       plotter.AddLineGraph(ds, Colors.Green, 2, "Volts"); // to use this method you need "using Microsoft.Research.DynamicDataDisplay;"

        MaxVoltage = 3;
        MinVoltage = -3;
        //System.IO.StreamReader file = new System.IO.StreamReader("C:\\Users\\niranjan\\Desktop\\sample.txt");
        //var sample = file.ReadToEnd();
        //tokens = sample.Split(new string[] { "\r\n", "\n" }, StringSplitOptions.None);
        // here graph ending

        ResultValue = "N/D";
        var wasSent = await _senderBluetoothService.Send(SelectDevice, Data);
        if (wasSent)
        {
            ResultValue = "The data was sent.";
        }
        else
        {
            ResultValue = "The data was not sent.";
        }

My view.xaml file is the following

    <d3:ChartPlotter Name= "plotter" Grid.Row="1" Grid.Column="1" Height="244" HorizontalAlignment="Left" Width="1076">
        <d3:ChartPlotter.HorizontalAxis>
            <d3:HorizontalDateTimeAxis Name="dateAxis"/>
        </d3:ChartPlotter.HorizontalAxis>
        <d3:Header FontFamily="Georgia" Content="Voltage chart"/>
        <d3:VerticalAxisTitle FontFamily="Georgia" Content="Voltage [V]" />
        <d3:HorizontalAxisTitle FontFamily="Georgia" Content="Time"/>
        <d3:HorizontalLine Value="{Binding MaxVoltage}" Stroke="Red" StrokeThickness="2"/>
        <d3:HorizontalLine Value="{Binding MinVoltage}" Stroke="Red" StrokeThickness="2"/>
    </d3:ChartPlotter>

The problem is in the line

    plotter.AddLineGraph(ds, Colors.Green, 2, "Volts");

It says that the plotter does not exist in the current context. But binding MaxVoltage and MinVoltage work. Could you please tell me changes so that I can use plotter.addline in my SenderViewmodel.cs file.

score 0 · Answer 1 · answered Jul 26 '16 at 09:13

When using MVVM, you can't directly target UI elements. The only way to interact with your UI is through use of ViewModel properties and binding them with the UI. You are doing that with Max and MinVoltage, so those work...

But plotter is an UI element, if you want to use any of it's methods, the best way to do this is by using some kind of MVVM messaging ( mvvm light messenger ) and registering to that message in the code behind of the view. That way you can use the UI element.

score 0 · Answer 2 · answered Jul 27 '16 at 14:09

You can declare an instance of your viewModel within your view and bind it to the DataContext of the view as follows:

public MyViewModel myVM;

Add to constructor of your view:

   public MyView()
   {
    ..
   myVM = new MyViewModel();

   this.DataContext = myVM;
   }

Declare a plotter within the view and here use data from your viewModel as a dataSource and then call ploting function:

var ds = new EnumerableDataSource<VoltagePoint>(myVM.voltagePointCollection);
        ds.SetXMapping(x => dateAxis.ConvertToDouble(x.Date));
        ds.SetYMapping(y => y.Voltage);
        plotter.AddLineGraph(ds, Colors.Green, 2, "Volts");

Hope it helps a bit. Shall you have questions I remain on your disposal.

Best regards,

binding chart plotter using mvvm

2 Answers2