mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-03 01:01:41 +00:00
92 lines
2.9 KiB
HTML
Executable File
92 lines
2.9 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Binding to grouped 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>
|
|
function createChart() {
|
|
$("#chart").kendoChart({
|
|
title: {
|
|
text: "Wind Rose"
|
|
},
|
|
legend: {
|
|
position: "right",
|
|
labels: {
|
|
template: "#= (series.data[0] || {}).categoryText # m/s"
|
|
}
|
|
},
|
|
dataSource: {
|
|
transport: {
|
|
read: {
|
|
url: "../content/dataviz/js/wind-data.json",
|
|
dataType: "json"
|
|
}
|
|
},
|
|
group: {
|
|
field: "category",
|
|
dir: "asc"
|
|
},
|
|
sort: {
|
|
field: "dir",
|
|
dir: "asc"
|
|
}
|
|
},
|
|
seriesColors: ["#1b79e4", "#3b6ad3", "#5d5ac2",
|
|
"#8348ae", "#a23a9d", "#c42a8c", "#e51a7a"],
|
|
series: [{
|
|
type: "radarColumn",
|
|
stack: true,
|
|
field: "frequency",
|
|
categoryField: "dirText"
|
|
}],
|
|
valueAxis: {
|
|
visible: false
|
|
},
|
|
tooltip: {
|
|
template: "#= category # (#= dataItem.categoryText # m/s) #= value #%",
|
|
visible: true
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(createChart);
|
|
$(document).bind("kendo:skinChange", createChart);
|
|
</script>
|
|
</div>
|
|
|
|
|
|
|
|
<div class='demo-section'>
|
|
<h3>Note:</h3>
|
|
<p>
|
|
Security restrictions prevent this example from working in all browsers when the page is loaded from the file system (via file:// protocol).
|
|
If the demo is not working as expected, please host the Kendo folder on a web server.
|
|
</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|