How To Implement Google Pie Chart Dynamically Using Entity Framework In ASP.NET

Introduction

In this article. I will demonstrate how to implement Google Pie Chart dynamically using Entity Framework in ASP.NET. I will use jQuery AJAX to retrieve the data from database and display in Google Pie Chart. The chart will display the respective data on its point line with animation.

Step 1

Open SQL Server 2014 and create a database table to insert and retrieve the data.

CREATE TABLE [dbo].[CompanyAnnualReport](
[ID] [int] IDENTITY(1,1) NOT NULL,
[DepartmentName] [nvarchar](50) NULL,
[EmployeeHired] [int] NULL,
CONSTRAINT [PK_CompanyAnnualReport] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Step 2

Open Visual Studio 2015 >> New Project and create an empty web application project.

Screenshot for creating new project 1

After clicking on New Project, one window will appear. Select Web from the left panel, choose ASP.NET Web Application, give a meaningful name to your project and then click on OK.

Screenshot for creating new project 2

After clicking on OK, one more window will appear. Choose Empty >> check on Web Forms checkbox and click on OK.

Screenshot for creating new project 3

Step 3

Click on Tools >> select NuGet Package Manager. Then, choose Manage NuGet Packages for Solution and click on it.

Screenshot for NuGet Package

After that, a window will appear. Choose Browse type bootstrap and install the package in the project.

Similarly, type jQuery and install the latest version of jQuery package in the project from NuGet; then close NuGet Solution.

Keep the useful files in Content and Scripts folder, as shown below.

Step 4

To add Entity Framework, right-click on Models folder, select Add, then select New Item, then click on it

After clicking on the New item, you will get a windo. From there select Data from the left panel and choose ADO.NET Entity Data Model, give it a name DBModels (This name is not mandatory. You can give any name); then click on Add.

After you click on Add, a window wizard will open. Choose EF Designer from the database and click Next.

In the next window, choose New Connection.

Another window will appear to add your server name. If it is local, then enter dot (.). Choose your database and click on OK.

The connection will get added. If you wish, save it as default connect as you want. You can change the name of your connection below. It will save connection in web config. Click on Next.

After clicking on NEXT, another window will appear. Choose database table name as shown below screenshot, then click on Finish. Entity Framework will be added to the respective class generated under Models folder.

The following class will be added.

namespace PieChart_Demo.Models
{
using System;
using System.Collections.Generic;
public partial class CompanyAnnualReport
{
public int ID { get; set; }
public string DepartmentName { get; set; }
public Nullable<int> EmployeeHired { get; set; }
}
}

Step 5

Right-click on project, select Add >> Web Form and click on it.

After clicking on the web form, one window will appear. Give it a meaningful name and click on OK.

Step 6

Right-click on scripts folder, select Add >> JavaScript File then click on it.

After clicking on JavaScript File window will appear. Give it the name PieChart then click on OK.

Add the following jQuery and JavaScript code to retrieve the data from database and display in chart.

var chartData; // global variable for hold chart data
google.load("visualization", "1", { packages: ["corechart"] });
// Here We will fill chartData
$(document).ready(function () {
$.ajax({
url: "PieChart.aspx/GetChartData",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data.d;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
// after complete loading data
google.setOnLoadCallback(drawChart);
drawChart();
});
});
function drawChart() {
var data = google.visualization.arrayToDataTable(chartData);
var options = {
title: "Company Annual Report",
pointSize: 5
};
var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
pieChart.draw(data, options);
}

Step 7

Add the following scripts and styles in head section of web form.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/PieChart.js"></script>

Step 8

Design web form using textbox control, button control, and gridview control and bootstrap 4 class to look good.

<body>
<form id="form1" runat="server">
<div class="container py-4">
<h5 class="text-center text-uppercase">How to Implement Google Pie Chart Dynamically Using Entity Framework in Asp.Net</h5>
<div class="card">
<div class="card-header bg-primary text-white text-uppercase">
<h6 class="card-title">Company Annual Hiring Report</h6>
</div>
<div class="card-body">
<button style="margin-bottom: 10px;" type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#pieChart">
<i class="fa fa-plus-circle"></i>Add New Report
</button>
<div class="modal" id="pieChart">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Company Annual Report</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Department Name:</label>
<asp:TextBox ID="txtDepartmentName" CssClass="form-control" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvDeptName" ControlToValidate="txtDepartmentName" CssClass="text-danger" runat="server" ErrorMessage="Please enter department name"></asp:RequiredFieldValidator>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Number of emplyee hired:</label>
<asp:TextBox ID="txtEmployeeHired" CssClass="form-control" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvHired" ControlToValidate="txtEmployeeHired" CssClass="text-danger" runat="server" ErrorMessage="Please enter number of employee hired"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger rounded-0" data-dismiss="modal">Close</button>
<asp:Button ID="btnSubmit" CssClass="btn btn-primary rounded-0" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</div>
</div>
</div>
</div>
<asp:GridView ID="CompanyAnnualReportGridView" AutoGenerateColumns="false" CssClass="table table-bordered table-striped" runat="server">
<Columns>
<asp:BoundField HeaderText="ID" DataField="ID" />
<asp:BoundField HeaderText="Department Name" DataField="DepartmentName" />
<asp:BoundField HeaderText="Employee Hired" DataField="EmployeeHired" />
</Columns>
</asp:GridView>
</div>
</div>
<div id="chart_div" style="width: 100%; height: 400px">
</div>
</div>
</form>
</body>

Step 9

Double click on submit button and write following c# code.

Add following namespace

using PieChart_Demo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI.WebControls;

Complete C# code of web form

using PieChart_Demo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI.WebControls;
namespace PieChart_Demo
{
public partial class PieChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridView();
ClearTextBox();
}
}
private void ClearTextBox()
{
txtDepartmentName.Text = string.Empty;
txtEmployeeHired.Text = string.Empty;
}
private void BindGridView()
{
using (DBModel db = new DBModel())
{
CompanyAnnualReportGridView.DataSource = (from r in db.CompanyAnnualReports select r).ToList();
CompanyAnnualReportGridView.DataBind();
}
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object[] GetChartData()
{
List<CompanyAnnualReport> data = new List<CompanyAnnualReport>();
//Here MyDatabaseEntities is our dbContext
using (DBModel db = new DBModel())
{
data =db.CompanyAnnualReports.ToList();
}
var chartData = new object[data.Count + 1];
chartData[0] = new object[]{
"Department Name",
"Employee Hired"
};
int j = 0;
foreach (var i in data)
{
j++;
chartData[j] = new object[] { i.DepartmentName, i.EmployeeHired};
}
return chartData;
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
using (DBModel db = new DBModel())
{
CompanyAnnualReport companyreport = new CompanyAnnualReport();
companyreport.DepartmentName = txtDepartmentName.Text;
companyreport.EmployeeHired = Convert.ToInt32(txtEmployeeHired.Text);
db.CompanyAnnualReports.Add(companyreport);
db.SaveChanges();
ClearTextBox();
}
this.BindGridView();
}
}
}

Step 9

Right click on web config file add the following code to avoid validation related error.

<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>

Step 10

Run project ctrl+F5

Screenshot 1

Screenshot 2

Conclusion

In this article, I have explained how to implement Google Pie Chart dynamically using Entity Framework in ASP.NET. We can add a yearly report of department name and number of employees hired in a year by clicking on Add New Report button. I hope it will be useful in your upcoming projects.

4 Comments

Join the conversation! Your thoughts help the community grow.

mike farhan5y ago
Hello my friend, could you please tell me if i am reading my table from an sql table, i need to write connection strings and commandas and all, how can i do all that using the foogle charts
- Farhan Ahmed5y ago
  Connection string will be added automatically one you add your database using database first approach.
Ivan Martinez6y ago
Nice entry, sir. I followed exactly your example but I'm using VS 2019 and for some reason data loads to the grid but doesn't load to the chart, therefore piechart doesn't display and I always get the "Error loading data! Please try again.". Is there any major update you noticed since you did this blog? Thank you
Hadshana Kamalanathan8y ago
Nice sharing