Display 3D Donut chart on dropdown and calendar value selection using Highchart Plugin in ASP.Net

Hi bakhtawar,

I have created sample that full fill your requirement. You neet to change your query as per your requirement.

HTML

<div>
    <table>
        <tr>
            <td>
                <asp:DropDownList ID="ddlEmployee" runat="server">
                    <asp:ListItem Text="Select" Value="0" />                   
                    <asp:ListItem Text="5" Value="5" />
                </asp:DropDownList>
            </td>
            <td>
                <input id="orderDate" value="1900-01-02" runat="server" clientidmode="static" />
            </td>
            <td>
                <input id="requiredDate" value="1996-08-01" runat="server" clientidmode="static" />
            </td>
            <td>
                <asp:Button ID="btnSearch" Text="Search" runat="server" />
            </td>
        </tr>
    </table>
</div>
<div id="container">
</div>
<div>
    <script src="Script/jquery.min.js" type="text/javascript"></script>
    <script src="Script/highcharts.js" type="text/javascript"></script>
    <script src="Script/exporting.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnSearch').click(function () {
                var eId = $('[id*=ddlEmployee] option:selected')[0].value;
                var oDate = $('[id*=orderDate]').val();
                var rDate = $('[id*=requiredDate]').val();
                var obj = {};
                obj.empId = eId;
                obj.orderDate = oDate;
                obj.requiredDate = rDate;
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetVo2",
                    data: JSON.stringify(obj),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    cache: false,
                    success: function (result) {
                        var strArray = result.d;
                        var myarray = eval(strArray);
                        $('#container').highcharts({
                            chart: {
                                type: 'pie',
                                options3d: {
                                    enabled: true,
                                    alpha: 45
                                }
                            },
                            title: {
                                text: 'Contents of Highsoft\'s weekly fruit delivery'
                            },
                            subtitle: {
                                text: '3D donut in Highcharts'
                            },
                            plotOptions: {
                                pie: {
                                    innerSize: 100,
                                    depth: 45
                                }
                            },
                            series: [{
                                name: 'Delivered amount',
                                data: myarray
                            }]
                        });
                    }
                });
                return false;
            });
        });
    </script>
</div>

Code

[WebMethod]
public static string GetVo2(string empId, string orderDate, string requiredDate)
{
    List<object> datas = new List<object>();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(
            "SELECT ShipCity,SUM(Freight) Freight "
            + "FROM Orders "
            + "WHERE EmployeeID = @EmployeeID "
            + "AND OrderDate = @OrderDate OR RequiredDate = @RequiredDate "
            + "GROUP BY ShipCity"))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@EmployeeID", empId);
            cmd.Parameters.AddWithValue("@OrderDate", orderDate);
            cmd.Parameters.AddWithValue("@RequiredDate", requiredDate);
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    datas.Add(new
                    {
                        ShipCity = sdr["ShipCity"],
                        Freight = sdr["Freight"]
                    });
                }
            }
            con.Close();
        }
        string json = (new JavaScriptSerializer().Serialize(datas)).Replace('"', '\'').Replace("{", "[").Replace("}", "]").Replace("'ShipCity':", "").Replace("'Freight':", "");
        return json;
    }
}

Screenshot