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 provide
Stacked Column Chart visual advise
Hi all, I need help with a Stacked Column Chart. Currently, Iām displaying three categories on the Y-axis against the X-axis for the current quarter, and the data is showing correctly. I want to add a bar for the prior quarter using the same Y-axis and X-axis but am unable to achieve this. Can anyone advise? This is what i have Ideally, this is what i want to achieve
Retrieve image from app into report
Hi all! I am a non-developer and stuck with my current report! I am retrieving data from a mobile app that allows you to capture pictures. From the database I can see a "media link" which looks like a url but I can see it relates to an api as it has api. In the text. I know how to retriev an api key from the app for authentication, but that is it! anyone that can guide me on how to buld a report that pulls a specific image in based on an api-type url? thank you in advance
Modal Dialog API 3.8.1
Greetings all, I've experimented with the new feature that came with new API and I ran into some issues (see attached image). Has anybody been succesful in implementing a modal dialog? A small example from which I could extrapolate would mean the world to me. š Thanks in advance, Dusan
Query re bar chart and map visual
I am trying to create two visual I saw on a site. The data I have is very similar in that I have regional information, and trying to find out if any one knows how this might have been created? I did research deneb and other tools on visuals, but if aanyone can help guid me to the best way that would be really appreciated. The bar chart - its to permenantly show the data label offset off the chart. I created a measure for the data lable etc, but not show how to show it in the style of the chart (please see the url for an interative demo) The atlas vistal, I have regional information, but the closest I got to was bubbles on the map. I really like the pin shapes with the data labels, I was wondering how they created that? https://www.ilo.org/DevelopmentCooperationDashboard/#av344tb Any direction on the best tools to use from your experience would be really helpful ThanksHow to create a dynamic legend for matrix based on quarter selected
Hi I have a matrix visual that has % of Approved Request by Divison by Quarter. How can i make the quarter Dynamic? where it will show the current and previous 3 quarters based on the quarter that I have selected. I already have the measures for Current Quarter, and 3 quarters prior, but i am unable to make it dynamic.
Deneb - measure totals not showing correct value
Hi, I have an issue with a deneb visual which is not showing the measure values properly. It calculates the rows seperately split by descriptions and then adds them together which is a different out come. Example: This is how it should be: ID Count hours Total Units Out come 1 10 92 9.20 What happens is: ID Count hours Total Units Out come 1 5 47 9.4 1 8 45 5.625 this totals 15.025 It counts some hours double as it considers the description (there are 4 descriptions). So you can have as 2 descriptions in 1 hour, so it doesn't count it as 1 but as 2.... When I remove "Description" from the visual values, the measure shows correctly, but I need the "Description" so removing it is not an option. To fix this I wanted to use transform, but this allows me only to use in on one measure and not on two... The below doesn't work. "transform": [ { "aggregate": [ { "op": "sum", "field": "Count of Hours", "as": "totalHours" } ], "groupby": ["ID", "Other ID"] } ], "transform": [ { "aggregate": [ { "op": "sum", "field": "Total Units", "as": "totalUnits" } ], "groupby": ["ID", "Other ID"] } ] With the standard power bi visuals I don't have this problem... but those limit me with the visual I want to create If somebody knows what can be done to fix this or has another way to solve this issue that would realy be appriciated. Thanks in advance.Conditional formatting color on x-axis label
Hi All, I'm working on bar chart with x-axis contain year & week arrangement. I want to apply some conditional formatting on x-axis label to give indication of particular week, ie. week 43 with different color against the rest. i have arrange additional column 'cweek' contain '0' and '1' to differentiate current week vs the rest. However, when i apply conditional formatting, with any method, turns out all the color still same and no difference on current week. (gradient, rules, field value with column 'cweekcol'). Any idea how to work on conditional formatting or 1-0 condition cannot work here? i prefer to apply coloring in the x axis label, not the data label, bar to ensure the color is there even when the data is zero (bar not shown). conditional_formatting_color_xaxislabel thanks in advance.Request for Support - Creation of a Chart with Specific Requirements (Bubble Chart)
Team, Your support is kindly requested to create a chart similar to the one in image 01. I have found a scatter plot chart and 2 add-ons that are similar (image 02). The detail is that in the original image, 3 lines need to be placed indicating the limits that each point should have. However, I am unable to do this. Please provide your assistance in suggesting any add-on that can create this chart. Note: This chart uses the DIN 4150 meteorological standard in Peru. Image 01: chart DIN 4150 Image 02: Add-ons (GraphoMate Bubbles) (Bubble/Scatter Chart - xViz) Have a graet day!
