Post
Ask Question

FastLine and StepLine Chart in ASP.Net

Background

This series of articles will introduce you to the ASP.Net Chart Control. Today we will discuss the FastLine and StepLine charts of ASP.Net. Let us learn about the ASP.Net chart types StepLine and FastLine that provide a powerful UI and design quality. So let us start to learn about these chart type controls step-by-step. All the charts are in the System.Web.UI.DataVisualization.Charting namespace.

Now let us learn about the properties of the StepLine and FastLine charts. A StepLine and FastLine chart type has the following common properties:

  • AlternetText: Sets the alternate text when the image is not available.

  • Annotation: Stores the chart annotations.

  • AntiAliasing: Sets a value that determines whether anti-aliasing is used when text and graphics are drawn.

  • BackGradientStyle: Sets the orientation for the background gradient for the Chart control. Also determines whether a gradient is used, the default is None.
  • Backcolor: Sets the background color for a chart, the default color is White.

  • BackImage: Sets the background image for the chart control.

  • BackHatchStyle: Sets the hatching style for the chart control, the default is None.

  • Height: Sets the height for the chart control.

  • Width: Sets the width for the chart control.

  • Palette: Sets the style with the color for the chart control, the default style is Chocolate.

  • PaletteCustomColors: Sets the custom color for the chart control.

  • Series: Sets the series collection for the chart control.

  • Legends: Sets the series of legends to the chart

Now let us show the preceding explanation with a practical example in a simple web application.

Step 1: Create the table for the chart data
  1. CREATE TABLE [dbo].[QuarterwiseSale](    
  2.     [id] [int] IDENTITY(1,1) NOT NULL,    
  3.     [Quarter] [varchar](50) NULL,    
  4.     [SalesValue] [money] NULL,    
  5.  CONSTRAINT [PK_QuarterwiseSale] PRIMARY KEY CLUSTERED     
  6. (    
  7.     [id] ASC    
  8. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]    
  9. ) ON [PRIMARY]    
  10.    
Now the design will look as in the following:.
 
 
Now insert some records as listed in the following image into the table:
 
 
I hope you have the same type of table and records as above.
 
Step 2: Create Web Application

Now create the project with:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".

  2. "File" - "New Project" - "C#" - "Empty Project" (to avoid adding a master page).

  3. Provide the project a name such as StepLineAndFastline or another as you wish and specify the location.

  4. Then right-click on the Solution Explorer and select "Add New Item" then select Default.aspx page.

  5. Drag and Drop Chart control from ToolBox onto the Default.aspx page.
Now the Default.aspx source code will be as follows:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>    
  2.     
  3. <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"    
  4.     Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>    
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  6. <html xmlns="http://www.w3.org/1999/xhtml">    
  7. <head runat="server">    
  8.     <title>Article by Vithal Wadje</title>    
  9. </head>    
  10. <body bgcolor="blue">    
  11.     <form id="form1" runat="server">    
  12.     <h4 style="color: White;">    
  13.         Article for C#Corner    
  14.     </h4>    
  15.     <asp:Chart ID="Chart1" runat="server" BackColor="64, 0, 64" BackGradientStyle="LeftRight"    
  16.         BorderlineWidth="0" Height="340px" Palette="None" PaletteCustomColors="Maroon"    
  17.         Width="360px">    
  18.         <Series>    
  19.             <asp:Series Name="Series1">    
  20.             </asp:Series>    
  21.         </Series>    
  22.         <ChartAreas>    
  23.             <asp:ChartArea Name="ChartArea1">    
  24.             </asp:ChartArea>    
  25.         </ChartAreas>    
  26.     </asp:Chart>    
  27.     </form>    
  28. </body>    
  29. </html> 
Step 3: Create method to bind the chart control
 
