Start New Discussion within our Web Development Community

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="">
<head runat="server">
    <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" />

    <form id="form1" runat="server">

    <div id="example">
    <div id="chart"></div>
      function createChart() {
                        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: {
                                    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

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



My json data is:

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

Hi pin89,

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

var jsonData = [
//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++){

// Sample Kendo Chart Code
    title: {
         text: "Duration by ID"
    series: [
         { name: "Durations", data: durationList }
         categories: idList
This article has been dead for over six months. Start a new discussion instead.