Deneb: Develop Custom Visuals Inside Power BI
Building custom visuals in Power BI gives you total control over your scenario and results can be very rewarding. However, there's a high learning curve, particularly if you are not familiar with web development tools and technologies. If you already have experience with R and/or Python, Power BI offers visuals with an interface for you to write code in these languages, and these options can help a lot with producing tailor-made designs. Vega-Lite is a "visualization grammar" developed by the University of Washington Interactive Data Lab. It uses a declarative, JSON-based language that allows authors to build a range of bespoke visual designs with significantly less effort than coding from scratch. In this session, Daniel will introduce you to the Vega-Lite language via Deneb - a custom visual for Power BI. We will create some example visuals, as well as demonstrate some of the additional integration features with Power BI that aren't currently possible when using R & Python. ๐๐๐๐ฉ๐๐ฃ๐ ๐ก๐๐ฃ๐ (๐๐ ๐๐๐๐ข๐จ): https://bit.ly/3ri3kKf ๐๐๐ง๐จ๐๐๐ฃ ๐๐ฝ๐๐๐- ๐๐๐๐ง๐ค๐จ๐ค๐๐ฉ ๐พ๐ค๐ข๐ข๐ช๐ฃ๐๐ฉ๐ฎ: https://bit.ly/3IAg7xT ๐๐๐ฃ๐ ๐๐๐๐ฃ: https://bit.ly/32tGkif ๐๐๐ก๐๐๐ง๐๐ข ๐พ๐๐๐ฃ๐ฃ๐๐ก: https://t.me/PersianPBIUG ๐๐ค๐ช๐๐ช๐๐: https://bit.ly/3hk20RL Language: EnglishDeneb, the star of data visualization
Deneb is a powerful visualisation tool, which allows us to build precise bespoke visualisation without the limitations of standard Power BI visuals. However there is a learning curve to overcome. This session helps break down that barrier and show the steps to being proficient in the required skills are not that steep. We will look at the first steps into Vega-Lite, one of the languages used in Deneb, and break down the basic components needed to build your first visuals and beyond. ๐๐๐ง๐จ๐๐๐ฃ ๐๐ฝ๐๐๐- ๐๐๐๐ง๐ค๐จ๐ค๐๐ฉ ๐พ๐ค๐ข๐ข๐ช๐ฃ๐๐ฉ๐ฎ: https://bit.ly/3IAg7xT ๐๐๐ฃ๐ ๐๐๐๐ฃ: https://bit.ly/32tGkif ๐๐๐ก๐๐๐ง๐๐ข ๐พ๐๐๐ฃ๐ฃ๐๐ก: https://t.me/PersianPBIUG ๐๐ค๐ช๐๐ช๐๐: https://bit.ly/3hk20RL Language: EnglishArt with Data
An artistic exploration of Bob Ross data using a variety of data visualisation tools such as Deneb In "Art with Data", Kerry will explore the beautiful synergy of art and data using Bob Ross's artistic data as our canvas. Kerry will demonstrate the potential of Deneb, a custom visual tool in Power BI that allows creative data visualization with Vega Lite language. Join us for this unique blend of art and data, and discover how to tell engaging stories with your data visuals. No matter your Power BI proficiency, this session promises to inspire and enhance your skills. Let's create 'Art with Data' together! About Speaker: Kerry is a data visualization consultant hailing from Adelaide, South Australia. With a background in psychology and the social sciences and over ten years reporting experience across a range of industries, Kerry brings a considered and creative edge to BI and data visualization. Keen to learn and explore new techniques, she shares her findings at kerrykolosko.com ๐๐๐ง๐จ๐๐๐ฃ ๐๐ฝ๐๐๐- ๐๐๐๐ง๐ค๐จ๐ค๐๐ฉ ๐พ๐ค๐ข๐ข๐ช๐ฃ๐๐ฉ๐ฎ: https://bit.ly/3IAg7xT ๐๐๐ฃ๐ ๐๐๐๐ฃ: https://bit.ly/32tGkif ๐๐๐ก๐๐๐ง๐๐ข ๐พ๐๐๐ฃ๐ฃ๐๐ก: https://t.me/PersianPBIUG ๐๐ค๐ช๐๐ช๐๐: https://bit.ly/3hk20RL Language: English
Power BI - Deneb/Vega 6.2.0: Filtering by Day Signal Causes Marks to Disappear
Hi everyone, I am building a real-time schedule visual in Vega. I have a working visual that shows all data, but it breaks when I try to filter for the current day. Data from provided from Power Bi to deneb: - DST_ClockDiffBtwLocationAndLocalOffset:This is a measure. TimeZone Difference. provides the offset of this difference. - From my Power BI table: - ScheduleType - day_num - type -startTime -endTime I have a query named AllSegments that creates a clean, flat table Each day, for each scheduleType, we can have multiple rows. For example: Scheduletype day_num type start_time end_time startTime endTime Production 0 No Production 00:00:00 22:00:00 0 22 Production 0 Normal 22:00:00 23:59:00 22 23.9833333 Production 1 Normal 00:00:00 23:59:00 0 23:9833333 ... SiteOpening 0 No Production 00:00:00 23:59:00 0 23.9833333 SiteOpening 1 Normal 08:30:00 12:30:00 8.5 12.5 SiteOpening 1 Normal 13:30 17:00:00 13.5 17 ... Support 0 No Production 00:00:00 23:59:00 0 23.9833333 Support 1 Normal 08:30:00 12:30:00 8.5 12.5 Support 1 Flexible 13:30:00 17:00:00 13.5 17 The goal is one graph with a 24 hours My working code: { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A static visual for Monday with a dynamic real-time clock.", "background": "transparent", "width": 360, "height": 80, "autosize": {"type": "fit", "contains": "padding"}, "signals": [ { "name": "timer", "update": "now()", "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "now()"}] }, { "name": "adjustedTime", "update": "length(data('source')) > 0 ? utcOffset('seconds', timer, data('source')[0].DST_ClockDiffBtwLocationAndLocalOffset) : now()" }, { "name": "currentTime", "update": "hours(adjustedTime) + minutes(adjustedTime) / 60" }, { "name": "adjustedDate", "update": "timeFormat(adjustedTime, '%Y-%m-%d')" } ], "data": [ { "name": "source" }, { "name": "dataset", "source": "source", "transform": [ { "type": "filter", "expr": "datum.ScheduleType == 'SiteOpening' && datum.type != 'No Production' && +datum.day_num == 1" } ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 24], "range": "width" } ], "axes": [ { "orient": "bottom", "scale": "xscale", "title": {"signal": "adjustedDate"}, "tickCount": 24, "labelFontSize": 8, "offset": 5 } ], "marks": [ { "type": "rect", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "x2": {"scale": "xscale", "field": "endTime"}, "y": {"value": 20}, "height": {"value": 30}, "fill": {"value": "lightgray"} } } }, { "type": "rule", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "y2": {"value": 55}, "stroke": {"value": "black"}, "strokeWidth": {"value": 1} } } }, { "type": "symbol", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "shape": {"value": "triangle-down"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "symbol", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "endTime"}, "y": {"value": 55}, "shape": {"value": "triangle-up"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "rule", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 10}, "y2": {"value": 60}, "stroke": {"value": "red"}, "strokeWidth": {"value": 2} } } }, { "type": "text", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 5}, "text": {"signal": "timeFormat(adjustedTime, '%H:%M')"}, "align": {"value": "center"}, "fill": {"value": "red"}, "fontSize": {"value": 10} } } } ] } Now, I want to filter these bars to show only the ones for the current day. I added a signals block for the current time and a filter to my data transform ... Code doesn't work: { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A dynamic, real-time visual for Site Opening Hours.", "background": "transparent", "width": 360, "height": 80, "autosize": {"type": "fit", "contains": "padding"}, "signals": [ { "name": "timer", "update": "now()", "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "now()"}] }, { "name": "adjustedTime", "update": "length(data('source')) > 0 ? utcOffset('seconds', timer, data('source')[0].DST_ClockDiffBtwLocationAndLocalOffset) : now()" }, { "name": "currentTime", "update": "hours(adjustedTime) + minutes(adjustedTime) / 60" }, { "name": "adjustedDate", "update": "timeFormat(adjustedTime, '%Y-%m-%d')" }, { "name": "currentDayNum", "update": "day(adjustedTime)" } ], "data": [ { "name": "source" }, { "name": "opening_hours_today", "source": "source", "transform": [ { "type": "filter", "expr": "datum.ScheduleType == 'SiteOpening' && datum.type != 'No Production' && +datum.day_num == currentDayNum" } ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 24], "range": "width" } ], "axes": [ { "orient": "bottom", "scale": "xscale", "title": {"signal": "adjustedDate"}, "tickCount": 24, "labelFontSize": 8, "offset": 5 } ], "marks": [ { "type": "rect", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "x2": {"scale": "xscale", "field": "endTime"}, "y": {"value": 20}, "height": {"value": 30}, "fill": {"value": "lightgray"} } } }, { "type": "rule", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "y2": {"value": 55}, "stroke": {"value": "black"}, "strokeWidth": {"value": 1} } } }, { "type": "symbol", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "shape": {"value": "triangle-down"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "symbol", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "endTime"}, "y": {"value": 55}, "shape": {"value": "triangle-up"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "rule", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 10}, "y2": {"value": 60}, "stroke": {"value": "red"}, "strokeWidth": {"value": 2} } } }, { "type": "text", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 5}, "text": {"signal": "timeFormat(adjustedTime, '%H:%M')"}, "align": {"value": "center"}, "fill": {"value": "red"}, "fontSize": {"value": 10} } } } ] } the final goal is: - real time current clock (red bar + current hour text) - real time current day. if it is a production day, a blue rect align on the 24 hours, if it is Flexible period, a dark blue rect. if No prod, a gray rect - A second bar to provide info about when the location can have a support - a legend with the different info Thanks a lot for the support you will accept to provideDeneb Sorting Issue when "Datum" is included
Hi Team, I'm using deneb to build my visual using below code, So my target is, I will have sum of price which i will be showing on one layer and sum of profit (Target) showing as as another bar in another layer, however my MonthYear sorting is working correctly untill I add the Datum bar(Target), but as soon as i add it the sort order getting disturbed. I want my targte bar to be at last. PFA screen shots, with Target bar and without target bar. I have tried all the ways including entering manula sorting in the code itself, but still no result. { "data": { "name": "dataset" }, "layer": [ { "mark": { "type": "bar", "tooltip": true } , "encoding": { "x": { "field": "MonthYear", "sort": { "field": "SortOrd", "order": "descending" }, "type": "nominal" }, "y": { "field": "Sum of Price", "type": "quantitative" } } }, { "mark": { "type": "bar", "tooltip": true }, "encoding": { "x": { "datum": "Target", "type": "nominal" }, "y": { "field": "Sum of Profit", "type": "quantitative" } } } ] } Any help is highly apprciated. Thanks.
Bugs in my customized version of a popular gantt chart
Hello Community, Iโve been working on developing a Gantt chart using Madison Giammariaโs giammariam template. It is great already but I had to develop some other custom features so Iโve successfully implemented several functionalitiesโpartly using my own knowledge and partly with AI assistance. However, Iโve now hit a roadblock with three bugs that are preventing the visual from functioning as intended. Iโd love any help in resolving themโfixing just one would be a great step forward, but solving all three would be a huge relief! ๐ Bug 1: Expanding/Collapsing Tasks in Bulk I wanted to create a custom bulk expand/collapse button to toggle all tasks at once. However, unlike the original template, if I expand all tasks and then try to collapse just one, it collapses all of them instead of only the selected one. I suspect the issue lies in the hierarchy_initial transformations (lines 2224โ2238) in my Vega code, but I havenโt been able to get it working as intended. Bug 2: Horizontal Scrolling, Zooming, and Task Visibility Issues I had to tweak the template to properly display the Today line, as I couldnโt get it working from the original setup. However, my implementation may have introduced unexpected issues. Problem 1: Tasks Not Visible in Default View For example, in the image below, Task 95 (starting on March 19, 2023) should be partially visible, but it isnโt. If I scroll horizontally or zoom out slightly, it suddenly appears. Expanding the task doesnโt reveal the subtasks either. I suspect the issue is related to how the x-axis range is set before and after the min/max task dates. I attempted to configure default views for different task lengths using the configDateStepSizePercentInitial signal (lines 25โ28), but that didnโt resolve it. Problem 2: Missing Tasks on Horizontal Scroll If I scroll left (Shift + Mouse Wheel), I expect to see tasks from 2022, but they donโt appear even though they should. This is my biggest issueโif anyone has insights on what might be causing this, Iโd be incredibly grateful! Bug 3: Bottom Tasks Not Expandable This issue also exists in the original template: If the last task in the visual reaches the bottom of the canvas, the task is not clickable, preventing expansion. The only workaround is to collapse some other tasks first, but that negatively affects the user experience. Iโd really appreciate any advice, guidance, or fixes for these issues. Even just pointing me in the right direction would be incredibly helpful. Sample file: https://www.dropbox.com/scl/fi/dcrciewmls9dj3fqpc4m8/sample_data_tasks.pbix?rlkey=65tjgo587u9991jaj7t4j2y3s&st=r5j7jh0n&dl=0 Thanks in advance, and have a great day! Petr
Deneb: only hardcoded data works?
Hello all, I'm trying to get some Deneb visualization going. However, even when I dumb it down to the simplest example, Deneb refuses to show me anything. For example, here I made the simplest Test data and I just want Deneb to show it. But no matter what I do, it just doesn't show it. Meanwhile hardcoded data does show: How should I proceed?Issue with rendering Deneb/HTML Visuals in Chrome
Hello, Since couple of weeks I have a problem with Deneb & HTML Content visuals not rendering correctly in Power BI Services, in Chrome browser, in my company's tenant. On pages with multiple visuals, some of the visuals are not loading at all, leaving empty space and no error messages on the frontend. After refreshing the page some visuals may appear and others disappear, although for each page there's always one visual which seems to be loading at all times in all tests. Visuals failing to load seem to be throwing the following error in Chrome console: What I've been able to establish: other employees have the same issue with displaying my published report, also when they publish my reports themselves visuals are working properly on Edge and Firefox, no errors thrown for HTML Content, same SVG code used in new cards works properly doesn't matter if I publish from PBI Desktop or upload through PBI Service doesn't matter if published from .pbix or .pbip Setup: Power BI Desktop 2.138.1452.0 (November 2024), but issue was the same with August version Deneb 1.7.2.1, certified version from AppSource Chrome 131.0.6778.205 I'd be grateful for solution or some hints where to look for more details on the issue. Thank you!
No scroll capability in Deneb Gantt visualztion
Greetings. Have a use case for a Gantt like visualization. Landed on the Gantt rendering in the Deneb visual provided by David on his Github repoistory for Showcase Samples. Great documentation, easy to configure and get something stood up. I'm being stumped though on how to get the scroll bars to display on the visual. I've gone into the Format editor and enabled the scroll bars to be visible when editing. I can see them inside the editor. However, when I render the visual there's nothing there. Below is a screenshot of the settings. I went throgh the Vega documentation searching on the keywork "Scroll" without any luck. Any ideas on what is probably a simple thing I am missing? TIA. dm-p
