Kendo MVC chart - how do I show animation while loading data?

Question

I have a Kendo chart generated with asp.net core. Is there a way to have a loading indicator on the MVC chart? while waiting for a DataSource to read remote data.

Thank You.

Answer 1

If you use a generic loading gif in your project and if you bring the chart data with AJAX call, you can show your loading gif before the AJAX call and hide after the result of the AJAX call. You can investitage a sample code below here:

function GetData(string id)
{
    $('#loading').show();
    $.ajax({
        type: "GET",
            url: "/Report/GetGraphicDefectList",
            datatype: "Json",
            data: {
                recordId: id
            },
            success: function (data) {
                if (data.length > 0) {
                    PushDataToChart();
                    $('#loading').hide();
                    event.preventDefault();
                    return false;
                }
                else{
                   $('#loading').hide();
                    event.preventDefault();
                    return false; 
                }
            },
            error: function () {
                $('#loading').hide();
                event.preventDefault();
                return false;
            }
        });
    };
}