Search code examples
c#wpfxamloxyplot

WPF - Plotting a cosine function when radiobutton is clicked


I just started learning C# and I want to plot a cosine when user presses the radiobutton using WPF GUI interface. I think I am having trouble how to use call objects within different class. Thanks in advance and below is my code:

namespace WpfApplication2
{
    using OxyPlot;
    using OxyPlot.Annotations;
    using OxyPlot.Axes;
    using OxyPlot.Series;

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }



        private void button_Click_2(object sender, RoutedEventArgs e)
        {
            if (radioButton1.IsChecked == true)
            {
                MessageBox.Show("Plot Cosine");
                //I think solution should be something like this
                //MainViewModel.MyModel.Series.Add(new FunctionSeries(Math.Cos, -10, 10, 0.01, "cos(x)"));

            }
        }

    }

    public class MainViewModel : Window
    {
        //Plotting without any user input
        public const double Pi = 3.14159265358979323846;
        public const int SpeedOfLight = 3 * 10 ^ 8; // m per sec.


        //OxyPlot.Wpf.PlotModel plot = new OxyPlot.Wpf.PlotView();

        public MainViewModel()
        {
            MyModel = new PlotModel { Title = "Your Equation", LegendTitle = "Equations" };
            MyModel.Axes.Add(new LinearAxis { Position = AxisPosition.Bottom, Title = "Distance" });
            MyModel.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Title = "Height" });


            //Determine your range for the plot
            //MyModel.Axes.Add(new LinearAxis(AxisPosition.Bottom, -10, 10));
            //MyModel.Axes.Add(new LinearAxis(AxisPosition.Left, -5, 5));


            MyModel.Series.Add(new FunctionSeries(Math.Cos, -10, 10, 0.01, "cos(x)"));
            MyModel.Series.Add(new FunctionSeries(Math.Sin, -10, 10, 0.01, "sin(x)"));

            LineSeries linePoints = new LineSeries() { };
            double x, y;
            DataPoint XYpoint = new DataPoint();
            for (x = -10; x <= 10; x += 0.01)
            {
                //Make sure not 1/3 since C# will read it as integer divided by integer hence 1/3=0
                //Use Math.Pow for powers
                //Definately Matlab is easier to plot stuff XD
                y = 1.0 / 2.0 * Math.Pow(x, 2) + 1;
                XYpoint = new DataPoint(x, y);
                linePoints.Points.Add(XYpoint);

            }

            MyModel.Series.Add(linePoints);
            MyModel.InvalidatePlot(true);

        }


        public PlotModel MyModel { get; private set; }

    }

}

Below is XAML code:

<Window x:Name="plot" x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:oxy="http://oxyplot.org/wpf"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication2"
        mc:Ignorable="d"
        Title="Plots" Height="450.307" Width="955.532" Background="White">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="73*"/>
            <RowDefinition Height="11*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="145*"/>
            <ColumnDefinition Width="329*"/>
        </Grid.ColumnDefinitions>


        <oxy:PlotView Title="{Binding Title}" Margin="4,0,0,0" Model="{Binding MyModel}" Grid.Column="1" >
            <oxy:PlotView.Series>
                <oxy:LineSeries ItemsSource="{Binding Points}"/>
            </oxy:PlotView.Series>
        </oxy:PlotView>
        <Label x:Name="label"  HorizontalAlignment="Left" Height="30" Margin="120,185,0,0" VerticalAlignment="Top" Width="142"/>

        <RadioButton x:Name="radioButton1" Content="Plot Cosine" Grid.Column="1" HorizontalAlignment="Left" Height="20" Margin="50,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="85" />

        <Button x:Name="button1" Content="Clear" HorizontalAlignment="Left" Height="35" Margin="120,7,0,0" Grid.Row="1" VerticalAlignment="Top" Width="142" Click="button_Click_2"/>
    </Grid>
</Window>

Solution

  • C#

    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    using OxyPlot;
    using OxyPlot.Series;
    using OxyPlot.Axes;
    
    namespace WpfApplication2
    {
        /// <summary>
        /// Interaktionslogik für MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
    
            public PlotModel MyModel { get; private set; }
    
    
            public MainWindow()
            {
                InitializeComponent();
    
                MyModel = new PlotModel { Title = "Your Equation", LegendTitle = "Equations" };
                MyModel.Axes.Add(new LinearAxis { Position = AxisPosition.Bottom, Title = "Distance" });
                MyModel.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Title = "Height" });
            }
    
            private void button1_Click(object sender, RoutedEventArgs e)
            {
                if (radioButton1.IsChecked == true)
                {
                    //MessageBox.Show("Plot Cosine");
                    graph();
    
                }
            }
    
    
            public double getValue(int x, int y)
            {
                return (10 * x * x + 11 * x * y * y + 12 * x * y);
            }
    
            //setting the values to the function
            public FunctionSeries GetFunction()
            {
                int n = 100;
                FunctionSeries serie = new FunctionSeries();
                for (int x = 0; x < n; x++)
                {
                    for (int y = 0; y < n; y++)
                    {
                        //adding the points based x,y
                        DataPoint data = new DataPoint(x, getValue(x, y));
    
                        //adding the point to the serie
                        serie.Points.Add(data);
                    }
                }
                //returning the serie
                return serie;
            }
    
    
            public void graph()
            {
                MyModel = new PlotModel { Title = "example" };
                MyModel.LegendPosition = LegendPosition.RightBottom;
                MyModel.LegendPlacement = LegendPlacement.Outside;
                MyModel.LegendOrientation = LegendOrientation.Horizontal;
    
                MyModel.Series.Add(GetFunction());
                var Yaxis = new OxyPlot.Axes.LinearAxis();
                OxyPlot.Axes.LinearAxis XAxis = new OxyPlot.Axes.LinearAxis { Position = OxyPlot.Axes.AxisPosition.Bottom, Minimum = 0, Maximum = 100 };
                XAxis.Title = "X";
                Yaxis.Title = "10 * x * x + 11 * x*y*y  + 12*x*y";
                MyModel.Axes.Add(Yaxis);
                MyModel.Axes.Add(XAxis);
                this.plot.Model = MyModel;
            }
    
    
    
    
    
    
    
    
    
    
        }
    }
    

    XAML

    <Window x:Class="WpfApplication2.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:oxy="http://oxyplot.org/wpf"
            xmlns:local="clr-namespace:WpfApplication2"
            Title="MainWindow" Height="350" Width="525">
    
    
    
    
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="73*"/>
                <RowDefinition Height="11*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="145*"/>
                <ColumnDefinition Width="329*"/>
            </Grid.ColumnDefinitions>
    
    
            <oxy:PlotView  Margin="4,0,0,0"  Grid.Column="1" Name="plot" >
                <!--<oxy:PlotView.Series>
                    <oxy:LineSeries ItemsSource="{Binding Points}"/>
                </oxy:PlotView.Series>-->
            </oxy:PlotView>
            <Label x:Name="label"  HorizontalAlignment="Left" Height="30" Margin="120,185,0,0" VerticalAlignment="Top" Width="142"/>
    
            <RadioButton x:Name="radioButton1" IsChecked="True" Content="Plot Cosine" Grid.Column="1" HorizontalAlignment="Left" Height="20" Margin="50,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="85"  />
    
            <Button x:Name="button1" Content="Clear" HorizontalAlignment="Left" Height="35" Margin="120,7,0,0" Grid.Row="1" VerticalAlignment="Top" Width="142" Click="button1_Click"/>
        </Grid>
    </Window>
    

    enter image description here