Handling JSON Arrays Returned From ASP.NET Web Services With jQuery

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Web.Services;
namespace VIS {
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class WebMyService: System.Web.Services.WebService {
        string connetionString = null;
        SqlConnection sqlCnn;
        SqlCommand sqlCmd;
        SqlDataAdapter adapter = new SqlDataAdapter();
        DataSet dsbind = new DataSet();
        int i = 0;
        string sql = null;
        public class Gender {
            public string employeeid {
                get;
                set;
            }
            public string male {
                get;
                set;
            }
            public string female {
                get;
                set;
            }
        }
        public string JSONConversion(DataTable dt) {
                DataSet ds = new DataSet();
                ds.Merge(dt);
                StringBuilder JsonString = new StringBuilder();
                JsonString.Append("{");
                JsonString.Append("\"Data\"");
                JsonString.Append(":");
                if (ds != null && ds.Tables[0].Rows.Count > 0) {
                    JsonString.Append("[");
                    for (int i = 0; i < ds.Tables[0].Rows.Count; i++) {
                        JsonString.Append("{");
                        for (int j = 0; j < ds.Tables[0].Columns.Count; j++) {
                            if (j < ds.Tables[0].Columns.Count - 1) {
                                JsonString.Append("\"" + ds.Tables[0].Columns[j].ColumnName.ToString() + "\":" + "\"" + ds.Tables[0].Rows[i][j].ToString() + "\",");
                            } else if (j == ds.Tables[0].Columns.Count - 1) {
                                JsonString.Append("\"" + ds.Tables[0].Columns[j].ColumnName.ToString() + "\":" + "\"" + ds.Tables[0].Rows[i][j].ToString() + "\"");
                            }
                        }
                        if (i == ds.Tables[0].Rows.Count - 1) {
                            JsonString.Append("}");
                        } else {
                            JsonString.Append("},");
                        }
                    }
                    JsonString.Append("]");
                    JsonString.Append("}");
                    return JsonString.ToString();
                } else {
                    return null;
                }
            }
            [WebMethod]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public Gender[] GenderWise() {
            connetionString = "Data Source=ServerName;Initial Catalog=DatabaseName;User ID=UserName;Password=Password";
            sql = "select distinct(empid) as employeeid, count(case when gender='M' then 1 end) as Male, count(case when gender='F' then 1 end) as Female from V_CountOnGender";
            sqlCnn = new SqlConnection(connetionString);
            try {
                sqlCnn.Open();
                sqlCmd = new SqlCommand(sql, sqlCnn);
                adapter.SelectCommand = sqlCmd;
                adapter.Fill(dsbind);
                JavaScriptSerializer obj = new JavaScriptSerializer();
                string result = string.Empty;
                Gender[] arrlst = new Gender[dsbind.Tables[0].Rows.Count];
                if (dsbind.Tables[0].Rows.Count > 0) {
                    for (int i = 0; i < dsbind.Tables[0].Rows.Count; i++) {
                        Gender objgender = new Gender();
                        objgender.employeeid = dsbind.Tables[0].Rows[i]["employeeid"].ToString();
                        objgender.male = dsbind.Tables[0].Rows[i]["Male"].ToString();
                        objgender.female = dsbind.Tables[0].Rows[i]["Female"].ToString();
                        arrlst.SetValue(objgender, i);
                    }
                } else {
                    result = "No Record Found";
                }
            } catch (Exception ex) {}
            return arrlst;;
        }
    }
}
This will go into the < head > section of the page:
    <
    script type = "text/javascript"
src = "script/jquery-1.2.6.min.js" > < /script> <
    script type = "text/javascript" >
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: "/WebMyVoterService.asmx/GenderWise",
            processData: false,
            success: OnSuccess,
            failure: function(response) {
                alert("Can't be able to bind graph");
            },
            error: function(response) {
                alert("Can't be able to bind graph");
            }
        });

        function OnSuccess(response) {
            var dpmale = [];
            var dpfemale = [];
            for (var i = 0; i < response.d.length; i++) {
                var obj = response.d[i];
                var datamale = {
                    y: parseInt(obj.male),
                    label: obj.employeeid,
                };
                var datafemale = {
                    y: parseInt(obj.female),
                    label: obj.employeeid,
                };
                dpmale.push(datamale);
                dpfemale.push(datafemale);
            }
            var chart = new CanvasJS.Chart("chartContainerbar", {
                animationEnabled: true,
                axisX: {
                    interval: 1,
                    labelFontSize: 10,
                    lineThickness: 0,
                },
                axisY2: {
                    valueFormatString: "0",
                    lineThickness: 0,
                    labelFontSize: 10,
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    verticalAlign: "top",
                    horizontalAlign: "center",
                    fontSize: 10,
                },
                data: [{
                    type: "stackedBar",
                    showInLegend: true,
                    name: "Male",
                    axisYType: "secondary",
                    color: "#f8d347",
                    dataPoints: dpmale
                }, {
                    type: "stackedBar",
                    showInLegend: true,
                    name: "Female",
                    axisYType: "secondary",
                    color: "#6ccac9",
                    dataPoints: dpfemale
                }]
            });
            chart.render();
        }
    }); <
/script>