How can I use graphview to show my data in json like listbuilder? about graphview

[nabil6391]

@bubnenkoff @Vivaldo-Roque Now its a bit easy to use Ids to extract info from any json to Graph Object

For example, if the json is like this:

var json = {
   "nodes": [
     {"id": 1, "label": 'circle'},
     {"id": 2, "label": 'ellipse'},
     {"id": 3, "label": 'database'},
     {"id": 4, "label": 'box'},
     {"id": 5, "label": 'diamond'},
     {"id": 6, "label": 'dot'},
     {"id": 7, "label": 'square'},
     {"id": 8, "label": 'triangle'},
   ],
   "edges": [
     {"from": 1, "to": 2},
     {"from": 2, "to": 3},
     {"from": 2, "to": 4},
     {"from": 2, "to": 5},
     {"from": 5, "to": 6},
     {"from": 5, "to": 7},
     {"from": 6, "to": 8}
   ]
 };

Steps , add the edges by using ids

  edges.forEach((element) {
      var fromNodeId = element['from'];
      var toNodeId = element['to'];
      graph.addEdge(Node.Id(fromNodeId), Node.Id(toNodeId));
    });

Then using builder find the nodeValues from the json using id and then set the value of that.

 builder: (Node node) {
                  // I can decide what widget should be shown here based on the id
                  var a = node.key.value as int;
                  var nodes = json['nodes'];
                  var nodeValue = nodes.firstWhere((element) => element['id'] == a);
                  return rectangleWidget(nodeValue['label'] as String);
                },

[Vivaldo-Roque]

I have no idea how to initialize the nodules from a json or Map file knowing that the elements in the tree are increasing.

[nabil6391]

yes its a bit challanging to write it using json, You would have to parse the json data yourself and then add the nodes in the graph

[Vivaldo-Roque]

I'll try to do. thanks for the feedback. Nabil Mosharraf <[email protected]> escreveu no dia domingo, 1/11/2020 à(s) 10:36:

…

yes its a bit challanging to write it using json, You would have to parse the json data yourself and then add the nodes in the graph — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#13 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIRGBGBFQOJ6P3EZJ2VR3DTSNUT3BANCNFSM4TFNIPWQ> .

[Vivaldo-Roque]

I tried to do the following:

graph.addEdges ([
Edge (
Node (GetNodeText (
txt1: "1",
)),
Node (GetNodeText (
txt1: "2",
))),
Edge (Node (GetNodeText (
txt1: "1",
)),
Node (GetNodeText (
txt1: "3",
))),
]);

And I'm getting:

The following NoSuchMethodError was thrown during performLayout ():
The getter 'depth' was called on null.
Receiver: null
Tried calling: depth

[nabil6391]

@Vivaldo-Roque create the nodes at the top, and then just add the edges

Something like this:
final Node node1 = Node(getNodeText());
final Node node2 = Node(getNodeText());
final Node node3 = Node(getNodeText());
final Node node4 = Node(getNodeText());
final Node node5 = Node(getNodeText());
final Node node6 = Node(getNodeText());
final Node node8 = Node(getNodeText());
final Node node7 = Node(getNodeText());
final Node node9 = Node(getNodeText());
final Node node10 = Node(getNodeText());
final Node node11 = Node(getNodeText());
final Node node12 = Node(getNodeText());

graph.addEdge(node1, node2);
graph.addEdge(node1, node3);
graph.addEdge(node1, node4);
graph.addEdge(node2, node5);
graph.addEdge(node2, node6);
graph.addEdge(node6, node7);
graph.addEdge(node6, node8);
graph.addEdge(node4, node9);
graph.addEdge(node4, node10);
graph.addEdge(node4, node11);
graph.addEdge(node11, node12);

[Vivaldo-Roque]

😅 @nabil6391 it looks like i will have a long job.

Update:

I was able to initialize the tree with the data stored in the sqlite database.

It wasn't that easy.

Your package is awesome !!!

[bubnenkoff]

Perfect package! About JSON. Could you use same JSON structure as https://github.com/r3code/vue-vis-network

      nodes: [
        {id: 1,  label: 'circle',  shape: 'circle' },
        {id: 2,  label: 'ellipse', shape: 'ellipse'},
        {id: 3,  label: 'database',shape: 'database'},
        {id: 4,  label: 'box',     shape: 'box'    },
        {id: 5,  label: 'diamond', shape: 'diamond'},
        {id: 6,  label: 'dot',     shape: 'dot'},
        {id: 7,  label: 'square',  shape: 'square'},
        {id: 8,  label: 'triangle',shape: 'triangle'},
      ],
      edges: [
        {from: 1, to: 2},
        {from: 2, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5}, 
        {from: 5, to: 6},
        {from: 5, to: 7},
        {from: 6, to: 8}
      ]

[Vivaldo-Roque]

@bubnenkoff, me?

[bubnenkoff]

Plugin developer Вт, 3 нояб. 2020 г. в 18:56, Vivaldo Roque (Wython) < [email protected]>:

…

@bubnenkoff <https://github.com/bubnenkoff>, me? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#13 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRWNFX7BHNEQAWT2MZNWYDSOAR27ANCNFSM4TFNIPWQ> .

[nabil6391]

@bubnenkoff Yes its possible, but in that case we are making the UI generic with the labels and shape. I wanted it to be very dyanmic.

Still I will have a look if we can come with an easy solution as well

[DroidSU]

😅 @nabil6391 it looks like i will have a long job.

Update:

I was able to initialize the tree with the data stored in the sqlite database.

It wasn't that easy.

Your package is awesome !!!

Hey, can you please help me out with the same issue. I need to display the graph with data from database, but am unable to do that currently. Any help would be appreciated. Thanks.

[Vivaldo-Roque]

😅 @nabil6391 it looks like i will have a long job.
Update:
I was able to initialize the tree with the data stored in the sqlite database.
It wasn't that easy.
Your package is awesome !!!

Hey, can you please help me out with the same issue. I need to display the graph with data from database, but am unable to do that currently. Any help would be appreciated. Thanks.

Here is the project take a look »»» https://github.com/Vivaldo-Roque/family_tree

may have some bugs.

I stopped the project is not yet complete because structuring a genealogical database is getting a little complicated for me.