Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
Ask a Question

real time, timer/counter

mdmaala
Communicator
‎03-14-2019 02:32 AM

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
Reply

kamlesh_vaghela
SplunkTrust
SplunkTrust
‎03-14-2019 04:11 AM

@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
Reply

mdmaala
Communicator
‎03-14-2019 07:13 PM

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
Reply

nickhills
Ultra Champion
‎03-14-2019 02:51 AM

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
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Splunk Community Badges!

  Hey everyone! Ready to earn some serious bragging rights in the community? Along with our existing badges ...

How to find the worst searches in your Splunk environment and how to fix them

Everyone knows Splunk is a powerful platform for running searches and doing data analytics. Your ...

Share Your Feedback: On Admin Config Service (ACS)!

Help Us Build a Better Admin Config Service Experience (ACS)   We Want Your Feedback on Admin Config Service ...