The important and complex thing is to bind the chart control properly, because charts exist in a nested series so it's a problem to identify how to set the values. Now open the default.aspx.cs page and create the following function named Bindchart to bind the Chart Control as in the following: 
  1. private void Bindchart()  
  2. {  
  3.     connection();  
  4.     query = "select *from Orderdet";//not recommended this i have written just for example,write stored procedure for security  
  5.     com = new SqlCommand(query, con);  
  6.     SqlDataAdapter da = new SqlDataAdapter(query, con);  
  7.     DataSet ds = new DataSet();  
  8.     da.Fill(ds);  
  9.      
  10.     DataTable ChartData=ds.Tables[0];  
  11.   
  12.     //storing total rows count to loop on each Record  
  13.     string[] XPointMember = new string[ChartData.Rows.Count];  
  14.     int[] YPointMember = new int[ChartData.Rows.Count];  
  15.   
  16.     for (int count = 0; count < ChartData.Rows.Count;count++ )  
  17.     {  
  18.         //storing Values for X axis  
  19.         XPointMember[count] = ChartData.Rows[count]["Month"].ToString();  
  20.         //storing values for Y Axis  
  21.         YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);  
  22.   
  23.   
  24.     }  
  25.     //binding chart control  
  26.     Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);  
  27.   
  28.     //Setting width of line  
  29.     Chart1.Series[0].BorderWidth =1;  
  30.     //setting Chart type   
  31.     // Chart1.Series[0].ChartType = SeriesChartType.FastLine ;  
  32.     Chart1.Series[0].ChartType = SeriesChartType.StepLine;  
  33.     Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
  34.     Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;  
  35.    
  36.     //Enabled 3D  
  37.    // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
  38.    con.Close();  
  39.   
  40. } 
Now, call the preceding function on page load as in the following:
  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     if (!IsPostBack)  
  4.     {  
  5.         Bindchart();  
  6.  
  7.     }  
  8. }
The entire code of the default.aspx.cs page will look as follows:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data.SqlClient;  
  8. using System.Configuration;  
  9. using System.Data;  
  10. using System.Web.UI.DataVisualization.Charting;  
  11.   
  12. public partial class _Default : System.Web.UI.Page  
  13. {  
  14.     private SqlConnection con;  
  15.     private SqlCommand com;  
  16.     private string constr, query;  
  17.     private void connection()  
  18.     {  
  19.         constr = ConfigurationManager.ConnectionStrings["getconn"].ToString();  
  20.         con = new SqlConnection(constr);  
  21.         con.Open();  
  22.   
  23.     }  
  24.     protected void Page_Load(object sender, EventArgs e)  
  25.     {  
  26.         if (!IsPostBack)  
  27.         {  
  28.             Bindchart();  
  29.   
  30.         }  
  31.     }
  32.     private void Bindchart()  
  33.     {  
  34.         connection();  
  35.         query = "select *from Orderdet";//not recommended this i have written just for example,write stored procedure for security  
  36.         com = new SqlCommand(query, con);  
  37.         SqlDataAdapter da = new SqlDataAdapter(query, con);  
  38.         DataSet ds = new DataSet();  
  39.         da.Fill(ds);  
  40.        
  41.         DataTable ChartData=ds.Tables[0];  
  42.   
  43.         //storing total rows count to loop on each Record  
  44.         string[] XPointMember = new string[ChartData.Rows.Count];  
  45.         int[] YPointMember = new int[ChartData.Rows.Count];  
  46.   
  47.         for (int count = 0; count < ChartData.Rows.Count;count++ )  
  48.         {  
  49.             //storing Values for X axis  
  50.             XPointMember[count] = ChartData.Rows[count]["Month"].ToString();  
  51.             //storing values for Y Axis  
  52.             YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);
  53.         }  
  54.         //binding chart control  
  55.         Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);  
  56.   
  57.         //Setting width of line  
  58.         Chart1.Series[0].BorderWidth =1;  
  59.         //setting Chart type   
  60.         // Chart1.Series[0].ChartType = SeriesChartType.FastLine ;  
  61.         Chart1.Series[0].ChartType = SeriesChartType.StepLine;  
  62.         Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
  63.         Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;  
  64.    
  65.         //Enabled 3D  
  66.         // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
  67.         con.Close();  
  68.   
  69.     }  
  70. } 
Now, we have the entire logic to bind the chart from the database, let us run the application. The chart will look such as follows:
 
 
The preceding is the Normal StepSpline chart. Now let us enable the 3D style as in the following:
  1. Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
Now run the application and the chart will look as follows:
 
 
Now let us switch to a FastLine chart as in the following:
  1. Chart1.Series[0].ChartType = SeriesChartType.FastLine; 
Now run the application and the FastLine type chart will look as follows:
 
 
The preceding is the Normal FastLine chart. Now let us enable the 3D style as in the following:
  1. Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; 
Now run the application and the chart will look as follows:
 
 
Now from all the preceding explanation we saw how to create and use a StepLine and FastLine chart.

Notes
  • Download the Zip file from the attachment for the full source code of the application.

  • Change the connection string in the web.config file to specify your server location.
Summary

My next article explains another chart type of ASP.Net. I hope this article is useful for all readers, if you have any suggestion then please contact me including beginners also.


Similar Articles