Line Charts with generic handler and dynamic text boxes.

Now a days dashboards are common for every data driven web apps, which gives a brief description, like simply and sweet. In those graphs play major role, which shows the report  in a user friendly format., User can understand and analyses the data very easily.


In my previous post i explained about generating bar and pie charts.

So, here i would like to give you a brief idea about generating line graphs using generic Handler.

Here I am generating two lines in a single graph which shows the comparison of score for each over., that is like cricket score analysis.

Just copy the below code to your LineChart1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LineChart1.aspx.cs" 
Inherits="NumberOFfeildsAtATime" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Number Of Feilds Inerting at a time</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:Label ID="lblRequest" runat="server"
            Text="Enter Number of feilds you want to enter:"></asp:Label>
        <asp:TextBox ID="txtNumber"
            runat="server" ValidationGroup="g1" Width="35px"></asp:TextBox>
&nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="txtNumber" Display="Dynamic"
            ErrorMessage="Please enter Number of rows you want" 
ValidationGroup="g1"></asp:RequiredFieldValidator>
&nbsp;<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
            ControlToValidate="txtNumber" Display="Dynamic"
            ErrorMessage="Please enter Only numbers" ValidationExpression="^\d+$"
            ValidationGroup="g1"></asp:RegularExpressionValidator>
        <asp:Button ID="btnCreate" runat="server" onclick="btnCreate_Click"
            Text="Create" ValidationGroup="g1" />
        <asp:Button ID="btnClear" runat="server" onclick="btnClear_Click" Text="Clear"
            Visible="False" />
        <asp:Image ID="imgLine" runat="server" />
        <br />
        <br />
   
    </div>
    </form>
</body>
</html>

Now it’s the time to create text boxes dynamically to enter the scores for each team.

In LineChart1.aspx.cs :
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

public partial class NumberOFfeildsAtATime : System.Web.UI.Page
{
    static Button btnSubmit = new Button();
    static Button btnReset = new Button();

    static Label lblSno = new Label();
    static Label lblScore = new Label();
    static Label lblScoreVs = new Label();

    static TextBox[] txtScore;
    static TextBox[] txtScorevs;

    RequiredFieldValidator[] RfvScore;
    static Table tblDynamic = new Table(); 
   
   

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            tblDynamic.Rows.Clear();
       
        form1.Controls.Add(tblDynamic);
        btnSubmit.Click += new EventHandler(this.btnSubmit_Click);
        btnReset.Click += new EventHandler(this.btnReset_Click);     
    }
    public void GenerateFeilds(int n)
    {       
        tblDynamic.Rows.Clear();
        //int n = int.Parse(txtLine.Text);
        txtScore = new TextBox[n];
        txtScorevs = new TextBox[n];
       
        RfvScore = new RequiredFieldValidator[n];

        TableRow[] tr = new TableRow[n + 3];
        TableCell[,] td = new TableCell[n + 3, 3];

        for (int r = 0; r < n + 3; r++)
            for (int i = 0; i < 3; i++)
                td[r, i] = new TableCell();


        tr[0] = new TableRow();

        lblSno.Text = "Overs";
        lblScore.Text = "Inds Score";
        lblScoreVs.Text = "Austs Score";

        td[0, 0].Controls.Add(lblSno);
        td[0, 1].Controls.Add(lblScore);
        td[0,2].Controls.Add(lblScoreVs);

        for (int i = 0; i < 2; i++)
            tr[0].Cells.Add(td[0, i]);

        tblDynamic.Rows.Add(tr[0]);

        for (int r = 1; r < n + 1; r++)
        {
            txtScore[r - 1] = new TextBox();
            txtScorevs[r - 1] = new TextBox();
           
            RfvScore[r - 1] = new RequiredFieldValidator();

            txtScore[r - 1].ID = "txtScore" + r;
            txtScorevs[r - 1].ID = "txtScoreVs" + r;
            RfvScore[r - 1].ID = "RfvScores" + r;
            txtScore[r - 1].ValidationGroup = "g1";

            RfvScore[r - 1] = new RequiredFieldValidator();
            RfvScore[r - 1].ControlToValidate = txtScore[r - 1].ID;
            RfvScore[r - 1].ValidationGroup = "g1";
            RfvScore[r - 1].Text = "*";

            td[r, 0].Text = r.ToString();
            td[r, 1].Controls.Add(txtScore[r - 1]);
            td[r, 2].Controls.Add(txtScorevs[r - 1]);
            td[r, 1].Controls.Add(RfvScore[r - 1]);

            tr[r] = new TableRow();

            for (int i = 0; i < 3; i++)
                tr[r].Cells.Add(td[r, i]);

            tblDynamic.Rows.Add(tr[r]);
        }

        btnSubmit.Text = "draw Line Chart";
        btnReset.Text = "Reset";
        btnSubmit.ValidationGroup = "g1";


        tr[n + 1] = new TableRow();
        tr[n + 2] = new TableRow();
        td[n + 1, 0].Controls.Add(btnSubmit);
        td[n + 1, 1].Controls.Add(btnReset);
       
        tr[n + 1].Cells.Add(td[n + 1, 0]);
        tr[n + 1].Cells.Add(td[n + 1, 1]);
       
        tblDynamic.Rows.Add(tr[n + 1]);
        form1.Controls.Add(tblDynamic);

       
    }
    protected void btnCreate_Click(object sender, EventArgs e)
    {
        if (Convert.ToInt16(txtNumber.Text) <= 0)
        {             
            Response.Write("<script>alert('Please enter Greterthan Zero values 
only')</script>");
        }
        else
        {
            btnCreate.Visible = false;
            txtNumber.Visible = false;
            btnClear.Visible = true;
            lblRequest.Visible = false;
            GenerateFeilds(Convert.ToInt16(txtNumber.Text));
        }
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        string num = "0";
        string paknum = "0";
        for (int i = 0; i < txtScore.Length; i++)
        {
            if (i == 0)
            {
                num = txtScore[i].Text;
                if (txtScorevs[i].Text != "")
                    paknum = txtScorevs[i].Text;
                else
                    paknum = "0";
            }
            else
            {
                if (txtScorevs[i].Text == "")
                    paknum += "," + "0";
                else             
                    paknum += "," + txtScorevs[i].Text;
                num += "," + txtScore[i].Text;
            }
        }
        imgLine.ImageUrl = "~/Line.ashx?val1=" + num + "&val2=" + paknum;
    }
    protected void btnReset_Click(object sender, EventArgs e)
    {
        int n = tblDynamic.Rows.Count;
        for (int r = 0; r < n - 2; r++)
        {
            txtScore[r].Text = "";
        }
    }
    protected void btnClear_Click(object sender, EventArgs e)
    {
        tblDynamic.Rows.Clear();       
        form1.Controls.Add(tblDynamic);
        txtNumber.Visible = true;
        btnClear.Visible = false;
        btnCreate.Visible = true;
        lblRequest.Visible = true;
    }
   
   
}
To plot an image here i used a generic handler

