How To Make a Google Chart In ASP.NET Web Forms

Introduction

You can use Google Charts into your project to beautify the reports and charts in your dashboard. There are a lot of other ways too but Google Charts is a good option and it is very easy to implement. So, I want to share with my community.

Step 1

First of all, you need to make a project of ASP.NET Web Forms type in Visual Studio.

Step 2

Then, make a web form and apply the following code for server-side.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="DashBoard.aspx.cs" Inherits="SDT.DashBoard" %>
<%@ MasterType VirtualPath="~/Site1.Master" %> < asp: Content ID = "Content2"
ContentPlaceHolderID = "Head"
runat = "server" >
< script type = "text/javascript"
src = "https://www.google.com/jsapi" >
< /script>
< script >
var PiechartDataClient;
var PiechartDataVendor;
var ColoumnChartDataClient;
var ColoumnChartDataVendor; // globar variable for hold chart data
google.load("visualization", "1", {
packages: ["corechart"]
});
// Here We will fill chartData
$(document).ready(function() {
// Client Pie Chart
$.ajax({
url: "DashBoard.aspx/GetPieChartData_Client",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function(data) {
PiechartDataClient = data.d;
},
error: function() {
//alert("Error loading data! Please try again.");
}
}).done(function() {
// after complete loading data
google.setOnLoadCallback(drawPieChartClient);
drawPieChartClient();
});
//Vendor Pie Chart
$.ajax({
url: "DashBoard.aspx/GetPieChartData_Vendor",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function(data) {
PiechartDataVendor = data.d;
},
error: function() {
//alert("Error loading data! Please try again.");
}
}).done(function() {
// after complete loading data
google.setOnLoadCallback(drawPieChartVendor);
drawPieChartVendor();
});
// Client Coloumn Chart
$.ajax({
url: "DashBoard.aspx/GetColoumnChartData_Client",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function(data) {
ColoumnChartDataClient = data.d;
},
error: function() {
//alert("Error loading data! Please try again.");
}
}).done(function() {
// after complete loading data
google.setOnLoadCallback(drawColoumnChartClient);
drawColoumnChartClient();
});
// Vendor Coloumn Chart
$.ajax({
url: "DashBoard.aspx/GetColoumnChartData_Vendor",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function(data) {
ColoumnChartDataVendor = data.d;
},
error: function() {
// alert("Error loading data! Please try again.");
}
}).done(function() {
// after complete loading data
google.setOnLoadCallback(drawColoumnChartVendor);
drawColoumnChartVendor();
});
});
//on Change of Date Range
function drawPieChartClient() {
var data = google.visualization.arrayToDataTable(PiechartDataClient);
var options = {
title: "Client Data",
pieHole: 0.2,
pointSize: 5
};
//var barChart = new google.visualization.BarChart(document.getElementById('Div1'));
//barChart.draw(data, options);
//var columnChart = new google.visualization.ColumnChart(document.getElementById('Div1'));
//columnChart.draw(data, options);
var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
pieChart.draw(data, options);
}
function drawPieChartVendor() {
var data = google.visualization.arrayToDataTable(PiechartDataVendor);
var options = {
title: "Vendor Data",
pieHole: 0.2,
pointSize: 5
};
//var barChart = new google.visualization.BarChart(document.getElementById('Div1'));
//barChart.draw(data, options);
//var columnChart = new google.visualization.ColumnChart(document.getElementById('Div1'));
//columnChart.draw(data, options);
var pieChart = new google.visualization.PieChart(document.getElementById('ChartVendor'));
pieChart.draw(data, options);
}
function drawColoumnChartClient() {
var data = google.visualization.arrayToDataTable(ColoumnChartDataClient);
var options = {
vAxis: {
gridlines: {
count: 10
},
title: 'Rating (scale of 0-10)'
},
bar: {
groupWidth: '60%'
},
hAxis: {
title: 'Job No',
},
title: "Client Job Wise Summary Report",
pointSize: 5
};
//
//
//var barChart = new google.visualization.BarChart(document.getElementById('Div1'));
//barChart.draw(data, options);
var columnChart = new google.visualization.ColumnChart(document.getElementById('Div1'));
columnChart.draw(data, options);
//var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
//pieChart.draw(data, options);
}
function drawColoumnChartVendor() {
var data = google.visualization.arrayToDataTable(ColoumnChartDataVendor);
var options = {
vAxis: {
gridlines: {
count: 10
},
title: 'Rating (scale of 0-10)'
},
bar: {
groupWidth: '60%'
},
hAxis: {
title: 'Job No',
},
title: "Vendor Job Wise Summary Report",
pointSize: 5
};
//var barChart = new google.visualization.BarChart(document.getElementById('ColoumnChartVendor'));
//barChart.draw(data, options);
var columnChart = new google.visualization.ColumnChart(document.getElementById('ColoumnChartVendor'));
columnChart.draw(data, options);
//document.getElementById('format-select').onchange = function () {
// options['vAxis']['format'] = this.value;
// columnChart.draw(data, options);
//var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
//pieChart.draw(data, options);
}
< /script>

