This is a migrated thread and some comments may be shown as answers.

Chart unable to render Json string from asp.net

2 Answers 93 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
CH
Top achievements
Rank 1
CH asked on 28 Jan 2013, 08:17 AM
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 Answers, 1 is accepted

Sort by
0
CH
Top achievements
Rank 1
answered on 28 Jan 2013, 12:55 PM
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
0
Michael
Top achievements
Rank 1
answered on 07 May 2013, 11:21 PM
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/
Tags
General Discussions
Asked by
CH
Top achievements
Rank 1
Answers by
CH
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Share this question
or