In this asp .net tutorial we will learn how to use Chart control in asp .net. Chart controls are introduced in .Net Framework 3.5 and can be used with asp .net pages and windows form applications. Asp .net 4.5 contains 35 different types of chart controls. Some of the main features of chart controls are:
1. 35 distinct chart types.
2. Data binding support.
3. Data exporting.
4. More than 50 financial and statistical formulas for data analysis and transformation.
5. 3D support for most chart types
6. Zooming and scrolling. (Windows Forms-specific)
7. Chart printing.( Windows Forms-specific)
8. Support for AJAX click events. (ASP.NET-specific)
9. State management. (ASP.NET-specific)
Let’s get started with sample application:
For this example we will create a column chart and our final output will be like this:
Step1: Create a new asp .net website.
Step2: Add a new page to your website. Drag and drop Chart control into your website page and build the website.
Here is the default code generated by chart control:
In the above code there are 2 types of tags:
1) <Series>: Series is a collection of data points. We can also specify chart type in series tag. Some chart controls can have multiple numbers of series. Series element is present in Series class
2) <ChartAreas>: A chart area is a rectangular area which is used to draw the chart.
Chart control will automatically do following changes to your website code:
1) It will automatically add page directive in your webpage.
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
2) It will automatically modify web.config file.
Step3: Add some data to our chart control:
Add following code between your series tag:
Now if you run your application you will see chart control with the following output:
Step4: Add title to X and Y axis:
Add this code between <asp:ChartArea Name="ChartArea1"> tags:
Run you application you will see titles in Y and X axis:
Step5: Add title to top of Chart control:
Add these lines between <asp:Chart> tags:
Output:
Now our chart control is ready. Lets add some cool 3d effect.
Step6: Add 3d effect to chart control.
Do following changes in your chart control
Final Output:
By above example you can see how easily we can create awesome looking chart controls without using any 3rd party controls. In the next part we will learn how to bind asp .net chart control with database.