Show loading image on chart before load

[Rick Aberle]

I'm trying to show the "kendo.ui.progress" or just an image over the div before the chart loads the data. I have up too 10 charts on my dashboard at one time so there is a lag between each of them loading and it looks werid with just a blank graph. I'm getting the data from a webservice and I've tried adding an loading-image class to the charts div but nothing I have tried has worked. Can anyone help me out.

this is an example of one of my charts:

var dsOrderHis = null;

 

 

$(document).ready(function()

{

     args.startDate = startDate; 
     args.endDate = endDate;

     args.filterBy = filterBy;

     args.userIds = userIds;

     dsOrderHis = new kendo.data.DataSource(

        { transport: { read: { cache: false,

          url: appUrl + "/Services/ArgosyDashBoardService.svc/orderHistory",

          dataType: "json", contentType: "application/json; charset=utf-8", type: "POST" },

      parameterMap: function(options, operation) { return JSON.stringify(args) } },

     schema: { data: "OrderHistoryResult" },

    change: function() {

        var dataCount = $("#LoadOrderHistoryDiv").data("kendoChart").dataSource.view().length;

           if (dataCount <= 0) { setTimeout("LoadOrderHistoryHideSvg();", 400) }

            else { 
        $("#LoadOrderHistoryDiv svg").each(function() { $(this).fadeIn() });

        setTimeout("LoadOrderHistoryAddIcon();", 100) } }

});

$('#LoadOrderHistoryDiv').kendoChart({

    theme: currentTheme,

    title: { text: 'Order: History' },

    dataSource: dsOrderHis, legend: { position: "bottom" },

    series: [{ type: "line", field: "YAxis"}],

    categoryAxis: { field: "XAxisLabel", labels: { rotation: 42} },

    tooltip: { visible: true, template: " #= value # orders placed in #= category # .", padding: 9 },

 legend: { visible: false} })

});

 

//used for data changes

function LoadOrderHistory()

{

    var chart = $("#LoadOrderHistoryDiv").data("kendoChart");

    args.startDate = startDate;

    args.endDate = endDate;

    args.filterBy = filterBy;

    args.userIds = userIds;

    kendo.ui.progress($("#LoadOrderHistoryDiv"), true);

    chart.dataSource.read()

}

[Daniel]

Hello Rick,

I posted my answer in the support ticket you have opened. For convenience I am pasting my reply below:

**********************************************************************************************************************
This can be achieved by positioning a div element with background image over the Chart. The onDateBound event can be used to hide the image once the data is loaded. Here is a sample in JSFiddle.

**********************************************************************************************************************

Regards,
Daniel
the Telerik team

[Rick Aberle]

thanks!

[Frank]

I stumbled upon this topic via Google, so anyone also interested in showing a progress bar whilst loading the chart I have updated the code to use the kendo progress bar. Please see:

http://jsfiddle.net/hjLhe/22/

[Ed]

I'm using MVC Extensions and I see that I can hook into the DataBound event via the Event.DataBound (see this link), but how do I set the progress bar running to begin with using MVC Extensions?  I like the way this fiddle is using the kendo.ui.progress, but I don't see the progress widget in the MVC Extensions bag of tricks.

[Daniel]

Hello,

There isn't a progress widget. You should use the progress JavaScript method.

Regards,
Daniel
Telerik

[Pete]

Every example I've seen of showing a progress indicator on a Kendo chart has based the progress indicator on data retrieval only, with the assumption that as soon as the data has been successfully retrieved, the chart will render it instantly. The issue I'm wrestling with is that I'm building a line chart with multiple series, each of which holds thousands of data points. In this scenario, even after the data has been retrieved, it still takes the chart around 5 seconds to render (after it's been successfully databound). What I'd really like to do is show the progress indicator at the beginning of data retrieval, but leave it displaying until the chart has completely finished rendering (which the databound event does not accurately reflect). Is there any kind of "onRenderComplete" (or equivalent) event that I can use?

[Daniel]

Hello Pete,

You could use a timetout in the dataBound event:

function dataBound(e) {
    setTimeout(function () {
        kendo.ui.progress($("#chart"), false);
    });
}

Since the thread will be blocked by the browser while it processes the elements, the function will be called after the elements are rendered. Regards,
Daniel
Telerik