Kendo Grid and Chart
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#chart1" data-toggle="tab">Chart 1</a>
</li>
<li><a data-target="#chart2" data-toggle="tab">Chart 2</a>
</li>
<li><a data-target="#chart3" data-toggle="tab">Chart 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="chart1">
<div id="chart1"></div>
</div>
<div class="tab-pane fade in" id="chart2">
<div id="chart2
"></div>
</div>
<div class="tab-pane fade in" id="chart3">
<div id="chart3"></div>
</div>
</div>
JavaScript
var sharedDataSource = new kendo.data.DataSource({
data: [{
id: 1,
value: 10,
item: "Item1"
}, {
id: 2,
value: 12,
item: "Item2"
}, {
id: 3,
value: 15,
item: "Item3"
}, {
id: 4,
value: 18,
item: "Item4"
}, {
id: 5,
value: 22,
item: "Item5"
}, {
id: 6,
value: 11,
item: "Item6"
}],
schema: {
model: {
id: "id",
fields: {
id: {
type: "number",
editable: false
},
value: {
type: "number"
},
item: {
type: "string"
}
}
}
}
});
$("#chart1").kendoChart({
dataSource: sharedDataSource,
autoBind: false,
categoryAxis: {
field: "item"
},
series: [{
field: "value",
name: "Value"
}]
});
$("#chart2").kendoChart({
dataSource: sharedDataSource,
autoBind: false,
categoryAxis: {
field: "item"
},
series: [{
field: "value",
name: "Value"
}]
});
$("#chart3").kendoChart({
dataSource: sharedDataSource,
autoBind: false,
categoryAxis: {
field: "item"
},
series: [{
field: "value",
name: "Value"
}]
});
$("#chart4").kendoChart({
dataSource: sharedDataSource,
autoBind: false,
categoryAxis: {
field: "item"
},
series: [{
field: "value",
name: "Value"
}]
});
sharedDataSource.read();