Swimlane chart display

Hi, I am looking for ways to display swimlane-like chart.  (Sample image is attached below. Flow can be either vertical or horizontal.)  Each node and associated arrow lines are fixed at the design time, but the color of the current WIP node needs to be changed at the run time so that users can view and understand the current work-in-process within the entire business process. This may be more suitable for other BPM systems but I want to investigate if there is any ways to achieve this with Mendix. I took a look at Mermaid widget document but it seems that it cannot change color of a node dynamically.    Appreciate any advice how I can get the desired display output.   Thank you  
2 answers

A different approach could be to look at designing your chart in a graphics package and exporting it as an SVG that you then show as an image in your Mendix application. You could give each targetable element a name / id that you select in your Mendix application using a JavaScript Action and then apply or remove a highlight CSS class to.

Hope this helps.


Hi Koji

Best I can refer to is the Any Chart widget, based on plotly.js - npm (npmjs.com)

If you want something very specific as you mentioned above and you’ve already tried out several Marketplace widgets and they don’t fit your needs: I do believe that your option is then to build it yourself in React. Read the documentation or these interesting blog posts for help:

Build widgets in Mendix with React — Part 1 — Colour Counter | by Joe Robertson | Mendix Community | Jun, 2022 | Medium

Build Widgets in Mendix with React Part 2 — Timer | by Joe Robertson | Mendix Community | Jul, 2022 | Medium

Build Custom Widgets | Mendix Documentation


Hope this helps

Kind regards,