Dashboards & Visualizations

Add clock to a panel dashboard

csimonnet
New Member

Hi,
I was wondering how can I create a panel with only a clock on it.
I tried to insert a html code an then add a javascript file but the panel is still empty.

xml dashboard:

<dashboard script="clock.js">
  <row>
    <panel>
      <html>
        <div class="clock"></div>
      </html>
    </panel>
</row>
</dashboard>

clock.js:

require([

    "splunkjs/ready!",

    "splunkjs/mvc/simplexml/ready!"

],
function clock() {// We create a new Date object and assign it to a variable called "time".
var time = new Date(),

    // Access the "getHours" method on the Date object with the dot accessor.
    hours = time.getHours(),

    // Access the "getMinutes" method with the dot accessor.
    minutes = time.getMinutes(),


    seconds = time.getSeconds();

document.querySelectorAll('.clock')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);

  function harold(standIn) {
    if (standIn < 10) {
      standIn = '0' + standIn
    }
    return standIn;
  }
}
setInterval(clock, 1000);
);

Did I miss something?

0 Karma
1 Solution

elliotproebstel
Champion

The syntax of your JS is a little off. I cleaned it up here:

require([
  "splunkjs/ready!",
  "splunkjs/mvc/simplexml/ready!"
], function() {
  function clock() {// We create a new Date object and assign it to a variable called "time".
    var time = new Date(), hours = time.getHours(), minutes = time.getMinutes(), seconds = time.getSeconds();
    document.querySelectorAll('.clock')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);

    function harold(standIn) {
      if (standIn < 10) {
        standIn = '0' + standIn
      }
      return standIn;
    }
  }
setInterval(clock, 1000);
});

After you've fixed your JS, you'll need to use the _bump function to get Splunk to pick up the new JS. So you'll visit http(s)://your.server.here:port/en-US/_bump
You can read more about using _bump here:
http://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/CustomizationOptions

View solution in original post

0 Karma

elliotproebstel
Champion

The syntax of your JS is a little off. I cleaned it up here:

require([
  "splunkjs/ready!",
  "splunkjs/mvc/simplexml/ready!"
], function() {
  function clock() {// We create a new Date object and assign it to a variable called "time".
    var time = new Date(), hours = time.getHours(), minutes = time.getMinutes(), seconds = time.getSeconds();
    document.querySelectorAll('.clock')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);

    function harold(standIn) {
      if (standIn < 10) {
        standIn = '0' + standIn
      }
      return standIn;
    }
  }
setInterval(clock, 1000);
});

After you've fixed your JS, you'll need to use the _bump function to get Splunk to pick up the new JS. So you'll visit http(s)://your.server.here:port/en-US/_bump
You can read more about using _bump here:
http://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/CustomizationOptions

0 Karma

csimonnet
New Member

Thanks!
It works

0 Karma

paramagurukarth
Builder

But it shows your client time (Time in which your browser is running)..

May be not inline with your data always. Please try to get server time..

0 Karma

elliotproebstel
Champion

Yes, this will always show client time, because JavaScript runs in the browser, not on the server. If you want server time, you'll need a query that gets sent to the server. I don't know off-hand what the right query would be for that, so this would make a good follow-up question presented in its own Answers post. Probably nobody will see the question buried here in comments, especially since the original question has been answered.

0 Karma
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!

Painting a Clearer Picture: Creating Cross-Domain Visibility with AI Canvas

    Thursday, June 25, 2026  |  11AM PDT / 2PM EDT  Duration: 1 Hour (Includes live Q&A) Register to ...

Analytics Workspace deprecation

As of Splunk Cloud Platform 10.4.2604 and Splunk Enterprise 10.4, Analytics Workspace is now deprecated. ...

Splunk Developer Day Recap: Building, Publishing, and Growing on the Splunk Platform

Splunk Developer Day brought the Splunk developer community together for a practical look at what it means to ...