我的问题基于asp.net c#,当我从DROPDOWN列表中选择一名员工时,我希望将数据显示到谷歌饼图,为此我已经使用了webmethod,我能够为单个员工做,但是现在我想要做的是带来多个员工的记录,我正在使用列表框控件和选择多功能。问题是,当我传递多个员工ID时,我无法获取饼图。 相同的代码是。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pie Chart</title>
<script src="Scripts/jquery-1.4.1.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="col-md-12">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">
From Date
</label>
<div class="col-md-8">
<div class="has-feedback">
<asp:TextBox ID="txtFromDate" class="form-control input-md datepicker-example8" placeholder="Date" runat="server"></asp:TextBox>
<label for="textinput" style="color: red">Kindly enter the date in format mm/dd/yy</label>
</div>
</div>
</div>
</div>
<br />
<div class="col-md-5">
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">
To
</label>
<div class="col-md-8">
<div class="has-feedback">
<asp:TextBox ID="txtToDate" class="form-control input-md datepicker-example8" placeholder="Date" runat="server"></asp:TextBox>
<label for="textinput" style="color: red">Kindly enter the date in format mm/dd/yy</label>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<div>
<label for="textinput"><strong>Select Employee : </strong></label>
<asp:DropDownList ID="ddlEmployee" class="form-control" AutoPostBack="false" runat="server"></asp:DropDownList>
<br />
<br />
<asp:ListBox ID="lbData" runat="server" SelectionMode="Multiple"></asp:ListBox>
<br />
</div>
<div id="PieChartsDIV" style="width: 600px; height: 350px;">
</div>
</form>
</body>
<script type="text/javascript">
// Global variable to hold data
// Load the Visualization API and the piechart package.
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
$('#lbData').focusout(function () {
debugger;
//var frmdate = $('#txtFromDate').val();
//var todate = $('#txtToDate').val();
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'DemoChartsWithoutMaster.aspx/GetPieChartDetails',
data: "{emp_id:'" + $(this).val() + "' ,FromDate:'" + $('#txtFromDate').val() + "',ToDate:'" + $('#txtToDate').val() + "'}",
success: function (response) {
drawchart(response.d); // calling method
},
error: function () {
alert("Error loading data...........");
}
});
});
function drawchart(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
var data = new google.visualization.DataTable();
data.addColumn('string', 'ProjectName');
data.addColumn('number', 'WorkingUtilization');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].ProjectName, dataValues[i].WorkingUtilization]);
}
// Instantiate and draw our chart, passing in some options
var chart = new google.visualization.PieChart(document.getElementById('PieChartsDIV'));
var options = {
is3D: true,
};
chart.draw(data, options,
{
title: "Pie Chart of Google Chart in Asp.net",
position: "top",
fontsize: "14px",
chartArea: { width: '50%' },
});
}
</script>
</html>
代码文件如下所述
[WebMethod]
public static IList GetPieChartDetails(string emp_id ,string FromDate,string ToDate)
{
DataSet EmpData = LeaveUpdate.sp_GetDataForGraphByEmp(emp_id ,FromDate,ToDate);
List<ChartDetails> l = new List<ChartDetails>();
for (int i = 0; i < EmpData.Tables[0].Rows.Count; i++)
{
ChartDetails ll = new ChartDetails();
ll.ProjectName = EmpData.Tables[0].Rows[i]["ProjectName"].ToString();
ll.WorkingUtilization = Convert.ToDecimal(EmpData.Tables[0].Rows[i]["WorkingUtilization"].ToString());
l.Add(ll);
}
#region Commented Code
//SqlCommand cmd = new SqlCommand("sp_GetDataForGraphByEmp", con);
// cmd.CommandType = CommandType.StoredProcedure;
// SqlDataAdapter da = new SqlDataAdapter();
// da.SelectCommand = cmd;
// DataTable dt = new DataTable();
// da.Fill(dt);
// List<ChartDetails> dataList = new List<ChartDetails>();
// foreach (DataRow dtrow in dt.Rows)
// {
// ChartDetails details = new ChartDetails();
// details.ProjectName = dtrow[0].ToString();
// details.WorkingUtilization = Convert.ToInt32(dtrow[1]);
// dataList.Add(details);
// }
#endregion
return l;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetProjectName();
}
}
public class ChartDetails
{
public string ProjectName { get; set; }
public decimal WorkingUtilization { get; set; }
}
public void GetProjectName()
{
try
{
DataSet ds = Dotcom.BOL.EmployeeMST.GetAllEmployee();
ddlEmployee.DataTextField = "Name";
ddlEmployee.DataValueField = "Emp_ID";
ddlEmployee.DataSource = ds;
ddlEmployee.DataBind();
ddlEmployee.Items.Insert(0, new ListItem("--All--", "0"));
DataSet ds1 = Dotcom.BOL.EmployeeMST.GetAllEmployee();
lbData.DataTextField = "Name";
lbData.DataValueField = "Emp_ID";
lbData.DataSource = ds1;
lbData.DataBind();
lbData.Items.Insert(0, new ListItem("--All--", "0"));
}
catch (Exception)
{ }
}
我正在使用的存储过程如下
alter proc sp_GetDataForGraphByEmp
@Emp_ID nvarchar(150),
@Fromdate nvarchar(50),
@Todate nvarchar(50)
as
begin
select ProjectName,SUM(CAST(WorkingUtilization AS float)) AS WorkingUtilization
from TimesheetReport
where (CAST(Emp_ID AS nvarchar(150))) in (@Emp_ID) and DateSubmit Between @Fromdate and @Todate
group by ProjectName
end
在上面的代码中,我手动输入&#34; In(30,36)&#34;然后我能够获取数据,但当我运行代码时,它给我空值。 即使我在下面的代码中得到null。
exec sp_GetDataForGraphByEmp '30,36'
我应该如何获得填充多个员工ID
的饼图答案 0 :(得分:0)
您需要重新调整您的方式。数据库中的Emp_ID似乎是int
。您将值作为nvarchar传递,然后CAST
db列值。这将大大降低性能。您传递给IN
语句的字符串也将被解释为字符串而不是值列表。更好的选择是:
1)将@Emp_ID
参数保留为nvarchar,然后将该字符串解析为临时表。在存储过程中加入此表。
2)用表值参数替换nvarchar参数。在您的存储过程中加入此。
后者将按如下方式实施:
a)在SQL中创建表类型:
CREATE TYPE tbl_emp_ids AS TABLE (
emp_id INT,
primary key (emp_id));
b)修改存储过程:
alter proc sp_GetDataForGraphByEmp
@Emp_ID tbl_emp_ids READONLY,
@Fromdate nvarchar(50),
@Todate nvarchar(50)
as
begin
select ProjectName,SUM(CAST(WorkingUtilization AS float)) AS WorkingUtilization
from TimesheetReport t
inner join @emp_id i
on i.Emp_ID = t.Emp_ID
where DateSubmit Between @Fromdate and @Todate
group by ProjectName
end
c)更改c#代码以传递表格:
DataTable idRecords = new DataTable();
// Populate your input table by splitting the emp_id string by ',' and adding each array item to the table
SqlCommand cmd = new SqlCommand("sp_GetDataForGraphByEmp", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter param = (SqlParameter)sqlClientFactory.CreateParameter();
param.ParameterName = "@Emp_ID";
param.SqlDbType = SqlDbType.Structured;
param.Direction = ParameterDirection.Input;
param.Value = idRecords;
cmd.Parameters.Add(param);
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cmd;
DataTable dt = new DataTable();
da.Fill(dt);