mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 14:29:36 +00:00
121 lines
3.7 KiB
HTML
Executable File
121 lines
3.7 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({
|
|
dataSource: {
|
|
transport: {
|
|
read: {
|
|
url: function() {
|
|
return "../content/dataviz/js/olympics-japan.json";
|
|
},
|
|
dataType: "json"
|
|
}
|
|
},
|
|
group: {
|
|
field: "country"
|
|
}
|
|
},
|
|
title: {
|
|
text: "Olypmic Medals Won by Japan"
|
|
},
|
|
legend: {
|
|
visible: false
|
|
},
|
|
chartArea: {
|
|
background: ""
|
|
},
|
|
series: [{
|
|
type: "bubble",
|
|
minSize: 0,
|
|
maxSize: 70,
|
|
xField: "year",
|
|
yField: "standing",
|
|
sizeField: "number",
|
|
colorField: "medalColor",
|
|
opacity: 0.9
|
|
}],
|
|
xAxis: {
|
|
labels: {
|
|
skip: 1,
|
|
margin: {top: -25}
|
|
},
|
|
majorUnit: 4,
|
|
min: 1980,
|
|
max: 2015,
|
|
majorGridLines: {
|
|
visible: false
|
|
},
|
|
line: {
|
|
visible: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
labels: {
|
|
step: 1,
|
|
skip: 1,
|
|
template: "#= value # place",
|
|
margin: {right: -30},
|
|
padding: {left: 20}
|
|
},
|
|
majorUnit: 1,
|
|
min: 0,
|
|
max: 3.7,
|
|
majorGridLines: {
|
|
visible: false
|
|
},
|
|
line: {
|
|
visible: false
|
|
}
|
|
},
|
|
tooltip: {
|
|
visible: true,
|
|
template: "#= value.x #: #= value.size # Medals"
|
|
}
|
|
});
|
|
}
|
|
|
|
$(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>
|