This is a migrated thread and some comments may be shown as answers.
Show loading image on chart before load
7 Answers 284 Views
This is a migrated thread and some comments may be shown as answers.
Rick Aberle
Top achievements
Rank 1
Rick Aberle asked on 22 Feb 2012, 12:39 AM
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()
}

7 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 22 Feb 2012, 04:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rick Aberle
Top achievements
Rank 1
answered on 22 Feb 2012, 05:52 PM
thanks!
0
Frank
Top achievements
Rank 1
answered on 13 Oct 2012, 08:25 PM
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/
0
Ed
Top achievements
Rank 1
answered on 08 Aug 2013, 06:54 AM
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.
0
Daniel
Telerik team
answered on 13 Aug 2013, 07:07 AM
Hello,

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

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pete
Top achievements
Rank 1
answered on 24 Sep 2013, 09:00 PM
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?
0
Daniel
Telerik team
answered on 27 Sep 2013, 01:43 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Rick Aberle
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Rick Aberle
Top achievements
Rank 1
Frank
Top achievements
Rank 1
Ed
Top achievements
Rank 1
Pete
Top achievements
Rank 1
Share this question
or