Hi EmadKhan,
You can use ASP.Net Chart Control.
Refer below article for more details on ASP.Net Chart Control.
Check this example. Now please take its reference and correct your code.
HTML
<asp:Chart ID="Chart1" runat="server" Height="500px" Width="900px">
<Titles>
<asp:Title ShadowOffset="3" Name="Items" />
</Titles>
<Legends>
<asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Default"
LegendStyle="Row" />
</Legends>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderWidth="0" />
</ChartAreas>
</asp:Chart>
Namespaces
C#
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web.UI.DataVisualization.Charting;
VB.Net
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq
Imports System.Web.UI.DataVisualization.Charting
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] {
new DataColumn("ProjectName", typeof(string)),
new DataColumn("AmountToBill",typeof(int)),
new DataColumn("AmountBilled",typeof(int))});
dt.Rows.Add("Four Seasons", 100000, 50000);
dt.Rows.Add("Blossoms Hill", 250000, 10000);
dt.Rows.Add("Future Colony", 10000, 5000);
dt.Rows.Add("Green Valleys", 100000, 50000);
dt.Rows.Add("Bahria Town", 40000, 20000);
dt.Rows.Add("Saadi Town", 400000, 200000);
dt.Rows.Add("Nazeer Villas", 250000, 10000);
dt.Rows.Add("Khokar Park", 10000, 5000);
dt.Rows.Add("ASF Valley", 250000, 10000);
dt.Rows.Add("Askari Park", 10000, 5000);
List<string> columns = new List<string>();
columns.Add("AmountToBill");
columns.Add("AmountBilled");
string[] x = (from p in dt.AsEnumerable()
select p.Field<string>("ProjectName")).Distinct().ToArray();
for (int i = 0; i < columns.Count; i++)
{
int[] y = (from p in dt.AsEnumerable()
select p.Field<int>(columns[i])).ToArray();
Chart1.Series.Add(new Series(columns[i]));
Chart1.Series[columns[i]].IsValueShownAsLabel = true;
Chart1.Series[columns[i]].ChartType = SeriesChartType.Column;
Chart1.Series[columns[i]].Points.DataBindXY(x, y);
}
Chart1.Legends[0].Enabled = true;
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("ProjectName", GetType(String)), New DataColumn("AmountToBill", GetType(Integer)), New DataColumn("AmountBilled", GetType(Integer))})
dt.Rows.Add("Four Seasons", 100000, 50000)
dt.Rows.Add("Blossoms Hill", 250000, 10000)
dt.Rows.Add("Future Colony", 10000, 5000)
dt.Rows.Add("Green Valleys", 100000, 50000)
dt.Rows.Add("Bahria Town", 40000, 20000)
dt.Rows.Add("Saadi Town", 400000, 200000)
dt.Rows.Add("Nazeer Villas", 250000, 10000)
dt.Rows.Add("Khokar Park", 10000, 5000)
dt.Rows.Add("ASF Valley", 250000, 10000)
dt.Rows.Add("Askari Park", 10000, 5000)
Dim columns As List(Of String) = New List(Of String)()
columns.Add("AmountToBill")
columns.Add("AmountBilled")
Dim x As String() = (From p In dt.AsEnumerable() Select p.Field(Of String)("ProjectName")).Distinct().ToArray()
For i As Integer = 0 To columns.Count - 1
Dim y As Integer() = (From p In dt.AsEnumerable() Select p.Field(Of Integer)(columns(i))).ToArray()
Chart1.Series.Add(New Series(columns(i)))
Chart1.Series(columns(i)).IsValueShownAsLabel = True
Chart1.Series(columns(i)).ChartType = SeriesChartType.Column
Chart1.Series(columns(i)).Points.DataBindXY(x, y)
Next
Chart1.Legends(0).Enabled = True
End If
End Sub
Screenshot