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.

  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="DashBoard.aspx.cs" Inherits="SDT.DashBoard" %>
  2. <%@ MasterType VirtualPath="~/Site1.Master" %> < asp: Content ID = "Content2"
  3. ContentPlaceHolderID = "Head"
  4. runat = "server" >
  5. < script type = "text/javascript"
  6. src = "https://www.google.com/jsapi" >
  7. < /script>
  8. < script >
  9. var PiechartDataClient;
  10. var PiechartDataVendor;
  11. var ColoumnChartDataClient;
  12. var ColoumnChartDataVendor; // globar variable for hold chart data
  13. google.load("visualization", "1", {
  14. packages: ["corechart"]
  15. });
  16. // Here We will fill chartData
  17. $(document).ready(function() {
  18. // Client Pie Chart
  19. $.ajax({
  20. url: "DashBoard.aspx/GetPieChartData_Client",
  21. data: "",
  22. dataType: "json",
  23. type: "POST",
  24. contentType: "application/json; chartset=utf-8",
  25. success: function(data) {
  26. PiechartDataClient = data.d;
  27. },
  28. error: function() {
  29. //alert("Error loading data! Please try again.");
  30. }
  31. }).done(function() {
  32. // after complete loading data
  33. google.setOnLoadCallback(drawPieChartClient);
  34. drawPieChartClient();
  35. });
  36. //Vendor Pie Chart
  37. $.ajax({
  38. url: "DashBoard.aspx/GetPieChartData_Vendor",
  39. data: "",
  40. dataType: "json",
  41. type: "POST",
  42. contentType: "application/json; chartset=utf-8",
  43. success: function(data) {
  44. PiechartDataVendor = data.d;
  45. },
  46. error: function() {
  47. //alert("Error loading data! Please try again.");
  48. }
  49. }).done(function() {
  50. // after complete loading data
  51. google.setOnLoadCallback(drawPieChartVendor);
  52. drawPieChartVendor();
  53. });
  54. // Client Coloumn Chart
  55. $.ajax({
  56. url: "DashBoard.aspx/GetColoumnChartData_Client",
  57. data: "",
  58. dataType: "json",
  59. type: "POST",
  60. contentType: "application/json; chartset=utf-8",
  61. success: function(data) {
  62. ColoumnChartDataClient = data.d;
  63. },
  64. error: function() {
  65. //alert("Error loading data! Please try again.");
  66. }
  67. }).done(function() {
  68. // after complete loading data
  69. google.setOnLoadCallback(drawColoumnChartClient);
  70. drawColoumnChartClient();
  71. });
  72. // Vendor Coloumn Chart
  73. $.ajax({
  74. url: "DashBoard.aspx/GetColoumnChartData_Vendor",
  75. data: "",
  76. dataType: "json",
  77. type: "POST",
  78. contentType: "application/json; chartset=utf-8",
  79. success: function(data) {
  80. ColoumnChartDataVendor = data.d;
  81. },
  82. error: function() {
  83. // alert("Error loading data! Please try again.");
  84. }
  85. }).done(function() {
  86. // after complete loading data
  87. google.setOnLoadCallback(drawColoumnChartVendor);
  88. drawColoumnChartVendor();
  89. });
  90. });
  91. //on Change of Date Range
  92. function drawPieChartClient() {
  93. var data = google.visualization.arrayToDataTable(PiechartDataClient);
  94. var options = {
  95. title: "Client Data",
  96. pieHole: 0.2,
  97. pointSize: 5
  98. };
  99. //var barChart = new google.visualization.BarChart(document.getElementById('Div1'));
  100. //barChart.draw(data, options);
  101. //var columnChart = new google.visualization.ColumnChart(document.getElementById('Div1'));
  102. //columnChart.draw(data, options);
  103. var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
  104. pieChart.draw(data, options);
  105. }
  107. function drawPieChartVendor() {
  108. var data = google.visualization.arrayToDataTable(PiechartDataVendor);
  109. var options = {
  110. title: "Vendor Data",
  111. pieHole: 0.2,
  112. pointSize: 5
  113. };
  114. //var barChart = new google.visualization.BarChart(document.getElementById('Div1'));
  115. //barChart.draw(data, options);
  116. //var columnChart = new google.visualization.ColumnChart(document.getElementById('Div1'));
  117. //columnChart.draw(data, options);
  118. var pieChart = new google.visualization.PieChart(document.getElementById('ChartVendor'));
  119. pieChart.draw(data, options);
  120. }
  122. function drawColoumnChartClient() {
  123. var data = google.visualization.arrayToDataTable(ColoumnChartDataClient);
  124. var options = {
  125. vAxis: {
  126. gridlines: {
  127. count: 10
  128. },
  129. title: 'Rating (scale of 0-10)'
  130. },
  131. bar: {
  132. groupWidth: '60%'
  133. },
  134. hAxis: {
  135. title: 'Job No',
  136. },
  137. title: "Client Job Wise Summary Report",
  138. pointSize: 5
  139. };
  140. //
  141. //
  142. //var barChart = new google.visualization.BarChart(document.getElementById('Div1'));
  143. //barChart.draw(data, options);
  144. var columnChart = new google.visualization.ColumnChart(document.getElementById('Div1'));
  145. columnChart.draw(data, options);
  146. //var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
  147. //pieChart.draw(data, options);
  148. }
  150. function drawColoumnChartVendor() {
  151. var data = google.visualization.arrayToDataTable(ColoumnChartDataVendor);
  152. var options = {
  153. vAxis: {
  154. gridlines: {
  155. count: 10
  156. },
  157. title: 'Rating (scale of 0-10)'
  158. },
  159. bar: {
  160. groupWidth: '60%'
  161. },
  162. hAxis: {
  163. title: 'Job No',
  164. },
  165. title: "Vendor Job Wise Summary Report",
  166. pointSize: 5
  167. };
  168. //var barChart = new google.visualization.BarChart(document.getElementById('ColoumnChartVendor'));
  169. //barChart.draw(data, options);
  170. var columnChart = new google.visualization.ColumnChart(document.getElementById('ColoumnChartVendor'));
  171. columnChart.draw(data, options);
  172. //document.getElementById('format-select').onchange = function () {
  173. // options['vAxis']['format'] = this.value;
  174. // columnChart.draw(data, options);
  175. //var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
  176. //pieChart.draw(data, options);
  177. }
  178. < /script>

