How to Build an Area chart in Windows Forms

In this video we're going to do a quick tutorial on building an area chart with the new Infragistics Windows Forms Chart Control. Let's go ahead and start a new project. You'll notice that I'm using Visual Studio Community Edition 2013. You can use this with the free edition and everything works as it would in the ultimate edition. Let's go ahead and call this Chart Sample Windows Forms.

I'm going to do a couple of things here. First thing I'm going to do is make my screen a little bit bigger, set some properties on my screen. My form 1, I want to make sure that the startup position of the window is going to be in the center. I also have a class to add. This class is going to include data that we're going to bind to our chart. Let's go ahead and grab this class I have here in Notepad++. You can see that it's just called Energy Production Sample. I have a type of energy production in those fields--region, country and then the type of energy production--coal, oil, gas, nuclear, hydro, etc. This is what we're going to bind to the actual chart. Let me copy this, and we'll create Class Energy Production Data.

Now that I have this pasted in, everything looks good. I'm going to go ahead and save. We'll go back to our form. What I want to do is add a chart to the form. We'll go ahead and grab an UltraChart. What the UltraChart did is it added the Win.data visualization assembly, the ultra-data chart assembly, and the Win.portable.core assembly. Those are now available to me in this project. The next step  ... Let's dock this. We do a full screen to fill the chart into the form.

Now for the chart itself I could to the properties. You can see we have all the properties listed out in the property window. Or I could just right click and go to custom property pages, which is a little bit easier because we have the properties categorized, and it's a little bit easier to find stuff. The first thing I'm going to do is set a title for my chart. I'm going to call this Energy Production Data. We will do our subtitle and we'll say “by type of energy” like so. We can leave the font the same But you can see you have a lot of customization here based on how you actually want the chart to look visually.

But in order to get this chart rendered there's two things we have to set up, two collections. The first one is the axis collection. On a chart you have an x axis, a y axis, and then you have a series. The series ends up being the chart type. Let's scroll up here. You notice we have axis here, and it's a collection. I'm going to bring up its collection editor. Since I already know going into this we're going to do an area chart, we could do another chart type that has DateTime. For financial data we could do a polar series which would have x axis data, radius axis data.

What we're going to do is something fairly basic. I'm going to have a category x, and I'm going to have a numeric y. The numeric y data will show up on the left-hand side of the chart, and the x will show up on the bottom, and that's going to be the text data. The country information is going to come across the bottom, and the production numbers will come up on the left-hand side. You can also see that there's a set of properties here for the axis. Again, if we had a SQL data source or some other data source, we can easily bind it to the control.

Now we will set up our series. Let's scroll down to the series collection editor. This is very simple. I'm going to go ahead and tell it I want this area series, but you'll notice we have every other type of series that you would like here--column series, bar, line, etc., every financial series, every type of financial indicator. You name it, this chart has it. It's a very rich and robust chart. It's been in the market for years across all of our platforms be it WPF, Silverlight, JQuery, IOS , Android, and now Windows Forms. It has a lot of features, has all the basic business chart types, and then all of the more advanced chart types too as well as scientific charting.

Now that I've added my area series what I want to do is tell the x axis and the y axis on the area series what to display. I want it to display the category x I had set up in my axis collection and my numeric y. It's as simple as that. I've basically set up the properties on the chart to display my area chart series with an x axis and a y axis. Now we've got to go put some data into it. If I was using a SQL data source, I could simply go ahead and use the editor and set the properties right in my designer. But since I'm using my class, which we can look at here, our energy production data, I add my name space Infragistics models, and then I have my energy production data sample data that we're going to consume.

Let's go ahead and make sure we're using Infragistics dot models. In our constructor here we'll just go ahead and create our data source. This is going to be the new energy production data sample. Now that we've created an instance of the data that we want to bind, we want to go ahead and tell the x axis what to use and we want to tell the series what to use. In order to do that we're going to create an x axis object. It's going to be associated with the ultra data chart, which is what was on our form. Remember we had the axis collection. The axis type that we want is going to be the category x axis.

Let's go ahead and tell it to use category x axis, like so. Since, remember, this was a collection, we can just say use first or default. We have the axis that we actually want to bind data to. Now we want to tell it what label to use. This is going to use data from our collection. The label will be country. You'll notice I'm not getting all of my telasense. There's a reason for that, and we'll fix that in one second. I will say x axis.data source = data. Now we need the Infragistics.Win.data visualization name space introduced here. What that gives us is all of the types that we need to reference if we are creating objects based off of the chart.

Now we have our x axis bound to the country property and our data source of energy production data sample. Now we need to do the same thing for our series. In the same manner we're going to create a series object, and it is a part of this ultra-data chart dot series and  It is “of type” of the type of series that we actually told it to use which was going to be the area series. Same thing, it's a collection. Let's go ahead and tell it which one to use. Now, In this case we have a property called the value member path. For the series what we want to do is we want to bind its value member path to the data that we want to display from the data source. In this case it's going to be “coal”. This will be coal production. We're just going to tell the series that its data source equals data. That's it. That's all we really need to do.

We've set up an instance of the data that we want to bind. We have our x axis data, which we're going to display. Remember that'll end up being on the bottom of the chart. Our y axis is going to be bound to the area series chart type, and that will display our data. If we go ahead and run this  and you'll see that we've got a beautiful area chart. We've got our title, our subtitle ... our coal production on the left-hand side, by country on the right. There you go. It's that easy to get a chart up and running in Visual Studio with the Infragistics Windows Forms Data Chart Control.