Setting a Refresh Rate on Your Dashboard for Real-Time Data Updates

Keeping your dashboard up-to-date with real-time data is essential to make informed decisions. Luzmo provides various built-in data connectors and plugins to fetch data from external sources. Whenever a dashboard is loaded, the data will be requested from the data source in real time. Note: if you have enabled query caching or Warp, the data may be served from there.

When you want the data on an already loaded dashboards to stay up to date in real time there are a few possibilities with Luzmo. Fortunately, Luzmo provides developers with different methods to notify the dashboard of changes made to external data sources and refresh the dashboard at regular intervals. In this article, we'll cover how to set a refresh rate on your Luzmo dashboard so it displays changes in data in real-time.

To notify Luzmo that changes have been made to an external data source, you can use one of the following methods. Note: using these methods does not clear the query cache for the dataset.

1. RefreshData method: For data using one of our built-in connectors or a plugin, this can be done from your frontend via the refreshData method. This method is used to refresh the data of a specific chart when the id of that chart is supplied or refresh the data of the entire dashboard (when you don't specify an itemId). To use this method, you'll need to refer to our developer documentation on the refreshData method. You can use the setInterval() method to schedule the refresh every X seconds.

setInterval(() => {
  // Get the component reference, here we query the component that has an id "dashboard".
  const dashboardComponent = document.getElementById("dashboard");

  // Item ID is optional without an itemId this will refresh the data in all charts.
  dashboardComponent.refreshData("< item id >") 
    .then(() => {  
      console.log("Dashboard refreshed");
    });
// Refresh every 30 seconds
}, 30000);

2. Data update action: For data using one of our built-in connectors or a plugin, this can be done from your backend via the data update action. This endpoint can be used to signal changes to external data (e.g., databases or plugins) to Luzmo. Luzmo will then update ALL open dashboards using this data, so data can be seen changing in real-time. To use this method, you'll need to refer to our developer documentation on the data update action.

curl https://api.luzmo.com/0.1.0/data 
{
	"action": "update",
	"key": "$LUZMO_API_KEY",
	"token": "$LUZMO_API_TOKEN",
	"version": "0.1.0",
	"id": "<your data id>",
	"properties": {}
}

3. Data_update webhook: For data coming from a plugin, the data_update webhook can be called whenever a dataset for a particular connection has new data available. Calling this webhook will immediately update ALL open dashboards using this data. To use this method, you'll need to refer to our developer documentation on the data_update webhook.

POST https://api.luzmo.com/0.1.0/webhook/plugin/data_updated

Content-Type: application/json
X-Secret: "<your_plugins_x-secret>"

{
 "slug": "<your_plugin_slug>",
 "user_id": "<user ID>",
 "key": "my_key",
 "dataset_id": "<dataset ID>"
}