Bubble Chart Extension for Work Items

This extension enables the creation of interactive bubble charts within Azure DevOps work items, allowing users to visualize relationships between data points. The chart provides a dynamic and visual representation of data, which enhances decision-making and analysis by offering a clear view of trends, clusters, and outliers.

Last Updates:

January, 2025 (v.1.2)

Improvements:

• Enhanced Negative Axis Handling:

  • Users can now choose to have values decrease as they move higher or wider on the chart.
  • This provides better flexibility for scenarios where inverted axes improve data visualization.

• Auto-Fitting Chart Height:

  • The custom control element now automatically adjusts its height based on the chart’s dimensions.
  • This ensures optimal visibility without manual resizing, improving usability across different layouts.

How to Use

Once the extension is installed, you can create and view bubble charts within work items to visualize data points and their relationships.

1. Define Chart Data: Specify the fields and data to represent the X, Y, and size axes of the chart.
2. Interact with the Chart: Hover over or click on bubbles to see more detailed information.

Supported chart options:

• X-Axis: Represents the independent variable (e.g., cost, time).
• Y-Axis: Represents the dependent variable (e.g., progress, impact).
• Bubble Size: Represents a third dimension (e.g., priority, estimated effort).

When to Use

This extension is especially valuable when you need to visualize complex relationships between multiple work item fields and gain insights into project trends or potential risks.

1. Visualizing Project Progress

• Scenario: You are managing multiple tasks and want to visualize their progress over time based on priority, estimated effort, and completion status.
• Benefit: The bubble chart enables you to quickly see which tasks require more attention, are at risk, or are on track based on dynamic data points.

2. Risk Assessment and Prioritization

• Scenario: You need to assess the risks and priorities of various work items based on their potential impact and cost.
• Benefit: By adjusting the size and position of bubbles, you can prioritize high-impact items and identify tasks that need additional resources or focus.

3. Comparing Work Item Data

• Scenario: You want to compare various work items to determine which have the most significant deviation in progress, effort, or budget.
• Benefit: The bubble chart clearly highlights items that fall outside the normal range, allowing for faster identification of anomalies.

4. Project Tracking and Analysis

• Scenario: You are tracking various aspects of a project, such as timeline, budget, and team effort.
• Benefit: With a bubble chart, you can quickly visualize the relationship between these factors and make informed decisions about resource allocation and adjustments.

Key Features

• Interactive Bubble Chart: Display a bubble chart that dynamically represents work item data with X, Y, and bubble size axes.
• Customizable Axes: Customize the X, Y, and bubble size axes based on your choice of work item fields (e.g., cost, priority, completion percentage).
• Tooltips and Interactivity: Hover over bubbles to view detailed information and metrics about each data point.
• Responsive Design: The chart adjusts to different screen sizes and work item layouts for an optimal user experience.

Input Fields

The following input fields allow you to customize and control the bubble chart's data representation. These fields are used to define the chart's axes, labels, and data sources.

1. bubbleChartCSVInput

• Description: A CSV input field where data points are provided in a comma-separated format. The data represents the chart's bubble details, including the X, Y, and bubble size values.
• Example Format:

     Case 1;2.65;2.8;2,73
     Case 2;1.45;4.5;3.85
     Case 3;4.25;4;4.25
     Case 4;1;1.5;1.25
     Case 5;4;2;2.25
  

2. Column Indexes

• Description: Defines which columns from the CSV input correspond to the data points used for the X, Y, and bubble size axes.
• Format: A semicolon-separated list of column indices (0-based).
• Example: 0;1;2;3
  • Index 0: Label (for each bubble)
  • Index 1: X-Axis data
  • Index 2: Y-Axis data
  • Index 3: Bubble size

3. X Axis Limits

• Description: Specifies the range of values for the X-Axis. This helps define the minimum, maximum, and scaling for the X-Axis.
• Format: A semicolon-separated list of three values: min;mid;max.
• Example: 0;2.5;5

4. Y Axis Limits

• Description: Defines the range of values for the Y-Axis. Similar to the X-Axis, this sets the limits for the Y-Axis' scale.
• Format: A semicolon-separated list of three values: min;mid;max.
• Example: 0;2.5;5

5. Axis Titles

• Description: Defines the titles for the X and Y axes. These titles will be displayed on the chart to indicate the data represented by each axis.
• Format: A semicolon-separated list with two titles: X-Axis title; Y-Axis title.
• Example: Effort;Value

6. Area Names

• Description: Specifies names for different areas within the chart. These areas represent clusters of data points (bubbles) based on their position on the chart. You can define categories or labels for different groupings.
• Format: A semicolon-separated list of names for each area.
• Example: Fill-ins;Time-wasters;Quick wins / Low-hanging fruits;Strategic projects

7. Bubble Radius Size Factor

• Description: A scaling factor to adjust the radius size of the bubbles based on the data in the bubble size column.
• Format: A numerical value representing the scaling factor.
• Example: 5

8. Chart Padding Factor

• Description: Adjusts the padding or margin around the chart. This value controls how much empty space there is between the bubbles and the chart boundaries.
• Format: A numerical value representing the padding factor.
• Example: 0.1

9. Delimiter

• Description: A custom delimiter to separate the retrieved field values in the output. If not provided, a default delimiter (comma) will be used.
• Format: A character or string value used to separate field values from the CSV input.
• Example: |

Important Notes

• Please note that in the current version the bubble colors are generated randomly each time the chart is refreshed.
• Ensure that the data used for the X, Y, and size axes is properly formatted and contains relevant information for effective chart representation.

Feedback and Issues

If you have any questions, feel free to leave them in the Q&A section. For feedback or suggestions on new functionalities, please provide them via the Ratings & Review section.

You can also always reach us via email. We appreciate your input and strive to improve the extension based on your needs!

Change Log

January, 2025 (v.1.2)

Improvements:

• Enhanced Negative Axis Handling:

  • Users can now choose to have values decrease as they move higher or wider on the chart.
  • This provides better flexibility for scenarios where inverted axes improve data visualization.

• Auto-Fitting Chart Height:

  • The custom control element now automatically adjusts its height based on the chart’s dimensions.
  • This ensures optimal visibility without manual resizing, improving usability across different layouts.

January, 2025 (v.1.1)

New Functionalities:

• Added support for an optional delimiter input:
  • Users can now specify a custom delimiter when retrieving and displaying field values.
  • If no delimiter is provided, the default delimiter will be used.
  • This enhancement allows for better flexibility when formatting field values for different use cases.