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

JSON data binding very basic

1 Answer 227 Views

Charts

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

Safak asked on 03 May 2012, 03:07 PM

Hi , I am totally new user of kendo but i cant even bind the data yet please give me some solutions :

<!DOCTYPE html>

<html>

<head>

<script src="jquery.min.js"></script>

<script src="kendo.dataviz.min.js"></script>

<script src="console.js"></script>

<link href="kendo.dataviz.min.css" rel="stylesheet" />

</head>

<body>

<div id="example" class="k-content">

<div class="chart-wrapper">

<div id="chart"></div>

</div>

<script>

function createChart() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "deneme.json",

dataType: "json",

contentType: "application/json; charset=utf-8"

}

});

$("#chart").kendoChart({

dataSource: dataSource,

theme: $(document).data("kendoSkin") || "default",

legend: {

position: "top",

},

chartArea: {

background: "",

},

series: [{

field: "value",

}],

categoryAxis: {

field: "year",

}

});

}

</script>

</div>

</body>

</html

>











JSON FILE : 



[ { "year": "2000", "value": 200 }, 

  { "year": "2001", "value": 450 }, 

  { "year": "2002", "value": 300 }, 

  { "year": "2003", "value": 125 },

]









They all in same directory.... 





Thanks

King regards

1 Answer, 1 is accepted

answered on 07 May 2012, 12:02 PM

Hi Safak,

Your code snippet looks OK - the definition of the dataSource is correct. I think the problem is caused by the fact that you define the chart in a function createChart(), however I don't see where you call it - could you please check that?
Please check our online documentation and demos for more detailed information. If you need further assistance, it will be best to provide a sample project that reproduces the case so we can investigate.

Kind regards,
Iliana Nikolova
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!