?
Solved

is there an easy way to draw a tree with javascript ? what lib would be the one to use  ?

Posted on 2016-11-28
6
Medium Priority
?
128 Views
Last Modified: 2016-11-29
hello,

i'd like to draw a tree with data that i have in a table.

the table has the following columns :

id; nodename; parentID.
1; nodetop; 0
2: nodeFirstA:1
3: nodeFirstB:1
4: nodeFirstC:1
5: nodeSecondA:2
6: nodeSecondB:2
....


is there some easy way for drawing trees with such data ?

thank you in advance.
0
Comment
Question by:toshi_
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41904138
JavaScript does not natively support such an operation but there are many libraries available on the net that do this.

Search for JavaScript Tree should yield a few.

Here is one that renders out a directory type tree
https://www.jstree.com/
0
 

Author Comment

by:toshi_
ID: 41904143
Hello Julian,

of course i dont expect javascript to pass a query to the db.

i can create an array with those values in order to pass them to a js function to have the tree draw.

is there such a function that would help to draw this tree ?

thanks
0
 
LVL 9

Accepted Solution

by:
James Bilous earned 2000 total points
ID: 41904382
toshi_, Julian is saying that you will need to use a javascript library that provides the "function" which draws the tree since javascript does not have this function built in as part of its default implementation.

You will most likely have to reorganize your array of data into a format that suits whatever library you use. This library: http://sigmajs.org/ , for example, requires data to be formatted as a JSON object. Google "graph visualization javascript library" and do some research to figure out which one best suits your needs.
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41904460
@toshi_ - can you explain your choice of answer please.
1
 

Author Comment

by:toshi_
ID: 41905660
Hello Julian,

Of course i can explain my choice.

your 1st. sentence :
"JavaScript does not natively support such an operation but there are many libraries available on the net that do this."
you can replace Javascript with any language and the sentence still be acceptable by anyone.....kind of bot's sentence.

your 2nd sentence :
"Search for JavaScript Tree should yield a few."
makes me think about that old website "doyouwantmetogooglethatforyou"

your proposal :
Here is one that renders out a directory type tree https://www.jstree.com/
kind of realization of 2nd sentence.


Now, look at your avatar and compare it with that beauty and colorfull james' avatar...no comparaison

yourself: black t-shirt, serious, looking in front of you as if you were chasing :)
james : colorfull, shini stars in the background, looking at the sky as with hope ....and that wonderfull sky :)  

i hope it helps and you now understand my choice.

best regards,

Toshi
1
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41905688
Thanks Toshi_ I will endeavour to colourise my avatar to make my posts more technically relevant.

Suggestion for the future: if you want a detailed answer try giving more detail in your question - it was somewhat open ended hence the reply you received. Without knowing the kind of tree you want to draw it is is a bit like saying what are the best tyres for my car but not telling us what car you drive or what you use it for.
is there some easy way for drawing trees with such data ?
The answer is yes - literally hundreds of ways - which one is right for you - well you did not give enough information.

The accepted answer does not really provide any more information than the first so it would seem the Avatar approach to selecting answer is the valid one here.

Good luck with your project.
1

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question