How to Code a Multi Series Chart in Windows Forms

In this video we're going to take a look at adding multiple series to a single chart. Essentially, you'll have a chart view, and there'll be overlap series on that chart. You can look at multiple data points in a single chart. This is a very common business scenario. This is a continuation of the video that we just completed, which shows you how to create a chart using the designer.

What we have here is our energy production data, which we're going to reuse. We're going to create an instance of the energy production data sample, and then we're going to use data points within the energy production type. Basically, the country and then the different types of energy that are produced by country.

First, let's go ahead and add a data chart. I'm going to go ahead and dock it full. Now in this sample, the whole thing is going to be done in code behind. We are not going to use the designer for anything, which I think will help everyone learn and understand the API of the chart.

The first thing we're going to do is clear the chart of any axes and series, which is going to be important. Let's say this dot ultradatachart1 dot  series dot clear, and the same with the axes, ultradatachart1 dot axes dot clear. The other thing we're going to do is Using Infragistics dot win dot data visualization is going to be important, because we're going to be referencing these types of the chart in our code behind.

We also want to set up some interaction properties, which will be important as the users actually use the chart. Let's go ahead and set the horizontal and vertical zoomable properties to true. This allows you to do panning and zooming with the mouse or the keyboard. We'll set that to true, and then ultra data chart one dot vertical Zoomable equals true as well, and we'll save that.

The next thing we want to do is create an instance of our data so we have data. We also want to create our numerical Y axes and our category X axes. Remember the numeric Y will be on the left-hand side of the chart, and that's going to be the numeric data that we want to display. On the horizontal category, X axes, we're going to want to show the country.

The first thing we'll do is create an instance of our data, which we'll be reusing throughout. We're going to create a new energy production data sample. Then let's go ahead and create our Y axes. The Y axes is going to be a new numeric Y axes, which we can find here. Of course, remember all of this can be done through the designer as well, but doing it through code behind does teach us a little bit about the chart's object model, and should help you build out samples much easier in the future with the chart.

So there we have our Y and our X axes, which we'll end up reusing. The first thing I want to do is set the data source of the X axes to our data. Then on the label for this I want to set it to the country field, so we'll be able to display each of the countries on the horizontal label for the chart. Let's go ahead and set the label property equal to country like so. Actually, I did not say data source here. So lets do that now..

Now let's go ahead and add the X axes and the Y axes to the chart. Remember these are collections on the chart, so we can just add to the collection. We'll say this dot ultra data chart one dot axes dot add  and we will add our X axes like so. We'll do the same with the Y axes, so this dot ultra data chart one dot axes dot add This will be Y. It comes right up in the auto complete, so we're good there.

The next thing we want to do is add the series. Now keep in mind, the series are what is going to display, the area chart on the actual chart itself. In this case, we're going to do three series. The first one is going to be coal data, which in the video we did previously with the designer, we actually did the same thing. We did coal data, but we did it using the designer versus doing it in code.

Let's just go ahead and set up some basic properties here. Let's set up the data source equal the data so we have a new series. Now in order to tell which data to show up in the series, we have to use the value member path. Let's set the series dot value member path equal to coal in this case. If we go look at our data, you can see coal is one of the fields that we have here for the types of energy by country and by region for this particular example.

Let's give this a title so we know which one it is, and we're going to say coal. Now we're going to set the X axes and the y axes, of course. Let's go ahead and say series dot X axes here. It's going to be the X axes that we already set up. We just reuse it, and series dot Y axes is the same thing. We just reuse that.

If I ran it now nothing would show up. We need to add this to the chart. We say series dot add, and we have series like so. That's it. Let's go ahead and run this. You can see here we've got our form. I set the interaction, so I can zoom in and out with my mouse. Horizontal and vertical zoomable is true. My numeric Y axes is showing the numeric data on the left, and then my countries are on the bottom.

So let's go ahead and add a few more pieces of data. Same thing. Let's just go ahead and add oil data. Now I'm going to do this in the most manual way possible just so you get a feeling of how to interact with the chart. We're just going to add a new area series like so, and you get the idea. I call this guy series two. Essentially, if I go up here, and I copy everything and I paste it, this is as basic as it gets.

I'm saying create a new series for its title. Let's use “oil”.  What am I adding to the chart? Well I'm not adding series. I'm adding series two. Then if we do the same thing for “hydro” data, in this case I will just copy the whole thing, paste it in. Now let's change this over to series three. Series three, we're going to have to change the title, the value member path. We're going to add series three to the chart, and this guy will be “hydro”. That's it.

Let's go ahead and run it. You can see now I have multiple series on the chart all lined up with my numeric data. If I zoom in, I can glean more information. I can zoom out with my mouse or with my keyboard. It really doesn't matter.

There you have it. That's as easy as it is to create a multi-series chart all in code behind with the Infragistics Windows Forms Charting Control.