Comments (13)
@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);
},
from graphview.
I have no idea how to initialize the nodules from a json or Map file knowing that the elements in the tree are increasing.
from graphview.
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
from graphview.
from graphview.
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
from graphview.
@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);
from graphview.
😅 @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 !!!
from graphview.
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}
]
from graphview.
@bubnenkoff, me?
from graphview.
from graphview.
@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
from graphview.
😅 @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.
from graphview.
😅 @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.
from graphview.
Related Issues (20)
- graphView nodeWidget not clickable on bottom boundary region HOT 7
- graphView while changing the orientation of tree the edge line overlaps the root node. HOT 1
- Questions on achieving a mindmap using graphview HOT 3
- Collapsing of Nodes HOT 3
- Generic type argument in Node and Graph
- How to close a tree diagram?
- Directed graph flickering HOT 2
- Support layered family tree representations with parents on the same level HOT 4
- How to focus on a graph view node HOT 1
- No graph displayed on iOS Released
- Index out of range error when changing the graph object HOT 1
- how can i create a family tree
- Cani get a family tree example with this or suggest better one
- Can I add widget inside node?
- Making graphview work with existing flutter directed/weighted graph data structures HOT 2
- GraphView Widget doesn't use `paint` parameter. Cannot specify all Edge's paint style at one time
- How to config Directed graph
- how to design family tree.
- Abandoned - Maintenance
- Graph.dart: A file can't be part of more than one library
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from graphview.