Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Vivaldo-Roque opened this issue Oct 30, 2020 · 13 comments
Closed

Comments

@Vivaldo-Roque
Copy link

No description provided.

@Vivaldo-Roque
Copy link
Author

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

image

@nabil6391
Copy link
Owner

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
Copy link
Author

Vivaldo-Roque commented Nov 1, 2020 via email

@Vivaldo-Roque
Copy link
Author

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
Copy link
Owner

@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
Copy link
Author

Vivaldo-Roque commented Nov 2, 2020

😅 @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
Copy link

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
Copy link
Author

@bubnenkoff, me?

@bubnenkoff
Copy link

bubnenkoff commented Nov 3, 2020 via email

@nabil6391
Copy link
Owner

@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
Copy link

DroidSU commented Feb 6, 2021

😅 @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
Copy link
Author

Vivaldo-Roque commented Feb 7, 2021

😅 @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.

@nabil6391
Copy link
Owner

@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);
                },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants