converting json data from datasource to javascript array

Question

pln89 0 Newbie Poster

11 Years Ago

Hi,
I am trying to develop an application with pie chart by using kendo ui framework. I created a datasource which type is json, but I need convert it to javascript array to draw the chart. my code is:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="View.aspx.cs" Inherits="JsonTest.View" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.3.min.js"></script> 
    <script src="Scripts/kendo/kendo.all.min.js"></script>
    <link href="Content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet" />
    <link href="Content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet" />

</head>
<body>
    <form id="form1" runat="server">

    <div id="example">
    <div id="chart"></div>
      <script>  
      function createChart() {
          $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Bar Grafik Deneme"
                        },
                        legend: {
                            position: "bottom",
                        },
                        seriesDefaults: {
                            labels: {
                                visible: true,
                                format: "{0}%"
                            }
                        },

                        categoryAxis: {
                            field: "ID"
                        },
                        chartArea: {
                            background: "green"
                        },
                        dataSource: {
                            transport: {
                                read: 
                                {
                                    type: "GET",
                                    url: "Machine.asmx/GetDurationString",
                                    dataType: "json",
                                    contentType: "application/json; chartset=utf-8"

                                },

                                series: [
                                {

                                    field: "Duration",
                                    categoryField: "ID",
                                    type: "pie",
                                    name: "ID",
                                    color: "#FFDC00"
                                }],

                                valueAxis: {
                                    labels: {
                                        format: "{0}%"
                                    }
                                },

                                tooltip: {
                                    visible: true,
                                    format: "{0}%"
                                }
                            });
                    }


                $(document).ready(function () {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);
                });

</script>

    </div>
    </form>
</body>
</html>

My json data is:
[{"ID":10,"Duration":24235},{"ID":21,"Duration":9034},{"ID":12,"Duration":13681},{"ID":1,"Duration":23053},{"ID":13,"Duration":22863},{"ID":22,"Duration":57163}]

I think series property of kendoChart requires js array so I must convert it to js array.
Thanks in advance.

javascript json kendo ui

2 Contributors
1 Reply
2K Views
2 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by gon1387

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gon1387 22 Newbie Poster · Answer 1 · 2013-01-24T12:50:43+00:00

Hi pin89,

Here's a sample implementation and extraction from the data format you have.

var jsonData = [
        {"ID":10,"Duration":24235},
        {"ID":21,"Duration":9034},
        {"ID":12,"Duration":13681},
        {"ID":1,"Duration":23053},
        {"ID":13,"Duration":22863},
        {"ID":22,"Duration":57163}
    ];
//container for the idList and duration in array
var idList = [];
var durationList = [];

//Extract data from the recieved json data
for(var i=0, dataLen = jsonData.length; i<datalen; i++){
    idList.push(jsonData[i].ID);
    durationList.push(jsonData[i].Duration);
}

// Sample Kendo Chart Code
$("#chart").kendoChart({
    title: {
         text: "Duration by ID"
    },
    series: [
         { name: "Durations", data: durationList }
    ],
    categoryAxis:{
         categories: idList
    }
});