Live clock in pbi report

[duddys]

Hi, what is the easiest way to create live clock for my report? Iam in the need because I dont want to refresh the report to get the time, I need it live.

[v-mengmli-msft]

Hi @duddys ,

Do you want to get real-time date without refreshing report or data model? If so, you can try "Deneb" visual.

Here is my test for your reference.

1. Click Edit.

2. Choose one field.

3. Select "Vega".

4. Copy below code and run the code.

{ 
  "$schema": "https://vega.github.io/schema/vega/v5.json", 
  "description": "A simple digital clock visualization showing the current date and time.", 
  "width": "container", 
  "height": "container", 
  "autosize": {"type": "fit", "contains": "padding"}, 
  "signals": [ 
    { 
      "name": "currentDate", 
      "init": "now()", 
      "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "now()"}] 

    }, 

    { 
      "name": "currentYear", 
      "init": "year(currentDate)", 
      "on": [ 
        { 
          "events": {"signal": "currentDate"}, 

          "update": "year(currentDate)" 
        } 

      ] 

    }, 
    { 
      "name": "currentMonth", 
      "init": "month(currentDate)+1", 
      "on": [ 
        { 
          "events": {"signal": "currentDate"}, 
          "update": "month(currentDate)+1" 
        } 

      ] 

    }, 

    { 
      "name": "currentDay", 
      "init": "date(currentDate)", 
      "on": [ 
        { 
          "events": {"signal": "currentDate"}, 
          "update": "date(currentDate)" 
        } 

      ] 

    }, 

    { 

      "name": "currentHour", 
      "init": "hours(currentDate)", 
      "on": [ 

        { 
          "events": {"signal": "currentDate"}, 
          "update": "hours(currentDate)" 

        } 

      ] 

    }, 

    { 

      "name": "currentMinute", 
      "init": "minutes(currentDate)", 
      "on": [ 

        { 
          "events": {"signal": "currentDate"}, 
          "update": "minutes(currentDate)" 
        } 

      ] 

    }, 

    { 
      "name": "currentSecond", 
      "init": "seconds(currentDate)", 
      "on": [ 
        {"events": {"signal": "currentDate"}, "update": "seconds(currentDate)"} 
      ] 

    }, 

    { 
      "name": "fontSize", 
      "value": 24, 
      "on": [ 
        { 
          "events": {"type": "resize"}, 
          "update": "min(width, height) / 20" 
        } 

      ] 

    } 

  ], 

  "marks": [ 

    { 
      "type": "text", 
      "encode": { 
        "enter": { 
          "x": {"signal": "width / 2"}, 
          "y": {"signal": "height / 2"}, 
          "align": {"value": "center"}, 
          "baseline": {"value": "middle"} 
        }, 

        "update": { 
          "text": { 
            "signal": "format(currentYear, '04') + '-' + format(currentMonth, '02') + '-' + format(currentDay, '02') + ' ' + format(currentHour, '02') + ':' + format(currentMinute, '02') + ':' + format(currentSecond, '02')" 
          }, 
          "fontSize": {"signal": "fontSize"} 

        } 

      } 

    } 

  ] 

}

The result as below.

Link: Solved: Re: Create a digital clock in power bi desktop - Microsoft Fabric Community

Best regards,

Mengmeng Li

[Bibiano_Geraldo]

Hi @duddys ,

If you want a live clock that refresh every second like bellow, please consider the following steps:

 
1 - Download html content visual in appsource.

2- Create a mesure with the following html + css + javascript:

HTMLContentClock = 
"
<div style='
    width: 100%; 
    height: 100%; 
    padding: 15px; 
    border-radius: 10px; 
    color: white; 
    font-family: Arial, sans-serif; 
    font-size: 30px; 
    font-weight: bold; 
    text-align: center;'>
    <div id='clock'></div>
    <script type='text/javascript'>
        function updateClock() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            var timeString = hours + ':' + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
            document.getElementById('clock').innerHTML = timeString;
        }
        
        // Update the clock every 1000 milliseconds (1 second)
        setInterval(updateClock, 1000);
        
        // Initial clock update
        updateClock();
    </script>
</div>
"

• HTML structure: The code creates a div element that will hold the clock and applies some simple styling to display it.
• JavaScript: The JavaScript function updateClock() fetches the current time, formats it, and updates the content of the div with the ID clock. The setInterval(updateClock, 1000) function ensures that the clock updates every second.
• Styling: The text is centered and styled with a font size of 30px, and the clock appears bold and clear for readability.

3- Drag the measure (HTMLContentClock) into the Values field of the HTML Content visual.

[duddys]

I copied the code, added the visual to my report but all I see is blank white. Its visible only in published report or did I do something wrong

[Bibiano_Geraldo · Accepted solution]

Hi, change the font color for black:

HTMLContentClock = 
"
<div style='
    width: 100%; 
    height: 100%; 
    padding: 15px; 
    border-radius: 10px; 
    color: black; 
    font-family: Arial, sans-serif; 
    font-size: 30px; 
    font-weight: bold; 
    text-align: center;'>
    <div id='clock'></div>
    <script type='text/javascript'>
        function updateClock() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            var timeString = hours + ':' + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
            document.getElementById('clock').innerHTML = timeString;
        }
        
        // Update the clock every 1000 milliseconds (1 second)
        setInterval(updateClock, 1000);
        
        // Initial clock update
        updateClock();
    </script>
</div>
"

[danextian]

Hi @duddys 

You can use UTCNOW() + DIVIDE(offsetvalue, 24) in a measure to get the current time in your timezone. Replace value with your timezone offset. The catch is the user needs to interact with the viz and must not go backk to the previous state of the report as the measure is cached and will return the previous value.

[mickey64]

For your reference.

Measure = now()