How to plot a line graph in WPF MVVM atrchitecture

Question

Hi ,

I wanted to plot one 2D graph,X axis time,Y axis some number.

I tried using Polyline.But in mvvm architecture i am not able to bind the data.Can anyone help/suggest me a way to fix the problem.

Answer 1

I did a sample in C#, below is the code:
XAML code is:

 <Window.DataContext>  
        <local:MyViewModel></local:MyViewModel>  
    </Window.DataContext>  
    <StackPanel>  
        <Polyline Height="300"  Name="_myPolyline" Stroke="{Binding myModel.ColorName}" Tag="123213" StrokeThickness="4" Points="{Binding myModel.points}" ></Polyline>  
    </StackPanel>  

The cs code is:

public partial class MainWindow : Window  
    {  
        public MainWindow()  
        {  
            InitializeComponent();  
            MyViewModel vm = new MyViewModel();  
            _myPolyline.Points = vm.myModel.points;  
        }  
    }  
  
    public class MyViewModel  
    {  
  
        public int currentSecond = 0;  
        Random rd = new Random();  
        public PointCollection LtPoint = new PointCollection();  
  
        public MyModel myModel { get; set; } = new MyModel();  
        public MyViewModel()  
        {  
            DispatcherTimer timer = new DispatcherTimer();  
            timer.Tick += Timer_Tick;  
            timer.Interval = TimeSpan.FromMilliseconds(500);  
            timer.Start();  
  
            myModel = new MyModel()  
            {  
                points = LtPoint,  
                ColorName = "Blue"  
            };  
        }  
  
        private void Timer_Tick(object sender, EventArgs e)  
        {  
            currentSecond++;  
            double x = currentSecond * 10;  
            double y = rd.Next(1, 200);  
            LtPoint.Add(new Point(x, y));  
        }  
    }  
  
    public class MyModel  
    {  
        public PointCollection points { get; set; } = new PointCollection();  
  
        public string ColorName { get; set; }  
    }  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi,
you can display PLine and use Interactivity from NuGet. Try following demo:

XAML:

<Window x:Class="Window052"  
        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:local="clr-namespace:WpfApp1.WpfApp052"  
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"  
        mc:Ignorable="d"  
        Title="Window052" Height="450" Width="800">  
  <Window.DataContext>  
    <local:ViewModel/>  
  </Window.DataContext>  
  <Canvas Background="White">  
    <i:Interaction.Behaviors>  
      <local:CanvasBehavior/>  
    </i:Interaction.Behaviors>  
  </Canvas>  
</Window>  

And classes in VB.NET:

It's impossible to post code, please see attached txt.

83334-x.txt