传递多个ID来获取饼图数据

时间:2017-06-28 10:53:32

标签: c# asp.net sql-server-2008 stored-procedures

我的问题基于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

的饼图

1 个答案:

答案 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);