Web app flowchart / process chart with real time data

Viewed 414

I have a flowchart or process diagram (i actually don't know what's the correct name) that shows all the steps a customer goes through, from the moment they make a request, until the end of the process. And i want to monitor how many customers i have in each step. For example if today i have 100 customers, 10 could be at the start, 20 in the validation, 30 in hold, 20 in rejected and so on.

I've been looking for diagram tools but all of them focus on drawing the diagram and i want a web app that also displays the numbers "in real time" (we have a database that updates the status every hour). I tryed python dash but it only has a sanky chart but thats not what im looking for.

This is what im working with but is a power point! example

Any suggestions of a software or library, or any lead at all?

1 Answers

If recreating this chart is an option and if this is in a commercial scenario, you might want to look at the commercial yFiles for HTML graph visualization library.

With it you can implement dynamic flowcharts or process maps (what you have is a mixture of them, I'd say, so the naming is good ;-) ), that connect to live data sources and show live updates. There are two examples here, that seem to fit your requirements quite nicely:

The Process Mining Example shows both the number of elements (or more specifically the relative load) in a state via gauges and a heatmap, and you can actually see the entities moving between the states, too:

Image of an animated process mining chart

Of course you can also add text labels to show the numbers, instead, or in addition to that.

Showing live data updates (simulated live data) is also possible, of course, as this network monitoring demo shows.

Disclaimer: I work for the company that creates that library and I have written both of these demos. Of course you can use other libraries, too, but great graph visualization is hard, and I would really recommend a powerful tool like this instead of trying to build your own in a commercial context.I do not represent my employer, here. Comments, recommendations, and answer are my own.

Related