I am using ipyvuetify and Ipycytoscape to create a dashboard rendered with voila.
I need to create graph data structures as this one:
This structure IS NOT rendered with ipycytoscape.
Does anyone knows which layout should I use to avoid that ipycytoscape just random places the nodes and ensure that the parents are always on top of the children.
Thanks
Did you try the dagre layout?
It was supposed to achive this kind of result out of the box :)
Related
I am a newbie learning to use graphviz.
Is it possible to generate interactive pop-out annotations when you move cursor around the graph? For example, hovering a node/edge will pop-out message box showing more information about it.
And if so, how?
Thank you so much for the help.
Depending on the output format, there are some possibilities:
You may create a png image and an image map and serve it as a html page. The world of html and javascript offers endless possibilities to make this interactive, use popout messages, etc.
If you prefer svg, some information is already included in the output as <title>, and again, if served within a browser, javascript may prove useful to enrich the output (not sure if it's possible to use existing svg with raphaeljs, but it sure shows nicely what's possible with svg + javascript).
You may simply have graphviz render the positions of all nodes and parse it's output to present it in your custom application
I am looking for some advice in regards to getting a very quick display of our reports. The problem I am working with is I receive an XML data structure that defines our layout. The report can be anywhere from 2 to 3 pages to perhaps 20 to 30. So to make the report display as quickly as possible I would like to just render the visible portion of the report. Here are the issues I need to overcome to accomplish this and I am looking for some advice how how to accomplish this.
To get a better visualization, Think of this like a word document. The reports have sections and I want to be able to get them to display as quickly as possible.
1) Of course I do not know the height of the child components I will be adding. Is there any techniques where I can determine if the components I am adding are not include in the view port and could I trigger off scroll bar movement.
2) I was thinking of adding estimation to the children components and then using that to set the height of the parent container. then when I receive scroll bar move event, I would check if the child components have been added to the parent and if not add them. Is there anyway to get the height of a component without rendering it?
3) Does Flex support anything built in that will accomplish this.
Any other techniques would be welcome. Basically I want to get the report displayed to the user as quickly as possible and delay the rendering of components that are off the screen.
Any suggestions would be welcomed. Thanks in advance.
Added Info.
Hard to provide code since I have not coded it yet. Let me try and expand with some details. I have a Parent Container where I take the some XML and using the XML creating children components based on the information in the XML. Right now when we do this it can take a long time to render a long report. What I want to do is to reduce the rendering time by delaying the rendering of those children objects. I have looked into things like the creation policy and createDeferredContent, but not sure if this is the right way to go. Guess the general problem I need to attack is how to do you stop rendering objects once you are outside the parents viewport. What I want is an item renderer like functionality but there is no similarity between the children. Perhaps a picture might be useful (will add as soon as I get to 10 points)?
Use spark List with useVirtualLayout turned on. This is what it does.
There is always similarity between children, but if you can't find it, you can use an itemRendererFunction.
I want to create a news application for my website.
My question is how should i create drag-able panels/canvas inside another panel/canvas.
What i exactly intend to do can be seen on netvibes.com . The website has different panels of every news group, and this panel could be moved from one place to other, but in a well defined manner. And the other panel take over the place of dragged panel.
Is there any component in flex, which can help me make something like that.
If i was unable to make my question clear, plz let me know, i will try to make it more clear.
Regards
Zeeshan
A TileList with drag and drop enabled should be able to accomplish something like that. Or, use a Spark List with a custom layout that you create.
It might be a bit tricky getting the list elements to drag and drop based on clicking the title, but it should be doable.
I think you should consider a more advanced solution with drap-n-drop with a custom panel based component. The places the panels can move can be implemented with a different custom canvas based component. The advantage would be to move the components into different custom positions and panels can be resized independent of each other.
Adobe has some good tutorials for drag-drop operations.
I have created an organizational chart using ASP.NET on web page. The web page is using strict DOCTYPE and following W3C standards.
The chart has a hierarchical layout decided by the manager field in the table that contains employees in the organization.
The chart layout has nodes with employee image and other details like job title, department and contact details. Nodes are beautifully arranged and connected by lines (only horizontal or vertical or both).
A lot of DIV elements are used (to avoid table) for connecting lines and arranging the chart properly. As suggested by my friend, using DIVs for connecting lines in the chart is semantically wrong. Also, a lot of DIVs are used to arrange the chart.
Is there a way by which I can make it semantically correct? Or, am I using HTML for the wrong purpose?
It looks like you're using HTML for something you shouldn't. Having said that,DIVs are supposed to be for division (sections) of the document. If each node is conceptually a unit, then a DIV is probably appropriate. If the nodes are not a unit, you may want to use a SPAN instead.
Ok I had asked a question recently based on this.
But I need to narrow down more..
I need to create a network graph with nodes in flex. Once I give the input the nodes must get connected with each other if they have something in common.
The nodes must be click-able to show which other nodes it is connected to.
A simple code example will be appreciated.
Can a bubble chart be modified to do this?
Thanks
I think you can try Flare.
Take a look at the demo for Layout.
i personally think, a bubble chart is not really the right way to go ...
most simple thing - in a flex world - would be to subclass UIComponent twice, for, let's say, NodeView and ConnectionView, and then put all this into some container, with absolute positioning ...
other way would be to simply add a Sprite to a UIComponent, and do the same thing in plain AS3, simply subclassing Sprite twice ... less overhead and other problems, but will not benefit from flex features, such as styling ...
do you already have a model for the network? do nodes also have coordinates, or do you need to arrange them your self?
or, if loaded externally, can you show some sample data?
greetz
back2dos