Add OxyPlot view in a grid

Question

I have this class, which inherits ContentPage

public class MainPage : ContentPage
{

    public Label lblTime { get; set; }

    public Grid grid { get; set; }

    public MainPage ()
    {

        //some code which doesn't matter

        lblTime = new Label {
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            Text = currentTime
        };

        Grid grid = new Grid
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            RowDefinitions = 
            {
                new RowDefinition { Height = new GridLength(40, GridUnitType.Auto) },
                new RowDefinition { Height = new GridLength() }
            },
            ColumnDefinitions = 
            {
                new ColumnDefinition { Width = new GridLength(50, GridUnitType.Auto) },
                new ColumnDefinition { Width = new GridLength(50, GridUnitType.Star) }
            }
        };

        grid.Children.Add (lblTime, 0, 1, 0, 1);

        Content = new StackLayout { 
            Children = {
                grid
            }
        };
    }
}

I also have this class, which draws the graph:

public class DrawGraph
{
    public PlotModel MyModel { get; set; }

    public DrawGraph ()
    {

        var plotModel = new PlotModel {};

        plotModel.Title = "Test";

        var xaxis = new LinearAxis {
            Position = AxisPosition.Bottom
        };

        var yaxis = new LinearAxis {
            Position = AxisPosition.Left
        };

        yaxis.TickStyle = OxyPlot.Axes.TickStyle.Inside;
        xaxis.MinorTickSize = 20;
        yaxis.TicklineColor = OxyColors.Blue;

        plotModel.Axes.Add (xaxis);
        plotModel.Axes.Add (yaxis);

        var series1 = new LineSeries {
            StrokeThickness = 3,
            MarkerType = MarkerType.Circle,
            MarkerSize = 4,
            MarkerStroke = OxyColors.LimeGreen,
            MarkerStrokeThickness = 1
        };

        double[,] chartValues = new double[,] {{1437041279684.0156,1.0897299999999999},{1437041339421.4324,1.0896},{1437041397111.7322,1.0897100000000002},{1437041458595.2488,1.0898599999999998},{1437041519510.7329,1.08992},{1437041578914.1306,1.08983},{1437041639357.5877,1.0895100000000002},{1437041699721.0405,1.0895299999999999},{1437041758381.3958,1.0895000000000001},{1437041818605.84,1.08954},{1437041879932.3479,1.0894400000000002},{1437041939531.7568,1.08902}};

        for (int i = 0; i < chartValues.GetLength(0)/2; i++) {
            series1.Points.Add (new DataPoint (chartValues[i,0],chartValues[i,1]));
        }

        plotModel.Series.Add (series1);

        this.MyModel = plotModel;
    }
}

My question is, how can I call the DrawGraph class and put the view that it generates in a grid cell? I suppose it will be something like calling the generated plotView from the DrawGraph class, like this: grid.Children.Add (plotView, 0, 1, 1, 2); but I can't figure it out.

Answer 1

Hi the best approach could be use bindings to hook your view to your view model. PlotView to DrawGraph

In this case here are the changes you have to do:

In your ContentPage we have to create a PlotView and add it to the grid, that's where the chart will be renderer,

var graph = new PlotView ();
grid.Children.Add (graph, 0, 0, 1, 0);

Next we have to say to the graph what are we binding to, in this case we are binding the ModelProperty to the MyModel on our ViewModel (our DrawGraph class), we also need to set the BindingContext of our page to be a new DrawGraph instance.

graph.SetBinding(PlotView.ModelProperty, new Binding ("MyModel"));
this.BindingContext = new DrawGraph ();

There are some changes to be made on our DrawGraph class so it he's able to properly update the UI, we need to implement INPC interface. So we add this:

public class DrawGraph : INotifyPropertyChanged
    {
       public event PropertyChangedEventHandler PropertyChanged;

       public void OnPropertyChaged([CallerMemberName]string caller = null){
            var handler = PropertyChanged;
            if (handler != null) {
                handler(this, new PropertyChangedEventArgs(caller));
            }
       }

And we need to change our property setter to notify when changes:

PlotModel myModel;
public PlotModel MyModel {
    get{ return myModel; }
    set {
        myModel = value;
        OnPropertyChaged ();
    }
}

This should be what you need to get the chart rendering.

And everytime you set a new MyModel property it will update the UI.