Chart kendo exsample
Chart kendo exsample Details
by chanaka1
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">
<div id="chart"></div>
JavaScript
var stats = [
{ value: 30, date: new Date("2011/12/20") },
{ value: 50, date: new Date("2011/12/21") },
{ value: 45, date: new Date("2011/12/22") },
{ value: 40, date: new Date("2011/12/23") },
{ value: 35, date: new Date("2011/12/24") },
{ value: 40, date: new Date("2011/12/25") },
{ value: 42, date: new Date("2011/12/26") },
{ value: 40, date: new Date("2011/12/27") },
{ value: 35, date: new Date("2011/12/28") },
{ value: 43, date: new Date("2011/12/29") },
{ value: 38, date: new Date("2011/12/30") },
{ value: 30, date: new Date("2011/12/31") },
{ value: 48, date: new Date("2012/01/01") },
{ value: 50, date: new Date("2012/01/02") },
{ value: 55, date: new Date("2012/01/03") },
{ value: 35, date: new Date("2012/01/04") },
{ value: 30, date: new Date("2012/01/05") }
];
$("#chart").kendoChart({
dataSource: {
data: stats
},
series: [{
type: "column",
aggregate: "sum",
field: "value",
categoryField: "date"
}],
categoryAxis: {
baseUnit: "months",
majorGridLines: {
visible: false
}
},
valueAxis: {
line: {
visible: false
}
}
});