Getting Started With Microsoft Chart Control for .NET Framework 3.5

Introduction

Some time ago, Microsoft released a full-featured Chart Control for the .NET Framework 3.5. The Chart Control provides a wide range of capabilities for both ASP.NET and WinForm applications. In this article, I will focus primarily on ASP.NET capabilities; however, many of these techniques will work in WinForm applications as well. To get started, we need to download the Chart Control installers from Microsoft.  Here are the 3 packages to download and install:

• Microsoft Chart Control for .Net 3.5 SP1
• Microsoft Chart Control Add-on for Microsoft Visual Studio 2008
• Optional Documentation: Microsoft Chart Control Documentation
• In addition, Microsoft has created a Samples Environment which I highly recommend downloading as it provides a great way to see all of the features of the controls. 

After downloading and installing the chart control we can start developing using the new control. First we will stat with a blank ASP.NET Application. Open up the default.aspx page in design mode. In the Toolbox, you should find a new Chart control under the Data tab as shown in the figure below:

Figure 1 - Chart Control in Toolbox

Double click on the Chart control to add it to the page or Drag and Drop it. After adding the control to the page, you should see an empty chart as shown below:

Figure2 - New Chart

As you can see on the right, the chart is ready to be bound to a data source; however, before we jump into data binding we need to cover some of the basic chart features. The area where the chart is displayed is called the chart area. As you would expect, the chart area can be styled with background, colors, etc. The important thing to note is that a single chart can have more than one chart area. Chart areas are essentially independent charts within the chart control. Within the chart control, chart areas display mode (2D/3D), placement and z-order can be controlled. Within each chart area is one or more data series or just simply series. Each series has a chart type (bar, pie, etc), styling, and a series of data points. Each data point has an X value and one or more Y values.

Data Binding

Next we can jump in and bind the chart to a database. For this example, I've created a simple SQL table called SalesData with 3 columns in it ID, Date and TotalSales. I will also create an Entity Data Model and add in the single table within the database. Next we will use bind the chart control using the entity data binding. Then we use smart tag on the chart control and choose a new data source. Select Entity from the possible data source types and click Ok. Choose the named connection created for the Entity Data Model just created and click Next. Next choose SalesData from the EntitySetName drop down. Then select only the fields needed for data binding, in this case we only need the Date and TotalSales fields. Click Finish to complete the data source wizard. At this point, if yo were to run the project you would receive a blank page. The reason the chart does not display is that while we have data bound it, we have not given the series field to bind to. To do this we need to first view the properties for the chart control. Specifically, we need to modify the Series property. Click on the elipse to access the Series Collection Editor. You should notice that a single series called "Series1" is created by default with a new chart control. In the right pane, scroll down to the data binding properties XValueMember and YValueMember. For our data we will use the Date and the XValueMember and TotalSales for the YValueMember as shown below:

Figure 3 - Series Collection Editor

If you run the project at this point you should receive data; however, it is not a very attractive chart. Lets take advantage of 3D with this chart. We can enable 3D for this chart by accessing the ChartAreas property on the chart control. Again a ChartArea1 is created by default. Locate the property called (Enable3D) in the right pane, change the value from false to true and press Ok. The preview should change to reflect the change to 3D. Next, we can change the chart type on the series from Column to Spline. If you go ahead and run the project you should have a slightly more interesting chart as show in the figure below:

Figure 4 - 3D Databound Chart

Titles, Axis Titles, Legend

Next we should add a Title to the chart. This is done by creating a title using the Titles property on the chart control. Similar to the series and chart area, a Title Colllection Editor is used to facility the process. Add a title by clicking on the Add button. Then locate the (Title) property in the right pane. Give your chart a title, change the styling if you so choose and click Ok. As you may have already guessed, you may add as many titles as needed for your chart. To create a Legend for the chart we use the property Legend on the chart by clicking on the elipse. Using the Legend Collection Editor we can add one or more Legends. Simply clicking the add button will create and place a legend on the right side of the chart. You can adjust the styling and position of the legend using this screen.

The Axis Titles are similar to the chart Titles; however, Axis Titles are specific to a Chart Area rather than the chart control. Under the Chart Area editor, select ChartArea1 and edit the Axis property to specify primary and secondary titles for the X and Y axis.

Adding data without Data Binding

Unlike many 3rd party chart controls, the Microsoft Chart Control is actually very easy to populate in code behind. The following code snippet shows just how easy it is to add data points to the Series1 used above. However, you will need to remove data binding from the chart to prevent conflicts.

                  Chart1.Series["Series1"].Points.AddXY(1, 15000);
                  

                  Chart1.Series["Series1"].Points.AddXY(2, 16000);
                  

                  Chart1.Series["Series1"].Points.AddXY(3, 13000);
                  

                  Chart1.Series["Series1"].Points.AddXY(4, 18000);

The above snippet uses the AddXY method on the series object to add 4 data points to the series. There are several different versions of the AddXY method which allows for passing in objects for X (numbers, dates, string) and for handling multiple Y values.

Conclusion

Above, we went through the basics of adding the control to your project, performing the basic configuration and populating it with data. As you can see, the chart control covers many of the basics necessary for charting. However, this article has just scratched the surface of all of the functionlity included within the chart control. Some of the advanced features which we did not touch on is the ASP.NET AJAX integration, real-time data, drill downs, etc. Please look for a future article from me regarding these advanced features of the Microsoft Chart Control for the .NET Framework 3.5.