Add OxyPlot View to Grid
I have this class which inherits from 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 that draws a 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 place the view it generates in a grid cell? I suppose it would be like calling the generated plotView from the DrawGraph class, for example: grid.Children.Add (plotView, 0, 1, 1, 2); but I cannot figure it out.
source to share
Hi the best approach is to use bindings to bind your view to your view model. PlotView to DrawGraph
In this case, you need to make the following changes:
In your ContentPage, we need to create a PlotView and add it to the grid, where the plot will be the renderer,
var graph = new PlotView ();
grid.Children.Add (graph, 0, 0, 1, 0);
Next we need to tell the graphic what we are bound to, in this case we bind ModelProperty to MyModel on our ViewModel (our DrawGraph class), we also need to set the BindingContext of our page as a new DrawGraph instance.
graph.SetBinding(PlotView.ModelProperty, new Binding ("MyModel"));
this.BindingContext = new DrawGraph ();
We've made some changes to our DrawGraph class so that it can update the interface correctly, we need to implement the INPC interface. Therefore, we add the following:
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 definition for notification on change:
PlotModel myModel;
public PlotModel MyModel {
get{ return myModel; }
set {
myModel = value;
OnPropertyChaged ();
}
}
This should be what you need to get the chart rendered.
And every time you set a new property, MyModel, it updates the UI.
source to share