Forum Discussion
Helper IIICreate a digital clock in power bi desktop
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
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
9 Replies
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
hb0135Hello,
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- 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,
Can we change the colour of date and time which is there in text box
Thanks,
hb0135{ "$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"} } } } ] }
- Ahmedx
Super User
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
- 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
