KendoUI chart - how do I show animation while loading data?

kendo-ui kendo-datasource kendo-chart
Katya S picture Katya S · Jul 22, 2013 · Viewed 19.6k times · Source

I have a KendoUI chart generated with JavaScript. Is there a way to clear the plotArea with a command? For the purpose of showing a "Loading..." image while waiting for a DataSource to read remote data.

Thanks

Answer

OnaBai picture OnaBai · Jul 22, 2013

Displaying and hiding the loading animation is:

// Display progress
kendo.ui.progress($("#loading"), true);

// Hide progress
kendo.ui.progress($("#loading"), false);

Then you should use requestStart and requestEnd events in the DataSource for knowing when to show or hide the progress animation.

The DataSource of the Chart would be:

dataSource    : {
    transport   : {
        read: {
            url:...
        }
    },
    sort        : {
        field: "year",
        dir  : "asc"
    },
    requestStart: function () {
        kendo.ui.progress($("#loading"), true);
    },
    requestEnd  : function () {
        kendo.ui.progress($("#loading"), false);

    }
},

Example here: http://jsfiddle.net/OnaBai/kcptr/

Related questions

Getting checked rows from kendo grid

I have a kendo grid with a checked box column .I have been trying to get the dataitem rows when the corresponding check boxes are checked.On click of a button , I need to get only the checked rows in …

Read More
how to manually set column value in kendo grid

I was able to set the remark on console but I have no idea how to set the remark value into the grid once the user save the changes. is there anyway to set value into kendo grid manually? example …

Read More
What is best way to bind a Kendo UI dropdownlist to a ViewModel that is populated by a datasource?

I have a kendoUI dropdownlist that is in a template and is bound to a ViewModel, along with a span that is bound to the data item that is selected in the dropdownlist: <p> <label>Appointment …

Read More