Step 3

Here is code of C# and AJAX.

  1. [WebMethod]
  2. [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  3. public static object[] GetPieChartData_Client() {
  4. try {
  5. string query = @ "exec [dbo].[SP_DashBoardReports] '" + DateFromRange + "','" + DateToRange + "','Client_JobWiseSummary'";
  6. DataTable data = munshi.executeDT(query);
  7. if (data.Rows.Count > 0) {
  8. var chartData = new object[data.Rows.Count + 1];
  9. chartData[0] = new object[] {
  10. "Job No",
  11. "Bal Amount"
  12. };
  13. int j = 0;
  14. foreach(DataRow i in data.Rows) {
  15. j++;
  16. chartData[j] = new object[] {
  17. i["JobNo"], i["Bal_Amount"]
  18. };
  19. }
  20. return chartData;
  21. } else {
  22. return null;
  23. }
  24. } catch (Exception ex) {
  25. throw;
  26. }
  27. }
  28. [WebMethod]
  29. [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  30. public static object[] GetColoumnChartData_Client() {
  31. try {
  32. string query = @ "exec [dbo].[SP_DashBoardReports] '" + DateFromRange + "','" + DateToRange + "','Client_JobWiseSummary'";
  33. DataTable data = munshi.executeDT(query);
  34. if (data.Rows.Count > 0) {
  35. var chartData1 = new object[data.Rows.Count + 1];
  36. chartData1[0] = new object[] {
  37. "Client",
  38. "Receivables",
  39. "Receipts",
  40. "Bal Amount"
  41. };
  42. int j = 0;
  43. foreach(DataRow i in data.Rows) {
  44. j++;
  45. chartData1[j] = new object[] {
  46. i["JobNo"].ToString(), i["Receivables"], i["Receipts"], i["Bal_Amount"]
  47. };
  48. }
  49. return chartData1;
  50. } else {
  51. return null;
  52. }
  53. } catch (Exception ex) {
  54. throw;
  55. }
  56. }
  57. public void CreatetblClient() {
  58. try {
  59. ObjClsOperation.DateFrom = Convert.ToDateTime(txtDateFrom.Text);
  60. ObjClsOperation.DateTo = Convert.ToDateTime(txtDateTo.Text);
  61. DataTable dtClient = ObjClsOperation.GetClientSummary();
  62. if (dtClient.Rows.Count > 0) {
  63. StringBuilder sb = new StringBuilder();
  64. foreach(DataRow item in dtClient.Rows) {
  65. sb.Append("<tr>");
  66. sb.AppendFormat(" <td>" + item["SNo"].ToString() + "</td>");
  67. sb.AppendFormat(" <td>" + item["Client"].ToString() + "</td>");
  68. sb.AppendFormat(" <td>" + item["JobNo"].ToString() + "</td>");
  69. sb.AppendFormat(" <td>" + item["Receivables"].ToString() + "</td>");
  70. sb.AppendFormat(" <td>" + item["Receipts"].ToString() + "</td>");
  71. sb.AppendFormat(" <td>" + item["Bal_Amount"].ToString() + "</td>");
  72. sb.Append("</tr>");
  73. }
  74. tbodyClient.InnerHtml = sb.ToString();
  75. } else {
  76. tbodyClient.InnerHtml = "";
  77. Page.ClientScript.RegisterStartupScript(this.GetType(), "ClientScript1", "ABC()", true);
  78. return;
  79. }
  80. } catch (Exception ex) {
  81. throw;
  82. }
  83. }
  84. public void CreatetblVendor() {
  85. try {
  86. ObjClsOperation.DateFrom = Convert.ToDateTime(txtDateFrom.Text);
  87. ObjClsOperation.DateTo = Convert.ToDateTime(txtDateTo.Text);
  88. DataTable dtVendor = ObjClsOperation.GetVendorSummary();
  89. if (dtVendor.Rows.Count > 0) {
  90. StringBuilder sb = new StringBuilder();
  91. foreach(DataRow item in dtVendor.Rows) {
  92. sb.Append("<tr>");
  93. sb.AppendFormat(" <td>" + item["SNo"].ToString() + "</td>");
  94. sb.AppendFormat(" <td>" + item["Vendor"].ToString() + "</td>");
  95. sb.AppendFormat(" <td>" + item["JobNo"].ToString() + "</td>");
  96. sb.AppendFormat(" <td>" + item["Payables"].ToString() + "</td>");
  97. sb.AppendFormat(" <td>" + item["Payments"].ToString() + "</td>");
  98. sb.AppendFormat(" <td>" + item["Bal_Amount"].ToString() + "</td>");
  99. sb.Append("</tr>");
  100. }
  101. tbodyVendor.InnerHtml = sb.ToString();
  102. } else {
  103. tbodyVendor.InnerHtml = "";
  104. }
  105. } catch (Exception ex) {
  106. throw;
  107. }
  108. }
  109. [WebMethod]
  110. [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  111. public static object[] GetPieChartData_Vendor() {
  112. try {
  113. string query = @ "exec [dbo].[SP_DashBoardReports] '" + DateFromRange + "','" + DateToRange + "','Vendor_JobWiseSummary'";
  114. DataTable data = munshi.executeDT(query);
  115. if (data.Rows.Count > 0) {
  116. var chartData = new object[data.Rows.Count + 1];
  117. chartData[0] = new object[] {
  118. "Job No",
  119. "Balance Amount"
  120. };
  121. int j = 0;
  122. foreach(DataRow i in data.Rows) {
  123. j++;
  124. chartData[j] = new object[] {
  125. i["JobNo"], i["Bal_Amount"]
  126. };
  127. }
  128. return chartData;
  129. } else {
  130. return null;
  131. }
  132. } catch (Exception ex) {
  133. throw;
  134. }
  135. }
  136. [WebMethod]
  137. [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  138. public static object[] GetColoumnChartData_Vendor() {
  139. try {
  140. string query = @ "exec [dbo].[SP_DashBoardReports] '" + DateFromRange + "','" + DateToRange + "','Vendor_JobWiseSummary'";
  141. DataTable data = munshi.executeDT(query);
  142. if (data.Rows.Count > 0) {
  143. var chartData1 = new object[data.Rows.Count + 1];
  144. chartData1[0] = new object[] {
  145. "Vendor",
  146. "Payables",
  147. "Payments",
  148. "Bal Amount"
  149. };
  150. int j = 0;
  151. foreach(DataRow i in data.Rows) {
  152. j++;
  153. chartData1[j] = new object[] {
  154. i["JobNo"].ToString(), i["Payables"], i["Payments"], i["Bal_Amount"]
  155. };
  156. }
  157. return chartData1;
  158. } else {
  159. return null;
  160. }
  161. } catch (Exception ex) {
  162. throw;
  163. }
  164. }

Step 4

Run the application.