Show Overlay while Loading

In some cases, the loading of a Chart might take longer time than the user expects. For such scenarios, you can configure the Kendo UI Chart to show the progress of the process.

The example below demonstrates how to display a loading indicator while the data of a Kendo UI Chart is loading. The loading indicator is cleared in the render event.

Important

Replace it with the dataBound event for Kendo UI versions prior to 2014.3.1119.

Example

    <div class="chart-wrap" style="position: relative;">
      <div id="chart"></div>
      <div class="chart-loading"></div>
    </div>
    <script>
      var ds = new kendo.data.DataSource({
        transport: {
          read: function(e) {
            // Delay response to simulate remote data
            setTimeout(function() {
              e.success([{
                value: 1
              }, {
                value: 2
              }, {
                value: 3
              }]);
            }, 2000);
          }
        }
      });

      $("#chart").kendoChart({
        dataSource: ds,
        series: [{
          field: "value"
        }],
        render: function(e) {
          // Clear up the loading indicator for this chart
          var loading = $(".chart-loading", e.sender.element.parent());
          kendo.ui.progress(loading, false);
        }
      });

      $(document).ready(function() {
        // Spin all loading indicators on the page
        kendo.ui.progress($(".chart-loading"), true);
      });
    </script>

See Also

• Chart JavaScript API Reference
• Drawing API
• How to Aggregate Data in Pie Charts
• How to Draw on Scatter Plots Surface
• How to Expand Clickable Area of Points
• How to Fit PDF Exported Chart to Page
• How to Handle Right Click in Charts
• How to Place Text in the Center of Donut Charts
• How to Render Custom Plot Bands
• How to Set Different Marker Types for Grouped Line Charts
• How to Use Linear Gradient As Background in Bars

For more runnable examples on Kendo UI Charts, browse the How To documentation folder.