xViz Gantt Chart
| xViz Gantt Chart | https://docs.xviz.com/project-management/ | xviz-gantt-chart.svg | ||
| xViz Performance Flow | https://docs.xviz.com/performance-management/ | xviz-performance-flow-hero-image.svg |
xViz Gantt Chart
Image 1: xViz Gantt Chart with hierarchical structure and additional columns/measures
Image 2: Populate Task Name field
Image 3: Populate Display Categories and Display Measures field
Image 8: Data Structure from Milestones from Data
Image 9: Allow Milestone from Data
Image 10: Milestone from Data in the Gantt Chart
Image 1: Milestone configuration in xViz Gantt Chart
Image 2: Advance Editor icon
Image 3: Milestones Tab in Advance Editor
Image 4: Milestone Configuration in Advance Editor
Image 5: Milestone Shape and color configuration in xViz Gantt Chart
Image 6: Advance Editor icon
Image 6: Milestones Tab in Advance Editor
Image 7: Upload Custom Images for Milestone
Image 8: Milestone Image configuration in xViz Gantt Chart
Image 1: Planned Bars in xViz Gantt Chart
Image 2: Planned Start & End Columns
You'll then see the planned bars for each task alongside the actual bars, as display in the image below.
Image 4: Planned Bars with xViz Gantt Chart
2. In Chart Options Category, you will find the “Show Planned Tasks” option and enable it.
The final result, showcasing the planned bars for the parent level too, is displayed in the image below:
Image 7: Parent Planned Bars with xViz Gantt Chart
Image 1: Customization of Planned Bars
Image 2: Data Colors options in Format Pane
Image 3: Planned Border Color
Image 4: Data Colors options in Format Pane
Image 5: Planned Fill Color
Image 1: Connectors in xViz Gantt Chart
Image 4: Secondary connectors column
Image 1: Multiple Connectors in xViz Gantt Chart
Image 2: Add Comma Separated Value
Image 3: Populate "Connect To"
& "Connectors Type" data field
Image 4: Populate the
Task ID data field
Image 5: Multiple Connectors in xViz Gantt Chart
Image 1: Connectors Formatting
Image 2: Data Colors options in Format Pane
Image 3: Select Connectors option from dropdown
Image 4: Customize the Connetors color
Image 5: Connectors Line Type
Image 6: Connector Line Stroke
Image 1: Progress
Image 1: Bar fill indicates the progress in the xViz Gantt Chart
Image 2: Populate Progress field
Image 3: Progress Bar Display Customization
Image 1: Calculate Progress using Progress data field & Progress Base data field
Image 2: DAX measure
Image 2: Example to understand Progress Base data field
Image 1: Bar Formatting
Image 1: Advanced Editor option
Image 2: Timeline Tab in Advanced Editor
Image 3: Start Date and End Date options to define the Range
Image 4: "Static Date" option for Start Date and End Date to define the static Range
Image 5: Static Dates set for both Start Date and End Date
Rolling Timeline Start = TODAY()
Image 7: Populate Timeline Start/End field
Image 8: Choose respective measures in Timeline tab
Image 9: Start and End Dates can have different types of values to define the Timeline Range
* Top Level
* Middle Level
* Low Level
Toggle on/off to enable the zoom levels.
{% hint style="warning" %}
We do not provide an option for adjusting the low-level header height because it is automatically calculated within the visual as follows:
Low Level Header Height = Chart Options Header Height - Top Level Header Height - Mid Level Height
{% endhint %}
# Timeline Header Format
### Timeline Header Format
Image 1: Timeline Header Format
Image 4: Days-Header Format
Image 1: Zoom Options
GIF 1: Zooming through the timeline using button option in xViz Gantt Chart
Image 1: Timeline formatting with xViz Gantt Chart
Image 2: Advance Editor icon
Image 3: Format text box in Timeline tab
Image 4: Format Timeline
Image 5: Timeline formatting with xViz Gantt Chart
| Format | Notes | Result |
| YYYY | 4-digit year | 2024 |
| YY | Last 2 digits of the year | 24 |
| MMMM | Full month name | August |
| MMM | 3-letter month abbreviation | Aug |
| MM | Month number with leading zeros | 08 |
| M | Month number without leading zeros | 8 |
| Q | Quarter number | 3 |
| w | Week number of the year without leading zeros | 32 |
| ww | Week number of the year with leading zeros | 32 |
| D | Day of the month without leading zeros | 6 |
| DD | Day of the month with leading zeros | 06 |
| ddd | 3-letter weekday abbreviation | Tue |
| dddd | Full weekday name | Tuesday |
| h | 12-hour clock without leading zeros | 3 AM |
| hh | 12-hour clock with leading zeros | 03 AM |
| H | 24-hour clock without leading zeros | 3 |
| HH | 24-hour clock with leading zeros | 03 |
| m | Minutes without leading zeros | 5 |
| mm | Minutes with leading zeros | 05 |
| s | Seconds without leading zeros | 2 |
| ss | Seconds with leading zeros | 02 |
| Format | Result in Timeline | Notes |
| "Q"Q | Q3 | The Q between double quotes is extra text |
| YYYY | 2024 | |
| MMM | Aug | |
| MMM" "DD", "YYYY | Aug 06, 2024 | Comma is added here, similarly any other text or symbols can be added in between double quotes |
Image 1: Timeline Language changed to French
Image 1: Conditional Formatting is disabled
2. Insert/Add a numeric value in the Display Measures data field:
3. Navigate to Format Pane-> Display Measures:
4. If you do not wish to see the measure value in the data grid, then disable the toggle option of the value added:
5. Navigate to Advanced Editor (yellow pencil icon) and click on it:
Image 6: Advanced Editor icon
Image 7: Conditional Formatting tab from Advanced Editor
# Conditional Formatting
Conditional formatting is a technique where the color, font, text, and values of a data point are changed based on a data-driven condition. This technique can be used for performance metrics or to provide data-driven alerts.
Gantt Chart applies formatting based on certain criteria, such as completion percentage or project status, so users can easily track progress and identify potential issues. It allows users to customize the formatting rules and colors to better suit their individual needs.
### [Steps to enable Conditional Formatting](/project-management/alerting-techniques/steps-to-enable-conditional-formatting)
Conditions can be set either by Rule or Color Scheme
### Method 1 - Process for Format By -> Rule
1. To apply the formatting select the **Condition**.
!\[Graphical user interface, text, application, chat or text message
Description automatically generated]\(/files/uTQs4p2JjKeY4RInRlsl) !\[Graphical user interface, text, application, chat or text message
Description automatically generated]\(/files/3fALnUVvazHINeOrwHGz) !\[Graphical user interface, text, application
Description automatically generated]\(/files/5U9nLbtJ6E082F0niJp3)
### Method 2 - Process for Format By -> Color Schemes
1. Different **Color Schemes** are used for formatting:
### Legend Configuration
To display legends for the Status flag and Timeline bars of the applied rule, enable the "Show in Legend" option.
Image 8: Show in Legend
Image 1: Reference Lines & Reference Ranges
**Reference Band** - Range of continuous dates highlighted in the tasks. Configuring two dates ranges will be highlighted as a band in the chart.
{% hint style="success" %}
We can display the Reference line and Reference Range with Static Approach using the Reference tab which is located in Advance Editor - [Static Approach](/project-management/reference-lines-and-reference-range/static-approach)
{% endhint %}
# Static Approach
We can display the Reference line and Reference Range with Static Approach using the Reference tab which is located in Advance Editor.
### Setting up using configurations:
1. Go to the **Advanced Editor**
Image 1: Advance Editor Icon
#### **a. For Reference lines**
The xViz Gantt provides users the option to set multiple reference lines based on different logic:
2. **Date configuration**
We need to configure one single date to add the Reference Line on the Chart:
* **First-of-date –** Displays Reference Line on the earliest start date from the data where the Timeline starts.
Image 3: Reference Line option First-of-date in the xViz Gantt Chart
Image 4: Reference Line option Last-of-date in the xViz Gantt Chart
Image 5: Reference Line option Today in the xViz Gantt Chart
Image 6: Reference Line option Custom Date in the xViz Gantt Chart
* **Reference Color** - Choose from color palette and set the color as per needs.
* **Display Line Type and Stroke** - Apply Line type formatting from the options below:
1. Dotted
2. Dashed
3. Solid
4. Dashed-Dotted
Adjust the **Width** of the Line type using **Stroke** Option.
* **Text- Font Weight, Position and Background**-Format the text using Font size, Position, and background color options.
#### **b. Reference Band**
Use the reference range, **Custom Date Range** option to highlight a specific range on your Timeline.
2. **Date configuration**
We need to configure Custom Date from and Date to dates to highlight the specific Range in the Chart.
Image 8: Reference Band in the xViz Gantt Chart
Image 9: Formatting options for Reference Band
In the above example, ‘Planned Start’ measure is added in Reference Start Date and ‘Planned End’ measure is added in Reference End Date. ‘Task’ measure is added to Reference Text which will display the text on the Reference Line.
From the above example, the Reference Line is displayed using dotted lines, the Range pattern is displayed using checkerboard and the text is displayed on the lines.
### **Steps to configure:**
1. Go to the Format Pane->References.
Image 3: References in Format Pane
Image 4: Reference Formatting options
Image 5: Line type Reference Formatting option
Image 6: Range patterns in Reference Formatting option
Image 4: Data Field to configure Task Name
And define different rules for color-coding the timeline bars. You can set conditions for different chart elements like **Progress**, **Milestone**, **Timeline Bar** etc.
You can set conditions for different chart elements like **Progress**, **Milestone**, **Timeline Bar** etc. In the above example, phases of the same Task have been given the same color. You may choose to color code the bars based on Phases, instead of Tasks.
{% hint style="info" %}
Conditional Formatting feature requires inserting minimum **one numeric data** in the visual.
{% endhint %}
To enable Conditional Formatting, can insert the measures/numeric data in the **Display** **Measure** Data Field. Further, you can disable the Measure from showing in the visual using Formatting Pane.
By using the toggle off/On options, we can disable the measure displaying from the visual using Formatting Pane.
To learn more about the Resource Gantt, check out our detailed blog:
{% embed url="
Image 1: Color Formatting
Figure 2: Row Background Color in xViz Gantt Chart
Image 4: Hiding Bar Border color in xViz Gantt Chart
Image 2: Bar Fill color in xViz Gantt Chart
Image 1: Connectors Formatting
Image 1: xViz Gantt Chart created with using Duration data field
Image 2: Dataset
Image 3: Populate Start Date and Duration field
Image 1: xViz Gantt Chart created with using Duration data field
GIF 1: Display Duration
Image 1: Populating the Actual Start and Actual End Dates
Image 2: Populating the Planned Start and Planned End Dates
Image 3: Display Categories section in the Format pane
Image 4: Duration Type option in the xViz Gantt Chart
Image 5: Duration Unit option for the Duration column
Image 7: Decimal places option for the Duration column
Image 7: Formatting options for the Duration column
Image 8: Actual Duration column in the xViz Gantt Chart
Image 9: Planned Duration column in the xViz Gantt Chart
Image 10: Both Actual Duration and Planned Duration columns in the xViz Gantt Chart
Image 3: Data field to configure Totals Text
Image 6: Turn on Display Totals
Image 1: Chart Options in Format Pane
Image 2: Hide Blanks options
Image 1: Chart Options in Format Pane
Image 4: Tooltip View for the selected Date Format
Image 1: DaysOff in xViz Gantt Chart
GIF 1: Weekday DaysOff type in xViz Gantt Chart
2. Navigate to the “DaysOff" section. Then click on the “Weekday” option
3. Select the Days for DaysOff to Display in the Gantt Chart.
4. Now Choose the Pattern and Color for the Weekday.
The final result, the chart shows the shaded area for the applied Weekday, is displayed in the image below:
{% hint style="info" %}
Refer to the document link below for Custom Date DaysOff, which allows to display the DaysOff on custom dates - [Custom Date](/project-management/other-features/daysoff/custom-date)
{% endhint %}
# Custom Date
The xViz Gantt Chart provides the Custom Date DaysOff option to mark the non-working days based on dates.
GIF 1: Custom Date DaysOff type in xViz Gantt Chart
2. Navigate to the “DaysOff” section. Then click on the “Custom Date” option.
3. Choose the Custom Dates for DaysOff and click on non-working custom dates to Display in the Gantt Chart.
4. Now Choose the Pattern and Color for the Custom Date.
The final result, the chart shows the shaded area for the applied Custom Date, is displayed in the image below:
# Setting Up Drill-through
### How to Set Up Drill through in xViz Gantt Chart?
**Drill through** allows users to explore detailed information related to specific data points in your report. Follow these steps to set up drill through for the xViz Gantt Chart:
1. **Create a Target Report Page:**
* Begin by creating a new report page. This will serve as the target page for drill-through.
* Design this page with the visual elements you want to display when users drill down into specific data.
2. **Configure Drill through on the Target Page:**
* Open the target report page.
* In the Visualizations pane, locate the Build visual section.
* Drag and drop the field that you want to enable drill through for into the drill through well. This field will act as the trigger for drill-through actions.
3. **Automatic Back Button Creation:**
* When you add a field to the drill through filters well, Power BI automatically generates a back button visual.
* This back button becomes a clickable element in published reports.
* Users who view your report in the Power BI service can use this button to return to the original source report page.
4. **User Interaction:**
* On the source page of your report (where the xViz Gantt Chart is displayed), users can **double-click** a specific data point.
* This action opens a context menu that supports drill through.
* Users can choose to drill through to the target page associated with that data point.
5. **Filtered Target Page:**
* When report readers select drill through, the target page is dynamically filtered.
* It displays relevant information related to the specific data point they double-clicked on.
Remember to test your drill-through setup thoroughly to ensure a seamless user experience. Happy reporting!
# Configure External URLs
External URL is used to provide the additional information or context about the data being presented.
External URL in the chart is used for providing additional information related to the data, also to provide some related resource for reference and help to navigate to some websites or resources.
### **Steps to configure External URL:**
GIF 1: Configuring External URLs in xViz Gantt Chart
GIF 1: Splitter in xViz Gantt Chart
Image 1: Data Grid Section in the Format Pane
Image 2: Turn on Auto Splitter Position
Image 3: Auto Splitter with xViz Gantt chart
The final result, the chart shows all columns in the Data Grid, is displayed in the image below:
# Text Customization
The xViz Gantt Chart offers extensive customization options for text through the Font Style feature in the Data Grid section.
GIF 1: Text Customization in xViz Gantt Chart
2. You will find the “Node Customization” option to select the Node Type for which you would like to add the customization.
Image 2: Select node type
4. Finally, select the Data Grid Font Color and adjust the Size of the text.
The final result, highlighting the customized text appearance, is displayed in the image below:
# Row Numbering
The xViz Gantt Chart makes it easy to add row numbers along with each task using the Row Numbers feature. This helps in quickly identifying and referencing tasks within the chart.
GIF 1: Row Number in xViz Gantt Chart
Image 1: Display Categories in the Format Pane
3. Add the name of the row number column and adjust the column's width for optimal display.
When you select the Row number option, a new column will be added to the chart showing the row numbering
* Simple
Image 4: Simple Row Numbering in xViz Gantt Chart
Image 5: Hierarchical Row Numbering in xViz Gantt Chart
GIF 1: Indentation in xViz Gantt Chart
Image 1: Display Categories section in the Format pane
The result, highlighting the space before the child node or sub-task, is displayed in the image below:
* Before Indentation:
Image 3: Gantt Chart without Indentation
Image 4: Gantt Chart with Indentation
GIF 1: Sorting in xViz Gantt Chart
The final result, which sorts the tasks in Ascending order based on the Start Date, is displayed in the image below:
{% hint style="info" %}
Guide for Power BI Sort by Column: [Sort one column by another column in Power BI](https://learn.microsoft.com/en-us/power-bi/create-reports/desktop-sort-by-column?tabs=powerbi-desktop)
{% endhint %}
# Parent Level Calculations
### How are the metrics of parent bar calculated:
1. **Start Date** - Earliest start date of all its child bars
2. **End Date** - Latest end date of all its child bars
3. **Progress** - Refer to the below explanation:
Parent bar progress is the sum of its every child bar's product of duration and progress, divided by the sum of all its child bars duration:
Image 1: Parent bat progress
Image 2: Example
GIF 1: Configuration of the Aggregation types
Image 1: Customize Tooltip section
Image 2: Customize Tooltip
Image 3: Native Tooltip configuration options
Image 4: Miscellaneous
Image 5: Individual Tooltip Toggle
Image 6: Individual Tooltip for Milestones
Image 1: Critical Path column
Image 2: Populare Critical Path Column
Image 3: Apply Conditional Formatting
Image 4: Critical Path
This is how it will be displayed.
For more details on the Zoom Levels and Zooming capabilities, please refer to[Timeline Configurations](/project-management/timeline-configurations#zoom-levels)
Image 1: Get the visual from AppSource
Image 2: Search xViz and select the visual
Image 3: Click on the add option to add in the visualizations pane
Image 4: Performance Flow is added to the Visualizations pane
Image 5: Performance Flow visual is added to the canvas
Image 1: Components in xViz Performance Flow
Image 2: Click on the Performance Flow icon.
Image 3: Hierarchy Field &
Parent Id Field
Image 4: Hierarchy Field
Image 5: Sparkline Field
Image 6: Values Field
Image 6: Fields Data Field
Image 7: Tooltip Field
GIF 1: Navigation in xViz Performance Flow
GIF 2: Set as Top Node in xViz Performance Flow
GIF 3: KPI & Variance in xViz Performance Flow
GIF 4: Sparkline in xViz Performance Flow
GIF 5: Links in xViz Performance Flow
GIF 6: Search feature in xViz Performance Flow
GIF 7: Alerting in xViz Performance Flow
GIF 8: Notes & Annotation in xViz Performance Flow
Image 1: Populate data fields
Image 2: Map newly added column in the Map Field
Image 3: Organization Chart in xViz Performance Flow
Image 4: KPI & Variance in xViz Performance Flow
Image 5: Conditional Formatting in xViz Performance Flow
Image 6: Custom Template in xViz Performance Flow
Image 1: Manage Parameters
Image 2: Add Parameters
Image 3: Edit the Credentials
Image 4: Set Privacy levels
Image 5: Data from Azure Active Directory
Image 6: Get Image URL column from Azure Active Directory
Image 7: Add Custom Column
Image 8: Image with appropriate URL
Image 9: Create Relationship
GIF 1: Swim Lanes in xViz Performance Flow
GIF 2: Links in xViz Performance Flow
GIF 3: KPIs in xViz Performance Flow
GIF 4: Appearance in xViz Performance Flow
GIF 1: Layout & Orientation in xViz Performance Flow
GIF 2: Conditional Formatting in xViz Performance Flow
GIF 3: Sparkline Trends in xViz Performance Flow
GIF 4: Notes in xViz Performance Flow
GIF 5: Search feature in xViz Gantt Chart
GIF 1: Multiple column hierarchy structure in xViz Performance Flow
GIF 2: Aggregation of vales on higher level in xViz Performance Flow
GIF 3: Conditional Formatting in xViz Performance Flow
GIF 4: Layout & Orientation in xViz Performance Flow
GIF 1: KPI Tree
Image 1: INFO.VIEW.MEASURES()
Image 2: Links column
Image 3: Parent ID column
Image 4: Populate Data columns
Image 5: Map newly added column in the Map field
Image 6: Expand Collapse button
Image 7: Hide connectors
Image 8: KPIs connected with Links
Image 9: Show Linked
GIF 2: KPI Tree
GIF 1: Group Feature in xViz Performance Flow
GIF 2: Custom Template in xViz Performance Flow
GIF 3: Conditional Formatting in xViz Performance Flow
GIF 4: Set as Top Node in xViz Performance Flow
GIF 1: Supply Chain Network
Image 1: Dataset
Image 2: Populate Data Columns
Image 3: Map newly added column in the Map field
Image 4: Expand Collapse button
Image 5: Hide connectors
Image 6: Supply Chain Network with Links
Image 7: Show Linked
GIF 2: Supply Chain Network
Image 1: Sample group view inspired by Process Flows
| Data Column | Mandatory/Optional | Description |
|---|---|---|
| Group Id | Mandatory | Id of the Group in the group identifier row |
| Subtree Id | Mandatory | Specifies the ID of the Group in which the node resides |
| Group color | Optional | Color coding of the Group background |
Image 2: Data required for the view in Image 1
Image 1: Column Group (Swim lane) View in xViz Performance Flow | Power BI
Image 2: Source data structure
Image 3: Data sorted by the Group Name column
Image 4: Index column added
Image 5: Subtree Id column added
Image 6: Added Parent ID column
Image 7: Group Id column definition
Image 8: Blank Group ID column added
Image 9: Basic Transformations
Image 10: Static Table of Groups
Image 11: Appending Static Table to the Source Table
Image 12: Data Structure suitable for Swim Lanes
Image 13: Column Group (Swim lane) View in xViz Performance Flow | Power BI
Image 1: Group Structure in xViz Performance Flow
Image 2: Source table
Image 3: Extract Section Category
Image 4: Extracted Category Column
Image 5: Merged Columns
Image 6: Add Index Column
Image 7: Sub Tree Id Column added
Image 8: Added Parent Id Column
Image 9: Group Id column definition
Image 10: Blank Group ID column added
Image 11: Basic Transformations
Image 12: Static Table of Groups
Image 13: Appending Static Table to the Source Table
Image 14: Data Structure suitable for Wide Groups
Image 15: Group Structure in xViz Performance Flow
Image 1: Structure without Invisible Group
Image 2: Structure with Invisible Group
Image 1: Column of https links for images/icons
Image 2: Columns of Base 64 URLs for images/icons
Image 3: Create a New Blank Query
Image 4: Advanced Editor option
Image 5: Invoke Custom Function option
Figure 2: Invoke Custom Function dialog box
Image 1: Images displaying partially in Power BI
Image 2: Extracting the length of every value for a column in Power Query
Image 3: Length of Base 64 URLs in Power Query
Image 4: Data type as Text
Image 5: Advanced Editor option in Power Query
// Creates Splitter function
#"SplitTextFunction" = Splitter.SplitTextByRepeatedLengths(30000),
// Converts table to list
#"Input List" = Table.ToRows(LastStepName),
//Function to convert binary images to multiple text values
#"Convert 1 File" = (InputRow as list) =>
let
BinaryIn = InputRow{1},
FileName = InputRow{0},
BinaryText = Binary.ToText(BinaryIn, BinaryEncoding.Base64),
SplitUpText = SplitTextFunction(InputRow{1}),
AddFileName = List.Transform(SplitUpText, each {FileName,_})
in
AddFileName,
// Loops over all images and calls the above function
#"Convert All File" = List.Transform(#"Input List", each #"Convert 1 File"(_)),
// Combines lists together
#"Combine the Lists" = List.Combine(#"Convert All File"),
// Converts results to table
#"Convert to Table" = #table(type table[Name=text,Base64 Img=text],#"Combine the Lists"),
// Adds index column to output table
#"Added Index" = Table.AddIndexColumn(#"Convert to Table", "Index", 1, 1, Int64.Type)
in
#"Added Index"
Image 6: Final query look
Image 7:High-resolution Images in xViz Performance Flow visual
GIF 1: External Hyperlink in xViz Performance Flow
Image 1: URL column in the dataset
Image 2: Set Data category as Web URL
Image 3: Populate the URL column
Image 4: Web URL
Image 5: Open Browser
GIF 2: External Hyperlink in xViz Performance Flow
Image 6: Click on Conditional Formatting
Image 7: Format by Web URL in Conditional Formatting
Image 8: Select URL column using Based on option
Image 9: Select column to Apply hyperlink
Image 10: Style the hyperlink
Image 11: Click on hyperlink text
Image 12: Open Browser
Image 1: Custom Template
Image 2: Template option in ribbon
Image 3: Click on "Marker" Icon
Image 4: Custom Template
Image 4: "@" function
Image 5: Template after using "@" function
Image 2: Dynamic option
Image 3: Template after dynamic option
Image 1: Alignment option
Image 2: Align option
Image 3: Position option
Image 1: Wrap text option in the Custom Template window
# Styling
We can style values in the custom template using the "Background," "Border," and "Shadow" options.
Image 1: Styling option
Image 2: Choose Background Color
Image 3: Template after selecting background color
Image 4: Border Configuration
Image 5: Template after border configuration
Image 6: Shadow style and color
Image 7: Template after shadow style