mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-03 01:01:41 +00:00
92 lines
3.1 KiB
HTML
Executable File
92 lines
3.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MVVM</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="configurator">
|
|
<div class="header">Configurator</div>
|
|
<div class="box-col">
|
|
<div>
|
|
<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="demo-section k-content wide">
|
|
<div>
|
|
<h4>Hover some series</h4>
|
|
<div data-role="chart"
|
|
data-title="{ text: '1024x768 screen resolution trends for 2009', position: 'bottom' }"
|
|
data-series-defaults="{ type: 'funnel' }"
|
|
data-series="[{
|
|
field: 'share',
|
|
categoryField: 'resolution',
|
|
padding: 0
|
|
}]"
|
|
data-bind="visible: isVisible,
|
|
source: screenResolution,
|
|
events: { seriesHover: onSeriesHover }"
|
|
style="height: 250px;"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function createChart() {
|
|
var viewModel = kendo.observable({
|
|
isVisible: true,
|
|
onSeriesHover: function (e) {
|
|
kendoConsole.log(kendo.format("event :: seriesHover ({0} : {1})", e.category, e.value));
|
|
},
|
|
screenResolution: new kendo.data.DataSource({
|
|
transport: {
|
|
read: {
|
|
url: "../content/dataviz/js/screen_resolution.json",
|
|
dataType: "json"
|
|
}
|
|
},
|
|
filter: {
|
|
field: "year",
|
|
operator: "eq",
|
|
value: 2009
|
|
}
|
|
})
|
|
});
|
|
kendo.bind($("#example"), viewModel);
|
|
}
|
|
|
|
$(document).ready(createChart).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>
|