Skip to Content
Product Information
Author's profile photo Ryan Lee

Using Timer in Your Analytic Applications

In this blog I would like to introduce the new Timer object in Analytics Designer. Timer object enables you to start a timer to trigger timing events. By leveraging the feature of a timer, you can realize different scenarios such as:

  • create animations
  • send notifications to end users regularly
  • refresh your analytics application in a certain interval of time

To further delve into its usage, I will share two samples for your reference. You can download the samples from the bottom of this blog.

Script APIs:

Timer_1.start(delayInSeconds: number): void

Timer_1.stop(): void

Timer_1.isRunning(): boolean

Timer_1.onTimeout // event

Sample 1. Create Animation

Let’s look at the demo first:

In this demo, we add animation to the header above, making the widgets shift from right to left repeatedly.

We use Timer + Layout API.

//Start a timer


//To make the Widget moving, the Layout API is used to dynamically change the position of the widget.

// These are the 4 panels we want to apply animation to

PANELS = [Panel_10, Panel_11, Panel_12, Panel_13];

var numOfPanels = PANELS.length;

var moveStep = 0.1;


var firstPanel = PANELS[0];

var leftMarginOfFirstPanel = firstPanel.getLayout().getLeft().value;

var panelWidth = firstPanel.getLayout().getWidth().value;

var padding = 0;


if(leftMarginOfFirstPanel >= moveStep) {

                for(var i = 0 ; i < numOfPanels; i++) {

                                var layout = PANELS[i].getLayout();

                                layout.setLeft(LayoutValue.create(layout.getLeft().value - moveStep, LayoutUnit.Percent));


} else { // Move the first panel to end

                firstPanel.getLayout().setLeft(LayoutValue.create((panelWidth + padding)* numOfPanels, LayoutUnit.Percent));

                for(i = 0 ; i < numOfPanels - 1; i++) {

                                PANELS[i] = PANELS[i+1];


                PANELS[i] = firstPanel;




Sample 2. Automatically play the application

This is an interesting requirement coming from customer. This customer wants an application that is displayed in a big screen with its pages automatically played in turn similar as a page book and can be manually stopped at will.

We can do it with Timer + TabStrip.

In order to make a TabStrip widget look like a page book, a small tip is to hide the header of the Tabstrip for example using a shape, then use API TabStrip_1.setSelectedKey(TabID) to dynamicly “slide” the tab.

Then start a timer to repeat this action.

//Here’s the code sample to switch and slide the tabs.

var key = TabStrip_1.getSelectedKey();

if (key === "Tab_1")




else if (key === "Tab_2")





else if (key === "Tab_3")





Hope this blog could give you some inspirations when you meet similar use cases.

Enjoy your exploration with Analytics Designer!

  • Sample applications(based on release 2019.20): link
  • Documentation: link

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Bart Van Boxelaer
      Bart Van Boxelaer

      Hi Ryan,

      I am trying to implement your 'sample 1'.


      I created a variable for 'PANELS' of type 'Panel' and 'Array' enabled.

      In my main 'Animation_Panel' I have 4 panels. However, only the first panel is moving.
      The other 3 panels are not moving.

      All 4 panels are defined the same. Width is a % and left margin is px.


      Any idea why the other 3 panels are not moving?

      Author's profile photo Bart Van Boxelaer
      Bart Van Boxelaer

      I managed to get all my 4 panels moving.


      However, now only the first panel is moved to the end (i.e. going around in a loop).

      The other 3 panels stop moving when they are completely on the left hand side.