 Hi guys. My name is Sohail Shekhar and in my last event, I didn't have any presentation. I was just working on the code on my Visual Studio. So this time I have presentation, but less on code. Okay. So here we go. From the time I have been working with Xamarin and especially on Xamarin Forms, I get a lot of people to ask questions that can we do this in Xamarin Forms? Can we do this in Xamarin Forms? My app requirement is some funky UI. Can we do that in Xamarin Forms? And a lot of other requirements. So recently I had this kind of situation where I had to build some complex charts in my app and I was doing some research on how to do it in Xamarin Forms. So in this presentation, I'm going to share with you guys that what I went through and what are the options available. So in case if still people, some of the one who is still thinking what are charts. So here's an example of chart you can read by. Not funny, but yeah. So let's go quickly. Something in relation with data and graph. Literally, we are living in a world where every second we are collecting some data. So why the charts are useful? Because there's a lot of data. Just to think about it, even when we are present in this event, we have collected so much of data. When we entered the building we did registration, that was collection of data. When we signed up for this event on Meetup, that was collection of data. So many data everywhere and time. But how do we make this data useful? Because if you look at the raw data, it's not going to be useful, right? So they need to be something presentable. That's why charts are used. So what is the relation of mobile apps and charts? Charts and other complex UIs where look to be implemented in desktop and web apps, but now it's everywhere. With me, everybody would believe, I mean everybody would believe with me that complex UIs are getting more and more used in mobile apps. And mobile apps are just getting in every kind of application, like wherever we have some kind of very complex UI, everything is going to be done in, it's getting done in mobile. So we are here in context with Xamarin Forms, but let's see what kind of apps do have charts. First is, and obviously financial apps, they have all kind of charts to give you reports of your finance and stuff. BI tools uses tremendous number of charts. Very good use, I mean very good example is the fitness and health apps, which uses charts to give you the timeline of your heart rate and your weight and stuff like that. Or be it statics, statics itself. But there can be different charts and data can be presented in different charts, but there's a difference. Just for example, if you talk about BarGraph, BarGraph shows us trends, but BarGraph shows us visually very nicely data, but if we want to show the trends over the time, we have to use line chart. But why I'm saying this here and why we are talking about this in this presentation is because we need to know what are the options available for Xamarin Forms and what kind of charts we can do and how much customization we can do with Xamarin Forms. Because that's the ultimate question I want to answer. When we are using Xamarin Forms, what are the options we have to do it? So these are the few options we like was included in Ben's slide also, that these are the companies who are building custom controls like charts and gauge and other complex data grids and stuff. So during my, okay, let's take first look at a few scenarios which I was referring to. So in my app, so this is a chart and I had to do X7 grid light customization. What does that mean that do you see these grid lines? So I had to, the UI which was given to me had some customization with grid lines. So the grid lines should be strip one and there should be a very specific strip like seven to three strip and then the color need to be changed a lot of time, a lot of customizations with that. But not just with that, there was a customization with access lines and okay, even the access visibility. So if I just want to show this axis, not this axis, or I want to show it in right side of the chart, what more? Yeah, there was one more requirement which said that every next data point should have different color or their colors defined. So I need that kind of level of customization where I can give separate color to different data points in charts. And then this data points, do you see this data points at each graph? So there was customization needed for that also. So it need to be specific shape, specific color and specific border, too much of detail and too much of customization seriously. And then whenever you press this data point, there should be a tool tip and you should be able to customize that tool tip. So you need to be able to create your own UI in that tool tip and you need to able to change that view of that tool tip. Then there's one more customization was strip line. So chart will have strip line and here in picture is not visible but in my requirement it was like this that this color of spline will also change with strip. So if strip line is below this level, then it will be different color. If it goes up at this level, it will be different color. And believe me guys, it was really difficult to find a solution to all of this kind of customization. So I went through all of the ones which we saw before. Where is it? So all of these ones, I tried them. Few are very good, great, but didn't allowed me that level of customization. For few of them, documents were not very poorly updated. So I didn't either knew how to do it or I have to chase their support to do that, to get the information. The one, one of the component which I liked and I chose for my implementation was Syncfusion. It's my preference you guys can explore, but most of my questions were answered in Syncfusion. I got all kind of customization, not all but like 95% of customization with Syncfusion. So that was solution for my, so let's have some demo. So we talked about, so we talked about customization, but what I'm going to do is I'm going to show you guys each of those customization, how I did that. So let's begin with this. So whenever you want to integrate Syncfusion, it goes very well with XML. That is what the preferred one. So I have here let's say this XML and what I did is I created a chart. That's it. And it goes really well just as we add the normal components like text box and the one like the bench should. You have to just work in a similar fashion. So I added chart and then I can do all kind of different customization like this is a tooltip behavior what I said that I need to change the view of the tooltip. So I did that and then so everything I mean data marker, marker type it should be Eclipse, height, color, part of it, lot of customization. And all of this were possible in this in Syncfusion, but I didn't find all of them in other components. I'm not saying they are not good, but the level of customization which I wanted and my requirement was what not found, but they can be great in other scenarios or if your customization is not that level. So okay here in I don't have much code. I'm just giving data to be shown in the chart. But literally everything is done on XML and I could have done this also in XML, but you can do it in code or in XML either ways. Don't worry about this red lines, IntelliSense doesn't work proper, but yeah this chart, so how does it look? So let's let's execute this. I'm not going to execute it here because it's going to take maybe probably seven to eight minutes just to give you the output. So I have already executed it and it's there in my simulator. So I'm just going to show you that. And here it is. So this is the basic which I was talking about said that the color should be different for each chart for each data point and it depends on data what color it needs to be. This was a strip. This is the chart where the customization was with grid line with data marker and the color of this of spline where it goes out of this strip line. If you are I don't know if you are still able to if you are able to view this strip line, there's a thin strip line not very obvious and then the color need to be changed accordingly which was very very great customization and then like multiple strip lines and you should be able to toggle it and then you can toggle the recommended value. So all this stuff yeah so this is how it looks and this is how it works very well. It worked very well for me. So that is what I wanted to share with you guys. I don't have anything else. Yeah it's just a short presentation. So just like this scenario. So the question was people used to ask me was is this possible with Xamarin Form or is that possible with Xamarin Form? Yes it is possible but you have to know how to do it. So this was just very specific to charts when it comes to using charts in Xamarin Forms. So here is one example what I did but literally there are like number of controls available with all of those third party component developers and they work very well. So yes Xamarin Forms is the way to go. There's nothing like developers can say that okay no we cannot go with Xamarin Forms because we cannot do this with Xamarin Forms. So yes it is possible. If you want to know more details about specific controls or even with charts on specific requirement you can email me or talk to me later. Yeah that's it short. Thank you. Thank you guys.