Forum Discussion
Bubble Matrix
tabuzahra i'm sure this can be done using svg which will allow to create own image and size can be done using data. Can you share sample data? What are those background color? What that represents?
Hi Parry,
Thanks. Below is a sample data.
In regards of the background color, it represents as following:
- Red refers that the project status for selected clients are (Ongoing - Delayed, On Hold, Completed Delayed)
- Yellow refers that the project status for other than the selected clients are (Complete - Delayed) and for all clients when the status is (Cancelled)
- Green if the status are either (Ongoing - On Track) or (Completed - On Time)
| Ongoing - delayed | On-hold | Completed - delayed | Cancelled | Ongoing - on track | Completed - on time | |
| Client 1 | 27 | 6 | 25 | 4 | 6 | 2 |
| Client 2 | 3 | 3 | 3 | 3 | 3 | |
| Client 3 | 6 | 2 | 1 | 2 | 2 | |
| Client 4 | 23 | 3 | 23 | 4 | 1 | 1 |
| Client 5 | 12 | 4 | 7 | 3 | 5 | |
| Other Clients | 38 | 6 | 23 | 4 | ||
| Internal | 3 | 2 | 7 | 3 |
The background color can be represented by the Circle color
tabuzahra here is the 1st attempt at it. Didn't follow the logic for background color since there is nothing as project in your dataset.
But you can look at bubbles and make the changes as per your need.
Hi Parry,
I have tried using it but I have got circle wasn't shown in the matrix table as it's showing
data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='200' width='200' ><circle cx='100' cy='100' r='4100' stroke='#00BFFF' stroke-width='1' fill='#00BFFF' /> <text x='50%' y='50%' text-anchor='middle' stroke='White' stroke-width='2px' dy='.3em'>41</text></svg>
instead of the image, what would go wrong?