WPF - Plotting a cosine function when radiobutton is clicked

Question

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>

No idea where exactly you are using it, but my feeling is that SpeedOfLight would better be declared as `public const double SpeedOfLight = 299792458;` — Clemens, Sep 21 '15 at 15:04
@Ugur Yes I did check the example solution it is not full and oxyplot does not seem to work like it is expected to be. This example solution was a question relating to windows form. I was able to easily control the graph using scichart or visifire and plot by connecting the buttons but oxyplot for some reason does not work the similar way. I think MVVM method might be the way to go for oxyplot. — GaoGaiGar, Sep 24 '15 at 02:23

score 1 · Accepted Answer · edited Sep 24 '15 at 14:40

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>

1. For graph() there needs to be a public PlotModel model { get; private set; } otherwise visual studio says, "model does not exist in current context". 2. Another error that pops up: this.plot.model = model; plot also needs to be defined. Assumptions I made: I am assuming in XAML binding for the oxyplot is Model="{Binding model}" and I am assuming the code above goes in MainWindow class. — GaoGaiGar, Sep 22 '15 at 14:37
yes of course, just you can define the rest of the code. It is not full code — Ugur, Sep 22 '15 at 19:50
Just a side note : in xaml remove and thanks needed to know how to define the mainwindow. — GaoGaiGar, Sep 24 '15 at 14:33
But don't forget, this example not MVVM based. Because of "this.plot.Model = MyModel;". You can modify it later as MVVM based. — Ugur, Sep 24 '15 at 14:39
Yes I can see this is not MVVM based however, I was looking for a simple way of doing it and had trouble setting up the constructor for the main window. Thanks for the help. — GaoGaiGar, Sep 24 '15 at 14:41

WPF - Plotting a cosine function when radiobutton is clicked

1 Answers1