Column Chart With Two Database Fields in ASP.NET

The following code example demonstrates how create a Column Chart With Two Database Fields in ASP.NET.

Like Line chart, we can create a Column chart using the Chart control. Basically, a column chart provides the comparison of data across categories.

WebForm2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="ChartControl.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Chart runat="server" ID="Chart1" Width="800px" BackColor="Yellow" 
                BackGradientStyle="DiagonalLeft">
                <series>
                    <asp:Series Name="Temperature" ChartType="Column"  XValueMember="0" YValueMembers="1"
                         MarkerStep="1" XValueType="Int32" YValueType="Int32" Color="#910048"
                         >
                    </asp:Series>
                </series>
                <chartareas>
                    <asp:ChartArea Name="ChartArea1" BorderColor="Lime" BorderWidth="5">
                    </asp:ChartArea>
                </chartareas>
                <Legends>
                    <asp:Legend Name="Legend1" Alignment="Center" BackColor="YellowGreen"
                         BorderColor="DarkGreen" IsTextAutoFit="true" 
                         Title="Temperature Prediction" TitleAlignment="Center">
                    </asp:Legend> 
                </Legends>
                <Titles>
                    <asp:Title 
                        Text="Chart for Temperature Prediction in the Month of July in Delhi"
                         Font="Arial Black" ForeColor="#f14d0e" BorderColor="DarkRed"
                         BackColor="Lime">
                    </asp:Title>
                </Titles>
            </asp:Chart>
        </div>
    </form>
</body>
</html>

WebForm2.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace ChartControl
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        SqlConnection c1;
        SqlDataAdapter da;
        DataSet ds;
        public void Connect()
        {
            c1 = new SqlConnection(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=C:\Users\Administrator.KAVITA-PC\Documents\d1.mdf;Integrated Security=True;Connect Timeout=30");
            c1.Open();
        }

        public void BindChart()
        {
            Connect();
            String cmd_str = "select * from Temperatures";
            da = new SqlDataAdapter(cmd_str, c1);
            ds = new DataSet();
            da.Fill(ds, "TP");
            Chart1.DataSource = ds;
            Chart1.DataBind();
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            BindChart();
            Chart1.ChartAreas[0].AxisX.Interval = 2;
            Chart1.ChartAreas[0].AxisY.Minimum = 20;

            Chart1.Titles[0].Font = new System.Drawing.Font("Comic Sans Ms", 20, System.Drawing.FontStyle.Bold);
            Chart1.ChartAreas[0].AxisX.Title = "Date of Month";
            Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Arial", 12, System.Drawing.FontStyle.Bold);
            Chart1.ChartAreas[0].AxisX.TitleForeColor = System.Drawing.Color.DarkRed;

            Chart1.ChartAreas[0].AxisY.Title = "Temperature";
            Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Arial", 12, System.Drawing.FontStyle.Bold);
            Chart1.ChartAreas[0].AxisY.TitleForeColor = System.Drawing.Color.DarkRed;
        }
    }
}

Output

**Demonstrating an Example of Creating a Column Chart With Two Database Fields in ASP.NET**

Further Reading