Asp .net charts tutorial part1

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: 

 

asp .net chart tutorial-codingfusion


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:   
 
Asp .net chart tutorial with example and sample code-codingfusion.com
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:


 
asp .net chart tutorial with example and sample codingfusion.com
 
Step5: Add title to top of Chart control:

Add these lines between <asp:Chart> tags:
 
 
                    
                
 
Output:
 
asp .net chart complete tutorial with example and sample in asp .net
 
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:
chart control tutorial,example in asp .net-codingfusion.com
 
 
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.
We are nothing without our users ! You can help us offer even more high quality content. Please share our page !
Best quality Asp .Net Ajax Control Toolkit tutorials.

Give your valuable comments.

Name
Email
Comment
2 + 5 =
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2017 CodingFusion