In order to draw the chart, we will divide the chart in four layer which we will draw one by one.
Therefore this post will be composed by the three layers.

Draw background and bands

Draw axis and labels

Draw lines and markers

1. Draw background and bands

We can see the canvas as a painting canvas.
When we draw something and then draw something on top of that, the last thing drawn will hide the previous one - just like as if you are painting something on top of something else.
Therefore the first thing we need to draw is the background.

Left, Right, Top and Bottom represent the X axis start, X axis end, Y axis start and Y axis end of the chart.
It will be used to place the chart in the view.
Also every lines, axis, labels and markers will be drawn using the boundaries as reference.

As it is easier to understand with a picture here is a picture of the empty plot:

I have all my padding saved into an options object.
I have shown how you can access properties from the Xamarin.Forms view in my previous blog post - https://kimsereyblog.blogspot.co.uk/2016/10/build-your-own-line-chart-for.html,
that’s where I get the options from, if you want to see the full code please refer to my github (https://github.com/Kimserey/GraphTest.Droid2/blob/master/Droid/GraphViewRenderer.cs)[https://github.com/Kimserey/GraphTest.Droid2/blob/master/Droid/GraphViewRenderer.cs].

Left will be the padding left plus the text size and plus some small offset for the text to not be right next to the axis.

In order to have a graph that renders nicely on a defined number of sections, the maximum value must be calculated by rounding up to the closest 50.
I have set the number of section to 4 as I know that for any type of view in my usage, 4 sections is the nicest display.

Next the labels, in order to place the labels correctly, we need to go through each of the items and calculate the pixel y value.
By pixel value I mean the value which will be used to be displayed on screen.

In order to find the pixel value we use a formula:

1

var pixelValue = realValue * plotHeight / verticalMaxValue

Where does this formula comes from? Well it comes from what we learn in college - the cross formula - or something like that… I guess…
Anyway this formula respect the proportions. It basically says since I know that plotHeight (in px) ~= verticalMaxValue (in real units), how much pixel does the realValue (in real units) takes?
And the responce is you take the realValue times it by the plotHeight and divide by the verticalMaxValue.

We also want to know the x pixel position.
We calculate that with the following formula:

1

var x = verticalSection.Width * (index + 0.5f);

Since every x labels will be placed in the middle of the section, we half the section * 0.5f and since the index starts at 0, it is always index + 0.5f.

Alright knowing that, we can iterate over all the items and construct a points list which will contain all the value normalized.

Conclusion

Today we saw the PART 2 of how to draw a line chart for Xamarin.Android and Xamarin.Forms.
We looked at a way to draw the layer of canvas one by one and saw how to compose the chart.
I hope you enjoyed this small series and if you did let me know by leaving a comment or
hit me on Twitter @Kimserey_Lam!
See you next time!