Как заполнить данные из sql для диаграммы пончика Морриса?

---

Привет ,

<script type="text/javascript">
    $(document).ready(function () {
        debugger;
        /* MORRIS DONUT CHART
              ----------------------------------------*/
        Morris.Donut({
            element: 'morris-donut-chart',
            data: [{
                label: "Arun",
                value: 27000
            }, {
                label: "Saumya",
                value: 5500
            }, {
                label: "Nilesh",
                value: 5500
            }, {
                label: "Tejas",
                value: 5500
            }, {
                label: "Raj",
                value: 27000
            }],
            resize: true
        });
    });
</script>

это те данные, которые я хочу принести из базы данных, пожалуйста, предложите


ниже приведено то, что я пробовал до сих пор

[WebMethod]
public static List<ChartDetails> GetPiechartData()
{
    using (SqlConnection con = new SqlConnection(ApConfig.GetConectionString))
    {
        SqlCommand cmd = new SqlCommand("Usp_Getdata", 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.PlanName = dtrow[0].ToString();
            details.PaymentAmount = Convert.ToInt32(dtrow[1]);

            dataList.Add(details);
        }
        return dataList;
    }
}

и по сценарию

<script type="text/javascript">
    $(function () {
        debugger;
        $.ajax(
        {
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            url: 'Home.aspx/GetPiechartData',
            data: '{}',
            success: function (response) {
                Morris.Donut({
                    element: 'donut-example',
                    data: response
                });
            },

            error: function () {
                alert("Error loading data! Please try again.");
            }
        });
    })
</script>

<div class="col-md-3 col-sm-12 col-xs-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            Donut Chart Example
        </div>
        <div class="panel-body">
            <div id="morris-donut-chart"></div>
        </div>
    </div>
</div>

---