Show Message When Chart Has No Data
You can configure the Kendo UI Chart to display a message when its data source is empty.
The following example demonstrates how to achieve such behavior. Note that the <div> element of the message is positioned and decorated through CSS.
<div class="container">
<div id="chart"></div>
<div class="overlay"><div>No data available</div></div>
</div>
<script>
$("#chart").kendoChart({
dataSource: {
transport: {
read: function(e) {
setTimeout(function() {
e.success([{
value: 1
}, {
value: 2
}]);
}, 2000);
}
}
},
seriesDefaults: {
type: "pie"
},
series: [{
field: "value",
name: "Foo"
}],
dataBound: function(e) {
var view = e.sender.dataSource.view();
$(".overlay").toggle(view.length === 0);
}
});
</script>
<style>
.container {
position: relative;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .2;
filter: alpha(opacity=60);
background-color: #6495ed;
text-align: center;
}
.overlay div {
position: relative;
font-size: 34px;
margin-top: -17px;
top: 50%;
}
</style>