Introduction

In this article (Part 2) the MS Chart control will be bound to the SqlDataSource created in Part 1. The chart can be bound to the data at design time without writing any code. Also, the MS Chart’s methods and properties will be used to format the chart as well as rendering a 2D chart in 3D. As this is a continuation of Part 1, it is recommended that readers review Part 1 published previously on this site.

Chart Control Properties

As described in the previous article one of the collections in the chart control is the Series. As you can infer from the data we are trying to bind, there are two series. One of them being “Temperature” and the other is “RecordHigh”.

Click on the chart control you added in Part 1 of the article. The chart properties window gets displayed as you have seen earlier.

Figure 1: Chart Properties

The data source we added SqlDataSource1, becomes the data source of the chart. This will control the data for the chart. The next item we will concentrate on is the Series property in the chart. Using this we will associate the two series we have identified in the data.

Configuring the data series

Scroll down and click on an empty area by the side of Series property where a button displaying ellipsis markings gets displayed. Click on the ellipsis button to display the Series Collection Editor as shown in the next figure. In the Series 1 properties window (inside the editor) the Data node is displayed by scrolling down.

Figure 2: Series CollectionEditor

In the above figure you can choose the type of chart you want for the data display. Chart is just a generic name and there are many different kinds of chart that you can display. Review the different types by clicking right next to Column along ChartType. Click the drop-down handle to reveal the various kinds of chart you can create as shown in the next figure (the default is the Column type).

Figure 3: Available chart types

Under Data in Figure 1 overwrite “Series 1” by typing “Temperature”. Under “Member:”, “Series 1” changes to “Temperature”. Scroll down and click on an empty area along side XValueMember under Data Source as shown in the next figure.

Figure 4: Setting up the first series “Temperature”

In the drop-down list, click the menu item “Month”. In a similar manner, click an empty area along YValueMembers under Data Source. Choose “Temperature” from the list as shown.

Figure 5: Setting up the Y-Axis for first series

At this point if you were to Build the project and browse the page you would see the first series, Temperature vs. Month as shown here.

Figure 6: Display of the first series on the web page

In a similar manner you can add the second series “RecordHigh” by going through the following steps:

• Click Add button shown in Figure 2
• Change Series 2 (or the default series name) to “RecordHigh”
• Choose “Month” for XValueMember and “RecordHigh” for YValueMembers

These additions that configure the second series are as shown in the next figure.

Figure 7: Configuring the second series

In Part 1, we also added a BorderSkin property “Raised”. This is chosen in the Chart 1 property window as shown from among a number of different styles. With this window you can create a very impressive chart by choosing the many properties available.

Figure 8: Setting up the BorderSkin

Now you build the project and browse the Default.aspx to display the web form on your browser as shown.

Figure 9: Display of web page with both series

Changing 2D chart to 3D in design

In order to display a 3D chart by setting property values at design time you need to work with the ChartArea property of the chart control. The ChartArea properties window can be displayed by clicking ChartArea collection in Chart1 properties. In the ChartArea properties window you need to set the Enable3D property to True as shown in the next figure.

Figure 10: Configuring the ChartArea properties

When you make the above choice, the design time display changes to the one shown in the next figure.

Figure 11: Design time view of a 3D Chart

The default property IsRightAngleAxes is set to true by default which happens to be appropriate for an IsometricView. But this is not the true 3D view. In order to show true 3D you need to set the Inclination and Rotation properties. Microsoft documentation (quoted from DataVisChartControl.chm) makes the following points about isometric views.

• It is not "real" 3D. That is, the angle of rotation around axes doesn't use true rotational angles.
• It is ideal for displaying 3D charts with some depth.
• If your application allows end-users to rotate the charts, the rotation will not be smooth. In this case, using isometric views is not recommended.
• With isometric projection, perspective is not supported.

With just this setting the chart would display as shown.

Figure 12: Chart rendered with IsRightAngleAxes is set true

However to provide perspective you need to set the Perspective value to an integer that represent a value between 0 to 100%. The Rotation property determines the rotation about the Y-axis and the Inclination property determines the rotation about the horizontal axis. You may have to determine these by trying different combinations of these properties to get the chart to display in the best possible manner.

Changing 2D to 3D using code

As mentioned in Part 1, the Object Browser is a good guide to review the code for working with MS Chart control.

Add a button control from the Toolbox to Default.aspx page. Herein the text property of the button is “Change to 3D Display”. To the click event of the display type in the code shown in the next listing.

Listing 1: Code behind Default.aspx page

The best way to deal with code is to make use of IntelliSense. Since the Series properties and associating chart with data to display are already chosen, only the formatting will be coded for run time. There are two items that are formatted, the Chart and the ChartArea. For 3D rendering the Enabled3D must be configured. For an aesthetic looking chart the Rotation, Inclination and Perspective properties should be properly chosen.

The button click on the displayed page with a 2D chart changes to the one shown in the next figure.

Figure 13: Web page after the button is clicked

Binding chart to data

We saw earlier how to bind data to the chart using the GUI in the IDE. You can also bind data to the chart using code. Create a web page (herein Sharp.aspx) and add a chart control. Create the series with two elements as shown in this following listing.

Listing 2: Source page for Sharp.aspx page

The code behind for this page is shown below. The DataSourceID sets up the chart to use the data selected by the SqlDataSource1. The Bind() method binds the data to the chart. The two series have to be created as shown in code above to be associated with code shown. You may also place the code in the Page_Load() event.

Listing 3: Sharp.aspx.cs

Summary

Part 2 of the article described data binding to chart both at design time as well as at run time. Converting a 2D chart to 3D chart was also described. The chart can be bound to data from a variety of sources although the present article showed how you may bind to data on your backend SQL Server 2008.

About Jayaram Krishnaswamy

Sorry, no bio is available This author has published 7 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Changing the Series color with if, else statement in microsoft chart control	Manuel Pagan	9/13/2009 9:21 AM
Hey, I am fairly new with visual studio and chart controls. I was wondering if it where possible to change the series display color using a if,else statement with c#. Reply | Permanent link
XValueMember property is blank :(	Tanya r	4/7/2010 2:53 PM
i followed the steps and tried a variety of different queries, but my XValueMember property is blank. there is nothing in the drop downs :( i tried to manually type in the db field name, but my chart just comes back blank :( please help Reply | Permanent link

---

Please login to rate or to leave a comment.