Hi George616,
Check this example. Now please take its reference and correct your code.
HTML
<div class="container">
<div class="middle" style="max-width: 100%;">
<div class="row" style="width: 95%;">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
<div class="col p-4 d-flex flex-column position-static">
<div class="row" style="font-family: Comfortaa; font-size: 12pt; font-weight: bolder;">
<asp:Label ID="lblcert" runat="server" Text="35" />
<div class="lbl1">
<asp:Label ID="upldlbl" runat="server" Text=""></asp:Label>
</div>
</div>
<h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
<%--<img alt="" src="images/indeximg/homecert.png" height="20" />--%><i class="fa fa-certificate" aria-hidden="true"></i> Certificate</h3>
<p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">With QR Code authentication, check certificates and related documents for authenticity.</p>
<asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" Text="More Details" Style="font-family: Comfortaa; background-color: steelblue;" ID="certbtn" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #DCDCDC;">
<div class="col p-4 d-flex flex-column position-static">
<div class="row" style="font-family: Comfortaa; font-size: 12pt; font-weight: bolder;">
<asp:Label ID="idlabel" runat="server" Text="80" />
<div class="lbl2">
<asp:Label ID="lblidld" runat="server" Text=""></asp:Label>
</div>
</div>
<h3 class="mb-0" style="color: #8E3939; font-size: 11pt;">
<%--<img alt="" src="images/indeximg/idcardd.png" height="25" />--%><i class="fa fa-id-card" aria-hidden="true"></i> ID Card</h3>
<p class="mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" Text="More Details" Style="font-family: Comfortaa; background-color: steelblue;" ID="idcardbtn" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #DCDCDC;">
<div class="col p-4 d-flex flex-column position-static">
<div class="row" style="font-family: Comfortaa; font-size: 12pt; font-weight: bolder;">
<asp:Label ID="labelinv" runat="server" Text="50" />
<div class="lbl3">
<asp:Label ID="lbluld" runat="server" Text=""></asp:Label>
</div>
</div>
<h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
<%--<img alt="" src="images/indeximg/hominvoice.png" height="30" />--%><i class="fas fa fa-file-invoice" aria-hidden="true"></i> Invoice</h3>
<p class="mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" Text="More Details" Style="font-family: Comfortaa; background-color: steelblue;" ID="invoicebtn" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
<div class="col p-4 d-flex flex-column position-static">
<div class="row" style="font-family: Comfortaa; font-size: 12pt; font-weight: bolder;">
<asp:Label ID="recptlbl" runat="server" Text="105" />
<div class="lbl4">
<asp:Label ID="lblupld" runat="server" Text="" CssClass="tooltips" data-placement="top" title="Tooltip on top"></asp:Label>
</div>
</div>
<h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
<%--<img alt="" src="images/indeximg/recpt.jpg" height="30" />--%><i class="fas fa-receipt" aria-hidden="true"></i> Reciept</h3>
<p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" Text="More Details" Style="font-family: Comfortaa; background-color: steelblue;" ID="receiptbtn" />
</div>
</div>
</div>
</div>
</div>
<br />
<div class="charting row col-md-12" style="max-width: 100%; font-size: 9pt;">
<asp:Chart ID="Chart1" runat="server" Width="1000px" Height="220px">
<Series>
<asp:Series Name="showing figures for items created so far" ChartType="Spline"
XValueMember="Items" YValueMembers="Figures" IsVisibleInLegend="true"
IsValueShownAsLabel="true" YValuesPerPoint="2" Color="#355171">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisX LineColor="Gray">
<MajorGrid LineColor="Gray" />
</AxisX>
<AxisY LineColor="Gray">
<MajorGrid LineColor="Gray" />
</AxisY>
<Area3DStyle Enable3D="false" LightStyle="Realistic"></Area3DStyle>
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend>
</asp:Legend>
</Legends>
</asp:Chart>
</div>
</div>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
BindDataToChartcontrol(GetDataForChart());
}
public void BindDataToChartcontrol(System.Data.DataTable dt)
{
Chart1.DataSource = dt;
Chart1.DataBind();
Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;
}
public System.Data.DataTable GetDataForChart()
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.AddRange(new System.Data.DataColumn[2] {
new System.Data.DataColumn("Items"),
new System.Data.DataColumn("Figures") });
dt.Rows.Add("Certificate", !string.IsNullOrEmpty(lblcert.Text) ? lblcert.Text.Trim() : "0");
dt.Rows.Add("ID Card", !string.IsNullOrEmpty(idlabel.Text) ? idlabel.Text.Trim() : "0");
dt.Rows.Add("Invoice", !string.IsNullOrEmpty(labelinv.Text) ? labelinv.Text.Trim() : "0");
dt.Rows.Add("Receipt", !string.IsNullOrEmpty(recptlbl.Text) ? recptlbl.Text.Trim() : "0");
return dt;
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
BindDataToChartcontrol(GetDataForChart())
End Sub
Public Sub BindDataToChartcontrol(ByVal dt As Data.DataTable)
Chart1.DataSource = dt
Chart1.DataBind()
Chart1.ChartAreas("ChartArea1").AxisX.MajorGrid.Enabled = False
Chart1.ChartAreas("ChartArea1").AxisY.MajorGrid.Enabled = False
End Sub
Public Function GetDataForChart() As Data.DataTable
Dim dt As Data.DataTable = New Data.DataTable()
dt.Columns.AddRange(New Data.DataColumn(1) {
New Data.DataColumn("Items"),
New Data.DataColumn("Figures")})
dt.Rows.Add("Certificate", If(Not String.IsNullOrEmpty(lblcert.Text), lblcert.Text.Trim(), "0"))
dt.Rows.Add("ID Card", If(Not String.IsNullOrEmpty(idlabel.Text), idlabel.Text.Trim(), "0"))
dt.Rows.Add("Invoice", If(Not String.IsNullOrEmpty(labelinv.Text), labelinv.Text.Trim(), "0"))
dt.Rows.Add("Receipt", If(Not String.IsNullOrEmpty(recptlbl.Text), recptlbl.Text.Trim(), "0"))
Return dt
End Function
Screenshot
