Dashboards & Visualizations

real time, timer/counter

mdmaala
Communicator

hello! Good afternoon,

i want to create a timer, wherein when I push the switch to turn on the green light, the timer starts and then stops after when the switch is turned off . then when I turn it on again, the timer should reset again to zero, and start a new timer . is this possible?

thank you so much!

Tags (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@mdmaala,

You can achieve this by using Javascript and CSS in your dashboard.

Check below dashboard code.
timer.xml

<dashboard script="timer.js" stylesheet="timer.css">
  <label>Timer</label>
  <row>
    <panel>
      <html>
        <h2>Toggle Switch</h2>

        <label class="switch">
          <input type="checkbox" />
          <span class="slider round"></span>
        </label>
        <div id="divCount" style="height: 1.5em; font-size: 2em; color: red;"></div>
      </html>
    </panel>
  </row>
</dashboard>

timer.js

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {

    var count = 0;
    function Increament() {
        count++;
        console.log(count);
        document.getElementById("divCount").innerHTML = "Timer: "+count;
    }
    var myVar;

    $(document).ready(function () {
        var checkbox = document.querySelector('input[type="checkbox"]');

        checkbox.addEventListener('change', function () {
            if (checkbox.checked) {
              // do this
              console.log('Checked');
              myVar = setInterval(Increament, 1000);
            } else {
              // do that
              console.log('Not checked');
               clearInterval(myVar);
               count = 0;
               document.getElementById("divCount").innerHTML = "Timer: "+count;
            }
          });

    });


});

timer.css

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Please try and let me know if any issue.

Thanks

0 Karma

mdmaala
Communicator

thank u so much @kamlesh_vaghela , i'll try and i'll get back to let you know if this worked. thank you so much!

0 Karma

nickhills
Ultra Champion

That's not really the type of function Splunk offers.
Whilst I'm not saying that this can't be done, you probably shouldn't.

What's your use case?

If my comment helps, please give it a thumbs up!
0 Karma
Get Updates on the Splunk Community!

Splunk AI Assistant for SPL | Key Use Cases to Unlock the Power of SPL

Splunk AI Assistant for SPL | Key Use Cases to Unlock the Power of SPL  The Splunk AI Assistant for SPL ...

Buttercup Games: Further Dashboarding Techniques (Part 5)

This series of blogs assumes you have already completed the Splunk Enterprise Search Tutorial as it uses the ...

Customers Increasingly Choose Splunk for Observability

For the second year in a row, Splunk was recognized as a Leader in the 2024 Gartner® Magic Quadrant™ for ...