Step 3

Here is code of C# and AJAX.

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object[] GetPieChartData_Client() {
try {
string query = @ "exec [dbo].[SP_DashBoardReports] '" + DateFromRange + "','" + DateToRange + "','Client_JobWiseSummary'";
DataTable data = munshi.executeDT(query);
if (data.Rows.Count > 0) {
var chartData = new object[data.Rows.Count + 1];
chartData[0] = new object[] {
"Job No",
"Bal Amount"
};
int j = 0;
foreach(DataRow i in data.Rows) {
j++;
chartData[j] = new object[] {
i["JobNo"], i["Bal_Amount"]
};
}
return chartData;
} else {
return null;
}
} catch (Exception ex) {
throw;
}
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object[] GetColoumnChartData_Client() {
try {
string query = @ "exec [dbo].[SP_DashBoardReports] '" + DateFromRange + "','" + DateToRange + "','Client_JobWiseSummary'";
DataTable data = munshi.executeDT(query);
if (data.Rows.Count > 0) {
var chartData1 = new object[data.Rows.Count + 1];
chartData1[0] = new object[] {
"Client",
"Receivables",
"Receipts",
"Bal Amount"
};
int j = 0;
foreach(DataRow i in data.Rows) {
j++;
chartData1[j] = new object[] {
i["JobNo"].ToString(), i["Receivables"], i["Receipts"], i["Bal_Amount"]
};
}
return chartData1;
} else {
return null;
}
} catch (Exception ex) {
throw;
}
}
public void CreatetblClient() {
try {
ObjClsOperation.DateFrom = Convert.ToDateTime(txtDateFrom.Text);
ObjClsOperation.DateTo = Convert.ToDateTime(txtDateTo.Text);
DataTable dtClient = ObjClsOperation.GetClientSummary();
if (dtClient.Rows.Count > 0) {
StringBuilder sb = new StringBuilder();
foreach(DataRow item in dtClient.Rows) {
sb.Append("<tr>");
sb.AppendFormat(" <td>" + item["SNo"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["Client"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["JobNo"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["Receivables"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["Receipts"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["Bal_Amount"].ToString() + "</td>");
sb.Append("</tr>");
}
tbodyClient.InnerHtml = sb.ToString();
} else {
tbodyClient.InnerHtml = "";
Page.ClientScript.RegisterStartupScript(this.GetType(), "ClientScript1", "ABC()", true);
return;
}
} catch (Exception ex) {
throw;
}
}
public void CreatetblVendor() {
try {
ObjClsOperation.DateFrom = Convert.ToDateTime(txtDateFrom.Text);
ObjClsOperation.DateTo = Convert.ToDateTime(txtDateTo.Text);
DataTable dtVendor = ObjClsOperation.GetVendorSummary();
if (dtVendor.Rows.Count > 0) {
StringBuilder sb = new StringBuilder();
foreach(DataRow item in dtVendor.Rows) {
sb.Append("<tr>");
sb.AppendFormat(" <td>" + item["SNo"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["Vendor"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["JobNo"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["Payables"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["Payments"].ToString() + "</td>");
sb.AppendFormat(" <td>" + item["Bal_Amount"].ToString() + "</td>");
sb.Append("</tr>");
}
tbodyVendor.InnerHtml = sb.ToString();
} else {
tbodyVendor.InnerHtml = "";
}
} catch (Exception ex) {
throw;
}
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object[] GetPieChartData_Vendor() {
try {
string query = @ "exec [dbo].[SP_DashBoardReports] '" + DateFromRange + "','" + DateToRange + "','Vendor_JobWiseSummary'";
DataTable data = munshi.executeDT(query);
if (data.Rows.Count > 0) {
var chartData = new object[data.Rows.Count + 1];
chartData[0] = new object[] {
"Job No",
"Balance Amount"
};
int j = 0;
foreach(DataRow i in data.Rows) {
j++;
chartData[j] = new object[] {
i["JobNo"], i["Bal_Amount"]
};
}
return chartData;
} else {
return null;
}
} catch (Exception ex) {
throw;
}
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object[] GetColoumnChartData_Vendor() {
try {
string query = @ "exec [dbo].[SP_DashBoardReports] '" + DateFromRange + "','" + DateToRange + "','Vendor_JobWiseSummary'";
DataTable data = munshi.executeDT(query);
if (data.Rows.Count > 0) {
var chartData1 = new object[data.Rows.Count + 1];
chartData1[0] = new object[] {
"Vendor",
"Payables",
"Payments",
"Bal Amount"
};
int j = 0;
foreach(DataRow i in data.Rows) {
j++;
chartData1[j] = new object[] {
i["JobNo"].ToString(), i["Payables"], i["Payments"], i["Bal_Amount"]
};
}
return chartData1;
} else {
return null;
}
} catch (Exception ex) {
throw;
}
}

Step 4

Run the application.