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>
</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" />
</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.Spline;
Chart1.Series["Template"].IsVisibleInLegend = true;
Chart1.Series["Template"].IsValueShownAsLabel = false;
Chart1.Series["Template"].YValuesPerPoint = 2;
Chart1.Series["Template"].Color = System.Drawing.ColorTranslator.FromHtml("#355171");
Chart1.Series["Uploads"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Spline;
Chart1.Series["Uploads"].IsVisibleInLegend = true;
Chart1.Series["Uploads"].IsValueShownAsLabel = false;
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", 179, "Template");
dt.Rows.Add("ID Card", 22, "Template");
dt.Rows.Add("Invoice", 141, "Template");
dt.Rows.Add("Receipt", 557, "Template");
dt.Rows.Add("Certificate", 150, "Uploads");
dt.Rows.Add("ID Card", 130, "Uploads");
dt.Rows.Add("Invoice", 70, "Uploads");
dt.Rows.Add("Receipt", 300, "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.Spline
Chart1.Series("Template").IsVisibleInLegend = True
Chart1.Series("Template").IsValueShownAsLabel = False
Chart1.Series("Template").YValuesPerPoint = 2
Chart1.Series("Template").Color = Drawing.ColorTranslator.FromHtml("#355171")
Chart1.Series("Uploads").ChartType = DataVisualization.Charting.SeriesChartType.Spline
Chart1.Series("Uploads").IsVisibleInLegend = True
Chart1.Series("Uploads").IsValueShownAsLabel = False
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", 179, "Template")
dt.Rows.Add("ID Card", 22, "Template")
dt.Rows.Add("Invoice", 141, "Template")
dt.Rows.Add("Receipt", 557, "Template")
dt.Rows.Add("Certificate", 150, "Uploads")
dt.Rows.Add("ID Card", 130, "Uploads")
dt.Rows.Add("Invoice", 70, "Uploads")
dt.Rows.Add("Receipt", 300, "Uploads")
Return dt
End Function
Screenshot
