Skip to main content

Timers

Timers allow you to call any type of trigger, including APIs, repeatedly at a timed interval.

Auto-refresh a dashboard with a Timer​

We can refresh any component's data automatically with a Timer. For this example we'll show you how to do it for a chart component, but it works equally as well with tables, maps, and any other Component.

Start by dragging the Chart component from the Components panel to the empty canvas. Set the Chart Header to Number of Signups, the X axis title to Day of month and the Y axis title to User Signups.

Drag and drop a chart component onto the canvas and define the title and axis properties

To populate the chart from an external source, we can use the Superblocks API builder. In this case, we will use a JavaScript step that generates sample user signup data for us.

  1. Create a new backend API with a JavaScript step
  2. Rename API1 to getSignups
  3. Copy and paste the following code to the JavaScript step
  data = [];

  for(var i=1; i<10; i++){

    const date = i;
    const value = Math.floor(Math.random() * 60) + 1;

    point = {};
    point.date = date;
    point.value = value;
    data = [point, ...data];
  }

  return data;

Create a new API to pull data from your data sources and manipulate with JavaScript or Python

In the application User Interface, click on the chart to open the Properties panel. To connect the results from getSignups API to the chart, replace the example JSON with {{getSignups.response}} in the Chart Data field and Run the API. Finally set Chart Type to Line Chart.

Components can be linked to API output to visualize and report on your data

Turn off the Loading Animation setting for a smooth animation.

Using timers with charts creates realtime dashboards

Next, link the Chart Component to a Timer that updates it at an intervals.

  1. Click on Timers (clock icon) in the left sidebar
  2. Click on + Add timer
  3. Select Timer1
  4. Set Interval to 5000 (5 seconds)
  5. Click on Triggers
  6. Set the Action Type to Run APIs
  7. Set the API to getSignups

Timers collect new data and present them back to charts and tables in dashboards

That's it, your new User Signup Dashboard will now automatically update with the latest signups every 5 seconds.

Starting and stopping timers​

Starting timers on page load​

You can control whether a Timer starts on page load by the checking the box in the Timers edit interface.

Control the execution of API on page load

Starting and stopping from component triggers​

You can hook up any Component trigger (like a Button component's onClick) to start and stop Timers. Just choose the Start/stop Timer option from the triggers menu.

You can also start or stop timers from code inside of a Run JS action. See Programmatic usage (using code to control Timers)

Timers can be controlled by triggers from event handlers on components

Starting and stopping timers from the UI​

You can start or stop a timer from the UI by clicking the start/stop button in the timers edit interface.

Develop and troubleshoot timers by stopping them in edit mode

Programmatic usage (using code to control Timers)​

You can start or stop a Timer using code in Run JS (in browser) actions by referencing its name and calling start or stop.

Timer1.start();
Timer1.stop();

You can also "toggle" a timer without needing to know if it's started or stopped by calling toggle.

Timer1.toggle();

Properties​

Timers properties can be accessed from other frontend components and backend APIs by adding the name of the Timer, and dot referencing the property. For a Timer named Timer1:

PropertyDescription
Timer1.isActiveAccess whether the Timer is currently running

Troubleshooting​

How do I not show the loading animation when my API is running?​

Turn off the Loading Animation setting in the Properties Panel of your Charts Component to update your Charts without showing a loading animation.

Using timers with charts creates realtime dashboards