thank u for reply.

I found that in this link.

Google Chart APIs: Google (Pie / Doughnut) Chart example with database in ASP.Net

Hi ezrawy,

Refer below example with Chart.js plugin.

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script type="text/javascript">
    $(function () {
        LoadChart();
    });
    function LoadChart() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChart",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                $("#dvChart").html("");
                $("#dvLegend").html("");
                var data = eval(r.d);
                var el = document.createElement('canvas');
                $("#dvChart")[0].appendChild(el);
                var ctx = el.getContext('2d');

                var chartData = [];
                var chartLabel = [];
                var chartColor = [];
                for (var i = 0; i < data.length; i++) {
                    chartData.push(data[i].value);
                    chartLabel.push(data[i].text);
                    chartColor.push(data[i].color);
                }

                var data = [{
                    data: chartData,
                    labels: chartLabel,
                    backgroundColor: chartColor,
                    borderColor: "#fff"
                }];

                var options = {
                    events: false,
                    animation: {
                        duration: 500,
                        easing: "easeOutQuart",
                        onComplete: function () {
                            var ctx = this.chart.ctx;
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';
                            this.data.datasets.forEach(function (dataset) {
                                for (var i = 0; i < dataset.data.length; i++) {
                                    var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                                        total = dataset._meta[Object.keys(dataset._meta)[0]].total,
                                        mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius) / 2,
                                        start_angle = model.startAngle,
                                        end_angle = model.endAngle,
                                        mid_angle = start_angle + (end_angle - start_angle) / 2;

                                    var x = mid_radius * Math.cos(mid_angle);
                                    var y = mid_radius * Math.sin(mid_angle);

                                    ctx.fillStyle = '#fff';
                                    if (i == 3) {
                                        ctx.fillStyle = '#444';
                                    }
                                    var percent = String(Math.round(dataset.data[i] / total * 100)) + "%";
                                    ctx.fillText(dataset.data[i], model.x + x, model.y + y);
                                    ctx.fillText(percent, model.x + x, model.y + y + 15);
                                }
                            });
                        }
                    }
                };

                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        datasets: data
                    },
                    options: options
                });
            },
            failure: function (response) {
                alert('There was an error.');
            }
        });
    }
</script>
<div id="dvChart"></div>

Code

C#

[WebMethod]
public static string GetChart()
{
    string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        string query = string.Format("select TOP 5 shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", "Canada");
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = query;
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                StringBuilder sb = new StringBuilder();
                sb.Append("[");
                while (sdr.Read())
                {
                    sb.Append("{");
                    System.Threading.Thread.Sleep(50);
                    string color = String.Format("#{0:X6}", new Random().Next(0x1000000));
                    sb.Append(string.Format("text :'{0}', value:{1}, color: '{2}'", sdr[0], sdr[1], color));
                    sb.Append("},");
                }
                sb = sb.Remove(sb.Length - 1, 1);
                sb.Append("]");
                con.Close();
                return sb.ToString();
            }
        }
    }
}

VB.Net

<WebMethod()>
Public Shared Function GetChart() As String
    Dim constr As String = ConfigurationManager.ConnectionStrings("ConString").ConnectionString
    Using con As New SqlConnection(constr)
        Dim query As String = String.Format("select TOP 5 shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", "Canada")
        Using cmd As New SqlCommand()
            cmd.CommandText = query
            cmd.CommandType = CommandType.Text
            cmd.Connection = con
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                Dim sb As New StringBuilder()
                sb.Append("[")
                While sdr.Read()
                    sb.Append("{")
                    System.Threading.Thread.Sleep(50)
                    Dim color As String = [String].Format("#{0:X6}", New Random().Next(&H1000000))
                    sb.Append(String.Format("text :'{0}', value:{1}, color: '{2}'", sdr(0), sdr(1), color))
                    sb.Append("},")
                End While
                sb = sb.Remove(sb.Length - 1, 1)
                sb.Append("]")
                con.Close()
                Return sb.ToString()
            End Using
        End Using
    End Using
End Function

Screenshot