Hi George616,
Refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
.middle {
position: center;
margin-left: 10%;
}
.charting {
text-align: center;
position: center;
margin-left: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="charting row col-md-12" style="max-width: 100%; font-size: 9pt;">
<asp:Chart ID="Chart1" runat="server">
<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>
<input type="button" style="display: none" id="button" />
<asp:Label ID="certtemp" runat="server" Text="87"></asp:Label>
<asp:Label ID="certupload" runat="server" Text="109"></asp:Label><br />
<asp:Label ID="IDtemp" runat="server" Text="52"></asp:Label>
<asp:Label ID="IDupload" runat="server" Text="342"></asp:Label><br />
<asp:Label ID="Invtemp" runat="server" Text="278"></asp:Label>
<asp:Label ID="Invupload" runat="server" Text="309"></asp:Label><br />
<asp:Label ID="Recptemp" runat="server" Text="177"></asp:Label>
<asp:Label ID="Recpupload" runat="server" Text="100"></asp:Label>
</form>
<script type="text/javascript">
$(function () {
resize();
});
$(window).resize(function () {
resize();
});
function resize() {
var w = $(window).width();
var h = $(window).height();
document.getElementById('Chart1').style.width = w + 'px';
document.getElementById('Chart1').style.height = h + 'px';
$("#button").click();
}
</script>
</body>
</html>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
BindDataToChartcontrol(GetDataForChart());
}
public void BindDataToChartcontrol(System.Data.DataTable dt)
{
Chart1.DataBindCrossTable(dt.DefaultView, "Name", "Items", "Figures", "");
Chart1.Series["Template"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
Chart1.Series["Template"].IsVisibleInLegend = true;
Chart1.Series["Template"].IsValueShownAsLabel = true;
Chart1.Series["Template"].YValuesPerPoint = 2;
Chart1.Series["Template"].Color = System.Drawing.ColorTranslator.FromHtml("#355171");
Chart1.Series["Uploads"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
Chart1.Series["Uploads"].IsVisibleInLegend = true;
Chart1.Series["Uploads"].IsValueShownAsLabel = true;
Chart1.Series["Uploads"].YValuesPerPoint = 2;
Chart1.Series["Uploads"].Color = System.Drawing.ColorTranslator.FromHtml("#2e8b57");
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[3] {
new System.Data.DataColumn("Items"),
new System.Data.DataColumn("Figures"),
new System.Data.DataColumn("Name") });
dt.Rows.Add("Certificate", certtemp.Text, "Template");
dt.Rows.Add("ID Card", IDtemp.Text, "Template");
dt.Rows.Add("Invoice", Invtemp.Text, "Template");
dt.Rows.Add("Receipt", Recptemp.Text, "Template");
dt.Rows.Add("Certificate", certupload.Text, "Uploads");
dt.Rows.Add("ID Card", IDupload.Text, "Uploads");
dt.Rows.Add("Invoice", Invupload.Text, "Uploads");
dt.Rows.Add("Receipt", Recpupload.Text, "Uploads");
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.DataBindCrossTable(dt.DefaultView, "Name", "Items", "Figures", "")
Chart1.Series("Template").ChartType = DataVisualization.Charting.SeriesChartType.Column
Chart1.Series("Template").IsVisibleInLegend = True
Chart1.Series("Template").IsValueShownAsLabel = True
Chart1.Series("Template").YValuesPerPoint = 2
Chart1.Series("Template").Color = Drawing.ColorTranslator.FromHtml("#355171")
Chart1.Series("Uploads").ChartType = DataVisualization.Charting.SeriesChartType.Column
Chart1.Series("Uploads").IsVisibleInLegend = True
Chart1.Series("Uploads").IsValueShownAsLabel = True
Chart1.Series("Uploads").YValuesPerPoint = 2
Chart1.Series("Uploads").Color = Drawing.ColorTranslator.FromHtml("#2e8b57")
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(2) {
New Data.DataColumn("Items"), New Data.DataColumn("Figures"), New Data.DataColumn("Name")})
dt.Rows.Add("Certificate", certtemp.Text, "Template")
dt.Rows.Add("ID Card", IDtemp.Text, "Template")
dt.Rows.Add("Invoice", Invtemp.Text, "Template")
dt.Rows.Add("Receipt", Recptemp.Text, "Template")
dt.Rows.Add("Certificate", certupload.Text, "Uploads")
dt.Rows.Add("ID Card", IDupload.Text, "Uploads")
dt.Rows.Add("Invoice", Invupload.Text, "Uploads")
dt.Rows.Add("Receipt", Recpupload.Text, "Uploads")
Return dt
End Function
Screenshot
