ASP.NET

Renko Type Chart In ASP.Net

Background

To represent data on a chart in an application, it is very important to summarize the huge amount of data. Sometimes I wonder when many developers and project managers decided to use third-party chart control for their project but it's not required. The Microsoft .Net Framework is quite a capable and powerful tool to design and create any type of chart control with high quality design. In my career life I have created many custom controls to avoid third-party controls. Because of this I have saved a huge amount of cost that required buying third-party controls for projects. Similarly we can avoid a huge cost by using ASP.Net controls properly instead of third-party controls. So by considering the preceding requirements and to introduce the ASP.Net Chart Control I decided to write this article.

Let us learn about the one ASP.Net chart type Renko and Area chart that provides the powerful UI and design quality. So let us start to learn about these chart type controls step-by-step.

Renko Type Chart

Renko chart is the type of ASP.Net Chart Control that displays a user-interactive graphical information of the data. All the charts are in the System.Web.UI.DataVisualization.Charting namespace.

Chart data is represented on the following points:
  1. X  Axis: the horizontal line of the chart termed as X axis 
  2. Y Axis: the vertical line of the chart termed as Y axis
The Renko 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, it has following styles, the default is None.


  • Backcolor: Sets the background color for the 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. It has the following styles that is used along with the chart as in the following:


  • Height: Sets the height for chart control
  • Width: Sets the width for the chart control.
  • Palette: Sets the style with a color for the chart control, the default style is Chocolate. The following are the styles available to use:


  • PaletteCustomColors: Sets the custom color for the chart control, it has the following Color Editor, you can make any custom style for your chart.


  • Series: Sets the series collection for the Chary Control
  • Legends: Sets the series of legends to the chart

Now let us see an examle of the preceding explanation by creating a simple web application as in the following.

Step 1: Create a table for the chart data
Now before creating the application, let us create a table named orderd in a database from where we show the records in a chart, the table has the following fields (shown in the following image):
 
 
Now insert the some records as listed in the following image into the table:
 
 
I hope you have 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 name such as RenkoChart or another as you wish and specify the location.

  4. Then right-click on 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.     <br />  
  16.     <asp:Chart ID="Chart1" runat="server" TextAntiAliasingQuality="Normal">  
  17.         <Series>  
  18.             <asp:Series Name="Series1">  
  19.             </asp:Series>  
  20.         </Series>  
  21.         <ChartAreas>  
  22.             <asp:ChartArea Name="ChartArea1">  
  23.             </asp:ChartArea>  
  24.         </ChartAreas>  
  25.     </asp:Chart>  
  26.     </form>  
  27. </body>  
  28. </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.         con.Close();  
  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.         //setting Chart type   
  28.         Chart1.Series[0].ChartType = SeriesChartType.Renko;  
  29.        
  30.           
  31.        
  32.   
  33.     } 
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.   
  33.   
  34.     private void Bindchart()  
  35.     {  
  36.         connection();  
  37.         query = "select *from orderdet";//not recommended this i have written just for example,write stored procedure for security  
  38.         com = new SqlCommand(query, con);  
  39.         SqlDataAdapter da = new SqlDataAdapter(query, con);  
  40.         DataSet ds = new DataSet();  
  41.         da.Fill(ds);  
  42.         con.Close();  
  43.         DataTable ChartData=ds.Tables[0];  
  44.   
  45.         //storing total rows count to loop on each Record  
  46.         string[] XPointMember = new string[ChartData.Rows.Count];  
  47.         int[] YPointMember = new int[ChartData.Rows.Count];  
  48.   
  49.         for (int count = 0; count < ChartData.Rows.Count;count++ )  
  50.         {  
  51.             //storing Values for X axis  
  52.             XPointMember[count] = ChartData.Rows[count]["Month"].ToString();  
  53.             //storing values for Y Axis  
  54.             YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);  
  55.   
  56.   
  57.         }  
  58.       //binding chart control  
  59.         Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);  
  60.         //setting Chart type   
  61.         Chart1.Series[0].ChartType = SeriesChartType.Renko;     
  62.   
  63.     }  
  64. }  
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: 
 
 
 
In the preceding  chart we saw how the data is properly arranged with user interactive graphics, now let us change the Palette style, the chart will look such as follows:
 
 
 
Now let us change the Chart Palette to fire. Then the chart style will be changed as follows:
 
 
 
Now let us set the BackHatchStyle, the chart will be visualized as follows:
 
 
 
Now change BackHatchStyle to a Cross then the chart will be displayed as follows:
 
 
 
We can also make the chart control in 3D style by setting the property Area3DStyle.Enable3D = true as follows:
 
 
 
The preceding chart is in 3D Style, you can also change the pallet style in 3D as in the following:
 
 
Now you have seen how the ASP.Net Chart Control is very capable as compares to third-party controls.

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

In my next article I will discuss another chart type of ASP.Net that provides a better user interaction than any other third-party control. I hope this article is useful for all readers, if you have any suggestion then please contact me including beginners also.
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs