We can now set up the Chart in XAML, or we can do it in the code behind. Let’s see how we can do this in the code behind below.
In the code behind of the MainPage, using the Telerik.XamarinForms.Chart namespace, create a RadCartesianChart instance and add a categorical axis making it the horizontal axis, and a numerical axis making it the vertical axis. Add a Bar series, and set the content of the page to be the Chart:
What this chart would be without data? Let’s fill it with the sample data we created in the view-model:
One could get better interpretation for data if its shown on a grid background, so let’s add a grid using the Xamarin.Forms namespace:
For pointing out specific metrics that the chart gives, we can use band and line annotations. In this case, let’s take the data average and display it on the chart:
This is it! You can download demo project from Github. Note, that it needs the UI for Xamarin product to run.
Download UI for Xamarin from here, if you haven’t done so already. In the UI for Xamarin package, you will find a complimentary demo project with many examples demonstrating the Telerik Chart for Xamarin.
Nikolay Diyanov Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.
Find him on Twitter @n_diyanov or on LinkedIn.