Live clock in pbi report

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.