How to bind Json remote data to Kendo pie charts

Question

I'm new in kendoui application , i have create a pie chart application ( for this i fallow kendoui Demo samples. ) when i run the kendo sample (Remote json data) it's working fine but when i run application with my url it gives error like below.

enter image description here

But when i run the application with hard coding json data it's works fine. here is the json (which is return from my url)

         [
               { "Amount": 239.9700, "RangeValue": "####below" },
               { "Amount": 4000.0000, "RangeValue": "#1_$_30#Days" },
               { "Amount": 5000.0000, "RangeValue": "#31_$_60#Days" },
               { "Amount": 79.9900, "RangeValue": "#61_$_90#Days" },
               { "Amount": 3000.0000, "RangeValue": "Over_$_90" }
        ]

Here is the coding what i did..

       <!DOCTYPE html>
     <html>
      <head>
        <title>Pie labels</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link href="Portal/Content/kendo/2012.2.710/kendo.common.min.css"      rel="stylesheet" type="text/css" />
       <link href="Portal/Piechart/kendo.default.min.css" rel="stylesheet">
       <link href="Portal/Piechart/kendo.dataviz.min.css" rel="stylesheet">
       <link href="Portal/Piechart/kendo.dataviz.default.min.css" rel="stylesheet">
       <script src="Portal/Piechart/jquery.min.js"></script>
      <script src="Portal/Piechart/kendo.dataviz.min.js"></script>

    </head>
   <body>
       <div id="example" class="k-content">
       <div class="chart-wrapper">
           <div id="chart"></div>
         </div>
       <script>
        var CustomerData;
        var customername;

        var AgingData = [
                { "Amount": 239.9700, "RangeValue": "####below" },
                { "Amount": 4000.0000, "RangeValue": "#1_$_30#Days" },
                { "Amount": 5000.0000, "RangeValue": "#31_$_60#Days" },
                { "Amount": 79.9900, "RangeValue": "#61_$_90#Days" },
                { "Amount": 3000.0000, "RangeValue": "Over_$_90" }
            ]

        function BindData() {
            var Url = "http://localhost/CustomerPortal/get/agingchart/2013-12-01/90/30/Fabrikam/1/1?format=json";
            alert("start");
            CustomerData = new kendo.data.DataSource({
                transport: {
                    read: Url,
                    dataType: "json",
                    data: {
                        Accept: "application/json"
                    }

                },

            });
            CustomerData.read();//

            //createChart();
            CustomerData.fetch(function () {
                var view = CustomerData.at(0);
                customername = "Fabrikam";

            });

            $("#chart").kendoChart({
                title: {
                    text: customername + "   Customer Account Graph"
                },
                legend: {
                    position: "Right"
                },
                chartArea: {
                    background: ""
                },

                dataSource: {
                    data: CustomerData
                },
                seriesDefaults: {
                    labels: {
                        visible: true,
                        background: "transparent",
                        template: "#= category #: #= value#"
                    }
                },
                series: [{
                    type: "pie",
                    field: "Amount",
                    categoryField: "RangeValue"

                }],
                seriesColors: ["#42a7ff", "#E99669", "#A6D5A6", "#cccccc", "#E56f9f"],
                tooltip: {
                    visible: true,
                    template: "${ category } - ${ value }"
                }
            });//Chart close



        };

        $(document).ready(BindData);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>

Please guide me how can i get pie chart with Remote json data...

Hi friends , i solved my problem . i just change the one line code dataSource: { data: CustomerData }, to dataSource:CustomerData — Victor Athoti., Dec 09 '13 at 07:40

t1nr2y · Answer 1 · 2013-12-09T15:02:26.817

I am fairly new to KendoUI as well, but I believe that your problem bit of code is here:

data: {
    Accept: "application/json"
}

I believe this "data" section would be necessary if you need to manipulate the incoming JSON data to match the object names Kendo is looking for, in your case "Amount" and "RangeValue". It may be that you do need to manipulate it. Put a function in there and a breakpoint to verify your data is good:

data: function (e) {
    console.log(e.Amount); //breakpoint here to see
}

To me, that error message is saying it is not getting an array as expected, or maybe the object array its getting back is not formatted correctly so it can not be sliced as it wants.

How to bind Json remote data to Kendo pie charts

1 Answers1