Loading indicator for Kendo UI?

Question

I have nearly 32 chart tiles in my dashboard, 300 pixels squares. I am showing charts in each of them. I am using REST Apis to fetch data into these charts in JSON format.

In the document.ready() function, I call the functions to populate the charts. But initially the UI will be blank for 10 seconds and then it shows all the charts.

Then I moved all the functions into the window.load() function. But in that approach, it shows all the divs, but does not show the charts until 10 seconds.

What I need to do is show the chart one by one as it finishes loading, and show a loading indicator for all the other charts which are loading.

Any way to do this?

    $(window).load(function () {


    GetHistoricGoals();
    GetActivityGoals();
    GetWaterGoals();

    stepsChart("#Steps", "Steps", "week", null);

    distanceChart("#Distance", "Distance", "week", null);
    floorChart("#Floors", "Floors", "week", null);
    caloriesChart("#Calories", "Calories Out", "week", null);

    sedentaryActivityChart("#SedentaryActivity", "Sedentary Minutes", "week", null);
    lightlyActivityChart("#LightlyActivity", "Lightly Active Minutes", "week", null);
    fairlyActivityChart("#FairlyActivity", "Fairly Active Minutes", "week", null);
    veryActivityChart("#VeryActivity", "Very Active Minutes", "week", null);

    ActivityChart("#Activity", "Active Minutes", "week", null);

    weightsChart("#Weights", "Weight", "week", null);
    bmiChart("#BMI", "BMI", "week", null);

    sleepActualChart("#SleepActual", "Minutes Sleep", "week", null);
    sleepInBedChart("#SleepInBed", "Minutes In Bed", "week", null);
    sleepChart("#Sleep", "Sleep", "week", null);

    foodChart("#Food", "Food", "week", null);
    waterChart("#Water", "Water", "week", null);

 -----------------
------------------
    heartRateChart("#HeartRate", "Heart Rate", "week", null);

    IntraDayChart("steps", kendo.toString(new Date(), "MM/dd/yyyy"), "orangered");

    deviceDetails("summary");
    profileDetails("#MainContent");
    friendsDetails("Friends", 4);
    badgesDetails("Badge", 4);

    DeviceAlarm();
    OrderCharts();

});

This function below is just one function to show the "Steps Chart". there is 32 such functions.

function stepsChart(container, title, period1, period2) {

            var dSource = getJsonData("ActivitySummary", period1, period2, "<% = Session["FitbitUserId1"] %>");

            dSource.one("change", function () {
                if (container == "#Steps_Detailed") {
                    var _data = dSource.data();
                    ShowSummary("Steps_Figures", _data, "steps");

                    $("#Steps_Data").kendoGrid({
                        dataSource: {
                            data: AddGoalsToGrid("Steps", _data)
                        },
                        sortable: true,
                        columns: [{
                            field: "createddate",
                            title: "Date",
                            type: "date",
                            format: "{0:MM/dd/yyyy}"
                        },
                        {
                            field: "steps",
                            title: "Steps",
                            format: "{0:n0}",
                            attributes: { style: "text-align:right;" }
                        },
                        {
                            field: "goal",
                            title: "Goal",
                            format: "{0:n0}",
                            attributes: { style: "text-align:right;" }
                        },
                        {
                            field: "percentage",
                            title: "Percentage",
                            format: "{0:n2}%",
                            attributes: { style: "text-align:right;" }
                        }]
                    });
                }
                dSource.data(MergeSeriesData(dSource.data(), GetEndPoints("activity", period1, period2)));

                var chart = $("#Steps_Detailed").data("kendoChart");
                if (chart) { chart.redraw(); }

            });

            $(container).kendoChart({

                dataBound: chart_dataBound,                

                dataSource: dSource,
                seriesColors: ["SteelBlue"],
                chartArea: {
                    background: ""
                },
                title: {
                    text: title,
                    font: "14px Arial,Helvetica,sans-serif bold",
                    color: "SteelBlue"
                },
                legend: {
                    visible: false,
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "column",
                    gap: .5,
                    overlay: {
                        gradient: "none"
                    }
                },
                series: [{
                    name: "steps",
                    field: "steps",
                    categoryField: "createddate",
                    aggregate: "sum",
                    color: GetColor,
                    tooltip:
                        {
                            visible: true,
                            template: GetToolTip
                        }
                }],
                categoryAxis: {
                    type: "date",
                    baseUnit: getBaseUnit(),
                    labels: {
                        rotation: -45,
                        dateFormats: {
                            days: getDateFormat(),
                            weeks: getDateFormat(),
                            years: getDateFormat()
                        },
                        step: getSteps()
                    },
                    majorGridLines: {
                        visible: false
                    },
                    majorTicks: {
                        visible: false
                    }
                },
                valueAxis: {
                    majorGridLines: {
                        visible: true
                    },
                    line: {
                        visible: false
                    },

                    labels: {
                        template: "#= kendo.format('{0}',value/1000)#K"
                    }
                },             

            });
        }

I tried

 requestStart: function () {
                    kendo.ui.progress($("#loading"), true);
                },
                requestEnd: function () {
                    kendo.ui.progress($("#loading"), false);

                }

But it didn't make difference...

Answer 1

First thing first; If you want your UI to remain responsive, you'll have to load your chart asynchronously. Then you'll have to find a way to manage those asynchronous function. For this, I strongly recommend jquery's deferred.

Once you implemented the deferred for each charts initialization function, you'll have to update your progressbar. For this, you'll have to use a notification system (with jquery deferred, you can use notify / progress) to update your progress bar based on the number of chart (nbRendred / nbTotal).

Kendo has a progressbar widget but like every UI component's, it won't work very well if you use it with a synchronous function called from the main thread.