Create a digital clock in power bi desktop

[hb0135]

Hello,

Want to create a digital clock in power bi desktop showing the real time that is current time as below

Note-- i.e Not data refreshed Date and Time it keep on changing

[v-eqin-msft · Accepted solution]

Hi  @hb0135 , 

You can get Deneb visual in "Get more visual"  .

2. Click Visual, feel free to put in a field, and click Edit: 

3. Copy the following code in: 

4. Copy the following code in:  

{ 

  "$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"} 

        } 

      } 

    } 

  ] 

} 

 5. Click Apply -- a text box with a real-time clock will be automatically generated 

Best Regards, 

Liu Yang 

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly 

[Anonymous]

How can I get a different time zone for this, I am trying to have five different clocks showing time for Hawaii, Pacific time zone, Mountain time zone, Central time zone, and Eastern time zone.

[HskrLrvr]

How do you show AM / PM in this??

[hb0135]

Hello,
Can we change the colour of date and time which is there in text box
Thanks,
hb0135

[Andy_Chen]

{ "$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"}, "fill": {"value": "blue"} // Set the initial color here to blue }, "update": { "text": { "signal": "format(currentYear, '04') + '-' + format(currentMonth, '02') + '-' + format(currentDay, '02') +' '+ format(currentHour, '02') + ':' + format(currentMinute, '02') + ':' + format(currentSecond, '02')" }, "fontSize": {"signal": "fontSize"} } } } ] }

[hb0135]

Hello,

Can we make it like first DD:MM:YYYY Format and Time in also 12 Hours Format ,because that is to understand 

[hb0135]

Hello,
Thank you Very Much For your help it is intersrting that we can do it in power bi desktop just one thing more can we make it 12 hours Format and also can we remove the date to .
Best Regards,
hb0135

[Ahmedx]

there is a very interesting option, take a look, maybe you will like it

https://www.youtube.com/watch?v=6RzC1P_1Elg&ab_channel=GuyinaCube

https://vega.github.io/vega/examples/clock/

[hb0135]

Hello,
Thanks for the Help But i done Done with above option which you have shown , it showing me the clock which is analog one but i want the digital one
BR