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;
- google.load("visualization", "1", {
- packages: ["corechart"]
- });
-
- $(document).ready(function() {
-
- $.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() {
-
- }
- }).done(function() {
-
- google.setOnLoadCallback(drawPieChartClient);
- drawPieChartClient();
- });
-
- $.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() {
-
- }
- }).done(function() {
-
- google.setOnLoadCallback(drawPieChartVendor);
- drawPieChartVendor();
- });
-
- $.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() {
-
- }
- }).done(function() {
-
- google.setOnLoadCallback(drawColoumnChartClient);
- drawColoumnChartClient();
- });
-
- $.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() {
-
- }
- }).done(function() {
-
- google.setOnLoadCallback(drawColoumnChartVendor);
- drawColoumnChartVendor();
- });
- });
-
- function drawPieChartClient() {
- var data = google.visualization.arrayToDataTable(PiechartDataClient);
- var options = {
- title: "Client Data",
- pieHole: 0.2,
- pointSize: 5
- };
-
-
-
-
- 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 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 columnChart = new google.visualization.ColumnChart(document.getElementById('Div1'));
- columnChart.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 columnChart = new google.visualization.ColumnChart(document.getElementById('ColoumnChartVendor'));
- columnChart.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.