How to detect when a Time Slider started to playing

#1

Hello friends, I’m new in the community and I recently started working on a new project for my company which requires an interface with a dashboard, which will be displayed on a screen in real time, so that the management of the company can check the evolution of the sales constantly.

For this dashboard I am using the play function of the Time Slider, which in my opinion is an incredible functionality.

Now, what I need is to show in a counter, to detect the total time that the play function has been executing without stopping.

Something like this:

counter
counter.gif1280×720 642 KB

Is there a way to detect when a Time Slider started playing in order to run the counter?

Best regards.

#2

I think that maybe what you are needing is to use the start and stop events that the toolkit provides for the Time Slider player.

Greetings.

#3

Hi @wrulh88 welcome to the community, what @joseph90 says is a correct solution. Chartfactor Toolkit, provides a series of events for the different visualizations, which you can find in the following link in the chartfactor documentation.

For your specific case, the recommendation is that you use the player: start and player: stop events of the Time Slider.

Below I illustrate an example that can help you for what you are needing.

The element to show the timer:
<span id="minutes">00</span>:<span id="seconds">00</span>

The javascript code:

    var sec = 0;
    var timer;

    function pad(val) {
        return val > 9 ? val : "0" + val;
    }

Then you can use the events as follow:

myData.graph("Time Slider")
	         .set("grid", grid)
		 .set('single-period', false)
		 .set("player", {
			"enable": true,
			'pin-left': false,
			'step': 1,
			'step-unit': 'month',
			'refresh': 2,
			'animation-delay': 0.5,
			'live': false,
			'autoplay': false,
			})
    .element('v1')
	.on('player:start', event => {
		timer = setInterval(function () {
                    document.getElementById("seconds").innerHTML = pad(++sec % 60);
                    document.getElementById("minutes").innerHTML = pad(parseInt(sec / 60, 10));
		}, 1000);
	})
	.on('player:stop', event => {
		clearInterval(timer);
	})
    .execute();

Hope this can help you. If you have any other questions please do not hesitate to contact us.

Best regards.

#4

Hi @juan.dominguez, that was exactly what I needed, awesome. Thanks a lot.

Best regards.