Kendo Grid and Chart
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.default.min.css">
<div id="grid"></div>
<div id="chart"></div>
JavaScript
var sharedDataSource = new kendo.data.DataSource({
data: [
{ id: 1, value: 10, item: "Item1" },
{ id: 2, value: 12, item: "Item2" },
],
schema: {
model: {
id: "id",
fields: {
id: { type: "number", editable: false },
value: { type: "number" },
item: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: sharedDataSource,
autoBind: false,
editable: true,
toolbar: ["save", "cancel"]
});
$("#chart").kendoChart({
dataSource: sharedDataSource,
autoBind: false,
categoryAxis: {
field: "item"
},
series: [
{ field: "value", name: "Value" }
]
});
sharedDataSource.read();