Post
Ask Question

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.

  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. }  
  106.   
  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. }  
  121.   
  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. }  
  149.   
  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.