Show an Empty Pie in the Chart When No Data Is Available

Environment

Product Version	2018.1.221
Product	Progress® Kendo UI® Chart for jQuery

Description

When my dataset is empty the pie chart is not showing. I want to show a blank pie chart when no data is found(i.e dataset is empty). What can I do?

Solution

We have a how-to article which shows a similar case - when there is no data, an overlay is displayed.

1. Modify the article above to use a circle with some text in using any CSS styles to alter it.
2. Add a handler to the dataBound event of the chart and check if there is any data(the article uses the data source view() method).

3. If there is data, hide the overlay:

       dataBound: function (e) {
         var view = e.sender.dataSource.view();
         $(".overlay").toggle(view.length === 0);
       }
   

The following example demonstrates how to toggle a circle overlay when there is no data in the Pie Chart.

    <div id="container">
      <div id="chart"></div>
      <div class="overlay">
        <div id="circle"><div id="no-data-text">No data available</div></div>
      </div>
    </div>
    <script>
      $("#chart").kendoChart({
        title: {
          text: "Exam Details"
        },
        legend: {
          visible: true,
          position: "top"
        },
        dataSource: {
          transport: {
            read: function(e) {
              setTimeout(function() {
                e.success([{PrimaryModality:"A",ModalityCount:2},{PrimaryModality:"B",ModalityCount:3}]);
              }, 1500);
            }
          },
          aggregate: { field: "ModalityCount", aggregate: "sum" }
        },
        seriesDefaults: {
          labels: {
            position: "center",
            visible: true,
            background: "transparent",
            template: "#= category # \n #= value#"
          }
        },
        series: [{
          type: "pie",
          field: "ModalityCount",
          categoryField: "PrimaryModality"
        }],
        tooltip: {
          visible: true,
          template: "${ category } - ${ value }%"
        },
        dataBound: function (e) {
          var view = e.sender.dataSource.view();
          $(".overlay").toggle(view.length === 0);
        }
      });
    </script>
    <style>
      #circle {
        height: 222px;
        width: 222px;
        font-size: 20px;
        border-radius: 50%;
        line-height: 200px;
        margin: 0 auto;
        cursor: default;
        border: 1px solid #999;
        position: relative;
        top: 10%;
        background-color: lightgrey;
      }
      .container {
        position: relative;
      }
      .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;     
        text-align: center;
      }
    </style>