Data driven flowchart

Feature Request
1

There are js and svg flowchart frameworks out there for example flowchart.js and gojs.

I’m wondering of possibility to create database driven flowchart. I think it would be possible quite the same way app connect chart been implemented based on chart.js.

What do you think of it?

2

Hello @transcoderm,

you can use flowchart js with wappler!!! … you need to parse your json or you can create database for flowchart then fetch similar field types into this script

dmx.parse('serverconnect1.data.query1') but dont forget all field names and structure are must be similar …

<script>
  var diagram = flowchart.parse("the code definition");
  diagram.drawSVG('diagram');

  // you can also try to pass options:

      diagram.drawSVG('diagram', {
                                  'x': 0,
                                  'y': 0,
                                  'line-width': 3,
                                  'line-length': 50,
                                  'text-margin': 10,
                                  'font-size': 14,
                                  'font-color': 'black',
                                  'line-color': 'black',
                                  'element-color': 'black',
                                  'fill': 'white',
                                  'yes-text': 'yes',
                                  'no-text': 'no',
                                  'arrow-end': 'block',
                                  'scale': 1,
                                  // style symbol types
                                  'symbols': {
                                    'start': {
                                      'font-color': 'red',
                                      'element-color': 'green',
                                      'fill': 'yellow'
                                    },
                                    'end':{
                                      'class': 'end-element'
                                    }
                                  },
                                  // even flowstate support ;-)
                                  'flowstate' : {
                                    'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                                    'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
                                    'future' : { 'fill' : '#FFFF99'},
                                    'request' : { 'fill' : 'blue'},
                                    'invalid': {'fill' : '#444444'},
                                    'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
                                    'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
                                  }
                                });
    </script>
2 Likes
3

Thank you @s.alpaslan for the enlightenment. Can you elaborate further on dmx.parse step? Where do I use the code?

I’m thinking of outputting the data into a div then parse the div value into the diagram variable. Do you think that would work?

4
5

Hi, thank you again. Just to note here for my own ref that I’d try it out on later stage. Not sure if this is correct code template based on what I read from the code provided by Patrick on the post you quoted.

var diagram = flowchart.parse(dmx.parse('serverconnect1.data.query1'));

6

Tried this but no luck but parsing the value normally from an input does the trick. I just need to bind dmx-value into the particular input then. Should be good to go.

Cheers.

7

use ondone event
diagram.drawSVG('diagram', dmx.parse(‘serverconnect1.data.query1’))

8

This code is for the diagram's styles, not for data content. For the data you need to parse value into flowchart instead.