How to create Kendo UI pie chart in asp.net web application?

In this article I will explain how to create Jquery pie chart in asp.net web application.

First we need to add web service to the web application. In that web service need write below code.

Web service code:

Add below code in after namespaces

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services.ScriptService]

Add below code in Web Method code

[System.Web.Services.WebMethod(EnableSession = true)]

    [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]

    public PortStatus[] GetData()

    {       

        List<PortStatus> objPortStatus = new List<PortStatus>();

        DataSet dsData = new DataSet();

        dsData = objInfo.GetataPort();

        if (dsData.Tables[0].Rows.Count > 0)

        {

            DataTable dtPort = dsData.Tables[0];

            if (dtPort != null && dtPort.Rows.Count > 0)

            {

              // Here You can add data to your parameters

objPortStatus. Percentage=

objPortStatus. Port =

objPortStatus. color =

            }

        }

        return objPortStatus.ToArray();

    }

Declare a class with below parameters

public class PortStatus

{

    public double Percentage { get; set; }

    public string Port { get; set; }

    public string color { get; set; }

}

ASP.NET .aspx page 

Add below Jquery code and KENDO UI code . Please add Necessary scripts file in Scripts folder.


<script src="Scripts/js/kendo.all.min.js" type="text/javascript"></script>
    <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

 // Jquery code for WebService connection

        $(function () { CreateDefaultChart(); });

        function CreateDefaultChart() {

            var dataSourceDefaultChart = new kendo.data.DataSource({

                type: "json",

                transport: {

                    read: {

                        type: "POST",

// WebService name and Method name

                        url: "WebService.asmx/GetData",

                        contentType: 'application/json; charset=utf-8',

                        datatype: "json"

                    }, //read

                    parameterMap: function (options) {

                        //return JSON.stringify(options);

                        return $.parseJSON(options);

                    } // parameterMap

                }, // transport

                serverFiltering: false,

                serverSorting: false,

                schema: {

                    data: "d",

                    model: {

                        fields: {

                            Port: { type: "string" },

                            Percentage: { type: "number" },

                            color: { type: "string" }

                        }

                    }

                }

            });

//Kendo UI code for Pie chart

            $("#chart").kendoChart({

                autoBind: true,

                dataSource: dataSourceDefaultChart,

                title: {

                    position: "top",

                    text: 'Overview'

                },

                legend: {

                    visible: true,

                    position: "bottom"

                },

                seriesDefaults: {

                    //type: "donut",

                    type: "pie",

                    labels: {

                        visible: true,

                        position: "outsideEnd",

                        background: "transparent",

                        template: "#= category #"

                    },

                    border: {

                        color: "#c1c1c1",

                        Opacity: '0.2'

                    }

                },

                seriesClick: function (e) {

                    BindData(e.category);

                },

                tooltip: {

                    visible: false,

                    format: "N0",

                    template: "#= category #"

                },

                series: [{ field: "Percentage", categoryField: "Port", Color: "color", visibleInLegendField: false}]

            });

        }

        function BindData(value) {

            var hdnField = document.getElementById("<%= hdnField.ClientID %>");

            hdnField.value = value;

            var clickButton = document.getElementById("<%= btnBind.ClientID %>");

            clickButton.click();

        }

    </script>

ASP.NET .aspx Design:

  <asp:Button ID="btnBind" runat="server" CssClass="hide" OnClick="btnBind_Click" />

    <asp:HiddenField ID="hdnField" runat="server" />

ASP.NET .ASPX.CS Code:

protected void btnBind_Click(object sender, EventArgs e)

    {

      // Here you can write the code for Data

        GetData();

    }