Display highchart on button click based on DropDownList value using jQuery HighChart plugin in ASP.Net

Hi bakhtawar,

Refer the below code. You need to replace the ' with " from the json array before returning.

HTML

<div>
    <asp:DropDownList runat="server" ID="regiondrop">
        <asp:ListItem Text="Mumbai" Value="1" />
        <asp:ListItem Text="Kolkata" Value="2" />
    </asp:DropDownList>
    <br />
    <asp:Button ID="Button5" runat="server" Text="Button" />
    <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*=Button5]').on('click', function () {
                var regId = $('[id*=regiondrop] option:selected')[0].value;
                var obj = {};
                obj.ID = regId;
                GetData(obj);
                return false;
            });
        });
        function GetData(obj) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '<%=ResolveUrl("~/Default2.aspx/GetVo")%>',
                data: JSON.stringify(obj),
                dataType: "json",
                success: function (Result) {
                    var data = Result.d;
                    DreawChart(data);
                },
                error: function (Result) {
                    alert("Error");
                }
            });
        }

        function DreawChart(result) {
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45
                    }
                },
                title: { text: 'Contents of Highsoft\'s weekly fruit delivery' },
                subtitle: { text: '3D donut in Highcharts' },
                tooltip: { pointFormat: '' }, //'{series.name}: <b>{point.percentage:.1f}%</b>'},
                plotOptions: {
                    pie: {
                        innerSize: 100,
                        depth: 45,
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{ name: 'Delivered amount', colorByPoint: true, data: JSON.parse(result)
                }]
            });
        }
    </script>
</div>

Code

[WebMethod]
public static string GetVo(string ID)
{        
    string data2 = "[";
    try
    {
        T1 DB = new T1();
        var rea = (from rv in DB.tabrv
                    join Reg in DB.tabre on rv.RegionID equals Reg.RegionID
                    join vv in DB.tabvv on rv.ID equals vv.ID
                    where Reg.Region = Convert.ToInt32(ID)
                    group vv by vv.VName into g
                    select new
                    {
                        Name = g.Key,
                        cnt = g.Select(t => t.Name).Count()
                    }).ToList();


        data2 += rea.ToList().Select(x => "['" + x.Name + "'," + x.cnt + "]")
            .Aggregate((a, b) => a + "," + b);
        data2 += "]";
    }
    catch (Exception ex)
    {
        throw new Exception();
        System.Web.HttpContext currentContext = System.Web.HttpContext.Current;
        currentContext.Response.Write("<script>alert('" + currentContext.Server.HtmlEncode(ex.ToString()) + "')</script>");
    }
    return data2.Replace('\'', '"');
}

Screenshot