Advanced Donut Chart with multiple rings
The donut charts in Domo appear to be quite limited. I created my own code to display a multi-ring donut chart, using a Domo blank brick. Generic screenshot below.
Each ring in my code has an actual amount, projected amount, and budget amount. The light gray represents the projected. The darker gray represents the budgeted. And the color represents the actual. My chart has an opacity setting to let the budget show through the ring if the actual has surpassed the budget. The markers also show the budget target if colors selected make the budget hard to see.
// Example values for multiple rings
const data = [
{ label: 'category1', actual: 95000, projected: 120000, budget: 100000, color: 'rgba(167, 220, 73, 0.8)' },
{ label: 'category2', actual: 15000, projected: 18000, budget: 20000, color: 'rgba(124, 187, 236, 0.8)' },
{ label: 'category3', actual: 85000, projected: 90000, budget: 80000, color: 'rgba(215, 88, 103, 0.8)' },
{ label: 'category4', actual: 6000, projected: 8000, budget: 10000, color: 'rgba(174, 132, 244, 0.8)' }
];
This code uses some sample data shown above. My own code links to dataset(0) in a brick.
In my code I can change the ring colors palette, background color, the thickness of the rings, and the gap space between rings.
const outerRadius = 250; // Outer radius of the outermost ring
const ringThickness = 40; // Thickness of each ring
const gapThickness = 15; // White gap space between rings
In a more mature code, there should be labels on the rings, not just in a legend.
My code page for this is 175 lines…including css, html, and javascript.
** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **
Comments
-
I should have noted that my legend shows in order of outer ring to inner ring. Labels on the rings are not turned on in the screenshot.
** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0
Categories
- All Categories
- 1.7K Product Ideas
- 1.7K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 292 Workbench
- 4 Cloud Amplifier
- 8 Federated
- 2.8K Transform
- 95 SQL DataFlows
- 602 Datasets
- 2.1K Magic ETL
- 3.7K Visualize
- 2.4K Charting
- 695 Beast Mode
- 43 App Studio
- 39 Variables
- 658 Automate
- 170 Apps
- 441 APIs & Domo Developer
- 42 Workflows
- 5 DomoAI
- 32 Predict
- 12 Jupyter Workspaces
- 20 R & Python Tiles
- 386 Distribute
- 111 Domo Everywhere
- 269 Scheduled Reports
- 6 Software Integrations
- 113 Manage
- 110 Governance & Security
- 8 Domo University
- 30 Product Releases
- Community Forums
- 39 Getting Started
- 29 Community Member Introductions
- 98 Community Announcements
- Domo Community Gallery
- 4.8K Archive