Chart unable to render Json string from asp.net

3 posts, 0 answers
  1. CH
    CH avatar
    48 posts
    Member since:
    Aug 2010

    Posted 28 Jan 2013 Link to this post

    Hi Kendo Team,
    I received a funny behaviour of KendoChat (please refer to the attachment) . Need help in what i have done wrong? I am using asp.net 3.5 framework and below are my code:

    KendoUI.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Services;
     
     
    public partial class KendoUI : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
             
        }
     
         [WebMethod]
        public static string GetJson()
        {
           System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
                    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                    Dictionary<string, object> row;
       
                    for (int i = 0; i <= 5; i++) {
                        row = new Dictionary<string, object>();
     
                            row.Add("country", "Singapore");
                            row.Add("year", (2000 + i).ToString() );
                            row.Add("value", 50 + i);
                         
                        rows.Add(row);
     
                    }
                    return serializer.Serialize(rows);
     
      
     
        }
    }

    KendoUI.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="KendoUI.aspx.cs" Inherits="KendoUI" %>
     
     
    <!doctype html >
    <html>
    <head runat="server">
        <link href="KendoCSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
     
     <script src="KendoJs/jquery.min.js" type="text/javascript"></script>
    <script src="KendoJs/kendo.dataviz.min.js" type="text/javascript"></script>
    <script src="KendoJs/kendo.data.min.js" type="text/javascript"></script>
     
     
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
                <div class="chart-wrapper">
            <div id="chart" ></div>
            <div id="test" />
        </div>       
        </div>
        </form>
    </body>
     
      
        <script>
            $(document).ready(function () {
            
                $.ajax({
                    type: "POST",
                    url: "KendoUI.aspx/GetJson",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
     
                        if (data != "") {
                      
                            $("#test").html(internetUsers);
     
                            $("#chart").kendoChart({
                                theme: $(document).data("kendoSkin") || "default",
                                dataSource: {
                                    data: internetUsers
                                },
                                title: {
                                    text: "Internet Users"
                                },
                                legend: {
                                    position: "bottom"
                                },
                                seriesDefaults: {
                                    type: "line",
                                    labels: {
                                        visible: true,
                                        format: "{0}%"
                                    }
                                },
                                series: [{
                                    field: "value",
                                    name: "Singapore"
                                }],
                                valueAxis: {
                                    labels: {
                                        format: "{0}%"
                                    }
                                },
                                categoryAxis: {
                                    field: "year"
                                }
                            });
                        }
     
                    }
     
                })
     
     
            });
                </script>
    </html>            
  2. CH
    CH avatar
    48 posts
    Member since:
    Aug 2010

    Posted 28 Jan 2013 Link to this post

    Hi,
    found the solution...
    for those who are interested, below is the code:

    http://stackoverflow.com/questions/2998455/asp-net-webmethod-returns-json-wrapped-in-quotes


    regards,
    CH
  3. Kendo UI is VS 2017 Ready
  4. Michael
    Michael avatar
    19 posts
    Member since:
    Oct 2011

    Posted 07 May 2013 Link to this post

    See my answer on the StackOverflow page, but the short is that the entire approach is wrong which causes double-escaping. Here is a great explanation: http://encosia.com/asp-net-web-services-mistake-manual-json-serialization/
Back to Top