Hi,
Today, I would like to share my view on how to create chart in Asp.net 2.0. As we all know traditionally microsoft asp.net didnt had support for Charts from its own factory. But, after Microsoft Took over Dundas chart, Microsoft is providing the Drag and Drop Chart functionality for visual studio 2008 or .Net framework 3.5.
To start with, You will need to download the Following :
Microsoft .Net Framework 3.5 SP1
You will need to install them in the order mentioned. Because the Chart control is a part of .Net Framework 3.5 SP1.
Once the installation is done, you are ready to create stunning Charts in Asp.net without using any third party tool.
Step 1: Create a New Website in Visual Studio 2005.
Step 2: Look for a Chart Control in the Toolbox. Drag and drop it to proceed. (if you are not able to find chart control, right click toolbox Add tab, give it a name Chart. Right click Chart Tab –> Add Items, Browse to Program Files –> Microsoft Chart controls –> Assemblies –> System.Web.DataVisualization.dll. Once you add this dll, you will have chart control in your toolbox)
Step 3: Add SqlDataSource and configure it to Northwind database and the simple query as shown in the image below.
Step 4: Click on the Smart tag of Chart control and select SqlDataSource1 for the Datasource.
Step 5: Now lets do some basic configuration. there are basically 2 important properties you need to know to start creating Charts in Asp.net 2.0
1) ChartAreas: Click the (…) button next to ChartAreas in property window of Chart1. Change the Property values related to Appearance of the chart like its background color, to suit your website color themes.
-> Locate the Axis Property in the ChartArea Collection Editor, click on the (…) button to open the Axis collection editor, Select X Axis from the left pane, and select Title property from the right. Type in ‘Countries’ in Title property
-> Select Y (value) Axis from left pane and select Title from right pane, enter ‘Count’ in Title Property. Click OK to clost the window.
-> Select Axis Property from left pane, find X Axis, LabelStyle Section, Modify the Angle Property to –90 and Interval to 1, This is required to display all the values in X axis.
2) Series: Select the Chart control, from properties, select Series property and click on (…) button to open up the Series Collection Editor.
-> In the left pane Series1 will be selected by default, now select X Value Member property from right pane, and select the appropriate column name coming from database. In our case select ‘country’.
-> Again, Select Y Value Member property in right pane and select ‘Count’ column.
That is it, We are ready to display the chart, before we execute it, let me tell you about the 3D view of the Chart. Select the ChartAreas Property collection, Look for Area3DStyle in the right pane, expand it by clicking on the + sign and set (Enable3D) to True. This will help us to display the chart in 3D angle.
This is how it look likes when you run it.
And ya, to change the chart to any other format you like just follow simple step,
-> Select Series collection from property window, Select different chart type from ChartType property, see the image below to get better idea.
Below are the few types of chart we can create using Microsoft Chart control.
Bubble
Doughnut
Pyramid
I hope i have done justice to this article, my next article will discuss about some common errors you may face as a beginner to Chart control.
Do comment if you have any doubts.
Happy programming
Source : Here
Posts
No comments:
Post a Comment