Show a Message When the Chart Has No Data
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I display a message in the Chart when its data source is empty?
Solution
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;
background-color: #6495ed;
text-align: center;
}
.overlay div {
position: relative;
font-size: 34px;
margin-top: -17px;
top: 50%;
}
</style>