Fiori/UI5 dashboard loads slowly with large IoT datasets in real-time

IOT SAP IoT
, , , , , , , ,
1

Our Fiori/UI5 dashboards displaying real-time IoT sensor data are taking 30-45 seconds to load when visualizing datasets with 10k+ data points. Users are complaining about the poor experience, especially when switching between different device groups or time ranges.

The dashboard fetches all data points via OData and renders them client-side in UI5 charts. I suspect we’re transferring too much data to the browser, but I’m not sure how to implement proper aggregation or pagination with IoT time-series data.

var oModel = new sap.ui.model.odata.v2.ODataModel("/iot/odata/v1");
oModel.read("/Measurements", {
  filters: [new Filter("deviceId", "EQ", deviceId)],
  success: function(oData) { /* render 10k points */ }
});

Has anyone optimized UI5 dashboards for large IoT datasets? Should I be doing server-side aggregation or implementing lazy loading?

2

Another often-missed optimization: implement lazy loading for chart data. Instead of loading all device groups at once, only fetch data for the currently visible chart. When users switch tabs or expand panels, trigger additional OData requests on demand. This dramatically reduces initial load time. Also consider implementing a loading skeleton or progressive rendering so users see something immediately rather than staring at a blank screen for 30+ seconds.

3

That makes sense. So if I’m displaying data for a 24-hour period, I should aggregate to 15-minute or hourly intervals on the server side? What’s the recommended approach for allowing users to zoom into finer granularity - do I need to implement dynamic aggregation based on the selected time range?

4

Exactly right on the dynamic aggregation. Implement a function that calculates appropriate aggregation intervals based on the time range:

  • 24 hours: 15-minute aggregation (96 points)
  • 7 days: 2-hour aggregation (84 points)
  • 30 days: 12-hour aggregation (60 points)

For OData, use $apply with aggregate functions. Also critical: add $top and $skip parameters for pagination if users need to drill into details. Don’t forget to optimize your OData service to use indexes on timestamp columns for fast aggregation queries. Server-side processing is key - never rely on client-side filtering or aggregation for large datasets.