In Line.ashx:
<%@ WebHandler Language="C#" Class="Line" %>

using System;
using System.Web;
using System.Drawing.Imaging;
using System.Drawing;

public class Line : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string val1 = context.Request.QueryString["val1"];
        string val2 = context.Request.QueryString["val2"];
        string[] num = val1.Split(',');
        string[] paknum = val2.Split(',');
        bmp = new Bitmap(510, 510);
        graphic = Graphics.FromImage(bmp);
        Pen bluekPen = new Pen(Color.Blue, 2);
        Pen redPen=new Pen(Color.Red,2);
        SolidBrush whitebrush = new SolidBrush(Color.White);
        graphic.FillRectangle(whitebrush, 0, 0, 510, 510);
        displayImage(num, bluekPen);       
        displayImage(paknum, redPen);
        context.Response.ContentType = "image/gif";
        bmp.Save(context.Response.OutputStream, ImageFormat.Gif);

    }
   
    Bitmap bmp;
    Graphics graphic;
    public void displayImage(string[] num, Pen linePen)
    {

       
       

       
        SolidBrush BlackBrush = new SolidBrush(Color.Black);
        Pen blackPen = new Pen(Color.Black, 2);

       

        graphic.DrawLine(blackPen, new Point(20, 480), new Point(480, 480));
        graphic.DrawLine(blackPen, new Point(20, 20), new Point(20, 480));
       
       

        float Heighestval = float.Parse(num[0]);
        for (int i = 1; i < num.Length; i++)
        {
            if (Heighestval < float.Parse(num[i]))
                Heighestval = float.Parse(num[i]);
        }
        if (Heighestval == 0)
            Heighestval = 1;
        Random rnd = new Random();

        int thickness = Convert.ToInt32((440 / num.Length) - ((30.0 / 100) * (440 / 
num.Length)));
        int gap = Convert.ToInt32((30.0 / 100) * (440 / num.Length));
       
        float[] val = new float[num.Length];
        for (int i = 0; i < val.Length; i++)
        {
            val[i] = (float.Parse(num[i]) / Heighestval) * 450;
           
            if(i>0)
                graphic.DrawLine(linePen, new Point(((((i-1) * (gap + thickness)) + 40) + 
Convert.ToInt32((thickness / 2))), Convert.ToInt32(480 - val[i - 1])), new Point((((i * 
(gap + thickness)) + 40) + Convert.ToInt32((thickness / 2))), Convert.ToInt32(480 - 
val[i])));
            graphic.DrawString("Overs", new Font("Arial", 10), BlackBrush, new PointF(475, 
495));
            graphic.DrawString(num[i], new Font("Arial", 8), BlackBrush, new Point(0, 
Convert.ToInt32(480 - val[i])));
            graphic.DrawString("--", new Font("Arial", 8), BlackBrush, new Point(15, 
Convert.ToInt32(470 - val[i])));
            graphic.DrawString((i + 1).ToString(), new Font("Arial", 8), BlackBrush, new 
Point((((i * (gap + thickness)) + 40) + Convert.ToInt32((thickness / 2))), 
Convert.ToInt32(485)));
            graphic.DrawString(num[i], new Font("Arial", 8), BlackBrush, new Point((((i * 
(gap + thickness)) + 40) + Convert.ToInt32((thickness / 2))), Convert.ToInt32(475 - 
val[i])));
        }

    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

 After you debugged it., it will ask you number of overs..., after that you need to enter the score details, and generate line graph.

the graph will be like this.

Download full Source code from here


Share it

0 comments:

Post a Comment