Индикатор загрузки для пользовательского интерфейса Kendo?

Question

У меня есть почти 32 плитки диаграммы в моей приборной панели, 300 пикселей квадратов. Я показываю диаграммы в каждом из них. Я использую REST Apis для извлечения данных в эти диаграммы в формате JSON.

В функции document.ready() я вызываю функции для заполнения диаграмм. Но изначально пользовательский интерфейс будет пустым в течение 10 секунд, а затем отобразит все диаграммы.

Затем я переместил все функции в функцию window.load(). Но в этом подходе он показывает все div, но не показывает диаграммы до 10 секунд.

Что мне нужно сделать, это показать график один за другим, когда он заканчивает загрузку, и показать индикатор загрузки для всех остальных графиков, которые загружаются.

Любой способ сделать это?

$(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(); 

}); 

Эта функция, приведенная ниже, является лишь одной из функций, показывающей «Шаги». существует 32 таких функции.

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" 
        } 
       },    

      }); 
     } 

Я попытался

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

       } 

Но это не делает разницы ...

Answer 1

Первое первым; Если вы хотите, чтобы ваш пользовательский интерфейс оставался отзывчивым, вам придется загружать диаграмму асинхронно. Затем вам нужно будет найти способ управления этой асинхронной функцией. Для этого я настоятельно рекомендую jquery отложить.

После того как вы внедрили отложенную для каждой функции инициализации диаграммы, вам нужно будет обновить панель прогресса. Для этого вам нужно будет использовать систему уведомлений (с отсрочкой jquery, вы можете использовать уведомление/прогресс), чтобы обновить индикатор выполнения на основе количества диаграмм (nbRendred/nbTotal).

У Kendo есть виджет progressbar, но, как и каждый компонент пользовательского интерфейса, он не будет работать очень хорошо, если вы используете его с синхронной функцией, вызываемой из основного потока.