High Chart JQuery plugin to create (Pie / Doughnut) Chart example with database in ASP.Net

Here i have creatyed sample. Refer the below code.

SQL

CREATE PROC GetVehicleDetails
	@Id INT = NULL
AS
BEGIN
	DECLARE @Temp AS TABLE(ID INT,MID INT,VName VARCHAR(50),Mileage INT,Name VARCHAR(50))
	INSERT INTO @Temp VALUES(10366, 1, '143dg', 351, 'car')
	INSERT INTO @Temp VALUES(10366, 2, 'dfg34', 189, 'bus')
	INSERT INTO @Temp VALUES(10366, 3, 'dfg', 10, 'Auto')
	INSERT INTO @Temp VALUES(10444, 4, '1dg', 251, 'car')
	INSERT INTO @Temp VALUES(10444, 5, 'dfg1', 89, 'bus')
	INSERT INTO @Temp VALUES(10444, 6, 'dased', 10, 'Auto')
	INSERT INTO @Temp VALUES(10366, 7, 'yhjtyuj', 10, 'Auto')
	INSERT INTO @Temp VALUES(10366, 8, 'qweqr', 10, 'Auto')

	SELECT VName,COUNT(VName) Amount FROM @Temp WHERE ID = @Id GROUP BY VName
END

HTML

<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" />
            <asp:BoundField DataField="FFID" HeaderText="FF ID" />
            <asp:BoundField DataField="OwnerName" HeaderText="Owner Name" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lbViewChart" Text="View Chart" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <br />
    <div id="container">
    </div>
</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 () {
            $('[id*=lbViewChart]').on('click', function () {
                var row = $(this).closest('tr');
                var Id = row.find('td')[1].firstChild.data;
                var obj = {};
                obj.ffId = Id;
                GetData(obj);
                return false;
            });
        });
        function GetData(obj) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '<%=ResolveUrl("~/Default.aspx/GetChartData")%>',
                data: JSON.stringify(obj),
                dataType: "json",
                success: function (Result) {
                    Result = Result.d;
                    var data = [];
                    for (var i in Result) {
                        var serie = new Array(Result[i][0], Result[i][1]);
                        data.push(serie);
                    }
                    DreawChart(data);
                },
                error: function (Result) {
                    alert("Error");
                }
            });
        }

        function DreawChart(series) {
            $('#container').highcharts({
                chart: { plotBackgroundColor: null, plotBorderWidth: 1, plotShadow: false },
                title: { text: 'Vehicle Details' },
                tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}', //</b>: {point.percentage:.1f} %',
                            style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Vehicle Details',
                    data: series
                }]
            });
        }
    </script>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] 
        { 
            new DataColumn("ID"), 
            new DataColumn("FFID"), 
            new DataColumn("OwnerName") 
        });
        dt.Rows.Add("1", "10366", "ABC_USER");
        dt.Rows.Add("2", "10444", "DEF_USER");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

[WebMethod]
public static List<object> GetChartData(int ffId)
{
    List<object> vehicles = new List<object>();
    String constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection con = new SqlConnection(constr);
    con.Open();
    SqlCommand cmd = new SqlCommand("GetVehicleDetails", con);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@Id", ffId);
    SqlDataReader sdr = cmd.ExecuteReader();
    while (sdr.Read())
    {
        vehicles.Add(new List<object> { sdr["VName"], sdr["Amount"] });
    }
    con.Close();

    return vehicles;
}

Screenshot