mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-03 01:01:41 +00:00
233 lines
6.6 KiB
HTML
Executable File
233 lines
6.6 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Binding to local data</title>
|
|
<meta charset="utf-8">
|
|
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/jszip.min.js"></script>
|
|
<script src="../../js/kendo.all.min.js"></script>
|
|
<script src="../content/shared/js/console.js"></script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<a class="offline-button" href="../index.html">Back</a>
|
|
|
|
<div id="example">
|
|
<div class="demo-section k-content wide">
|
|
<div id="chart"></div>
|
|
</div>
|
|
<script>
|
|
var blogComments = [ {
|
|
"blog": "My blog",
|
|
"day": "1",
|
|
"value": 3,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "2",
|
|
"value": 7,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "3",
|
|
"value": 12,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "4",
|
|
"value": 15,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "5",
|
|
"value": 6,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "6",
|
|
"value": 23,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "7",
|
|
"value": 12,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "8",
|
|
"value": 10,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "9",
|
|
"value": 17,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "10",
|
|
"value": 13,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "11",
|
|
"value": 14,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "12",
|
|
"value": 15,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "13",
|
|
"value": 3,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "14",
|
|
"value": 6,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "15",
|
|
"value": 23,
|
|
"userColor": "#565656"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "16",
|
|
"value": 25,
|
|
"userColor": "#565656"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "17",
|
|
"value": 21,
|
|
"userColor": "#565656"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "18",
|
|
"value": 18,
|
|
"userColor": "#565656"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "19",
|
|
"value": 17,
|
|
"userColor": "#565656"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "20",
|
|
"value": 16,
|
|
"userColor": "#565656"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "21",
|
|
"value": 11,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "22",
|
|
"value": 3,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "23",
|
|
"value": 8,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "24",
|
|
"value": 5,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "25",
|
|
"value": 4,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "26",
|
|
"value": 1,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "27",
|
|
"value": 7,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "28",
|
|
"value": 6,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "29",
|
|
"value": 3,
|
|
"userColor": "#ffd600"
|
|
}, {
|
|
"blog": "My blog",
|
|
"day": "30",
|
|
"value": 6,
|
|
"userColor": "#ffd600"
|
|
} ];
|
|
|
|
function createChart() {
|
|
$("#chart").kendoChart({
|
|
dataSource: {
|
|
data: blogComments
|
|
},
|
|
title: {
|
|
align: "left",
|
|
text: "Comments per day"
|
|
},
|
|
legend: {
|
|
visible: false
|
|
},
|
|
seriesDefaults: {
|
|
type: "column",
|
|
labels: {
|
|
visible: true,
|
|
background: "transparent"
|
|
}
|
|
},
|
|
series: [{
|
|
field: "value",
|
|
categoryField: "day",
|
|
colorField: "userColor"
|
|
}],
|
|
valueAxis: {
|
|
max: 28,
|
|
majorGridLines: {
|
|
visible: false
|
|
},
|
|
visible: false
|
|
},
|
|
categoryAxis: {
|
|
majorGridLines: {
|
|
visible: false
|
|
},
|
|
line: {
|
|
visible: false
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(createChart);
|
|
$(document).bind("kendo:skinChange", createChart);
|
|
</script>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|