Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
Hi,
I am new with svg. I want to draw an organizational chart using svg. I have table through which this chat will be generated.

ID           User                       Supervisor_ID
1            CEO
2        Director Marketing                 1
3        Director Production 1
4        Manager Marketing 2
5        Manager Production 3
6        Assist. Manager Marketing 4
7        Assist. Manager Production 5
8        Sales Exec 6
9        Engr 7 
10       Engr 7


I Shall be thankful for you help.

Thankful,
Usama Javed
Posted
Updated 26-Apr-16 22:18pm
v2
Comments
Sergey Alexandrovich Kryukov 6-May-13 2:44am    
How could this list be possibly helpful? If does not explain what you want to achieve and what are your problems. Short answer is: learn SVG and code appropriately.
—SA

Please see my comment to the question.

I would like to advise you one good tool to learn SVG. You can draw your graphics using Inkscape and then learn the SGV text to see how your graphic is implemented:
http://en.wikipedia.org/wiki/Inkscape[^],
http://www.inkscape.org/[^].

Besides, this editor is wonderful in convenience and performance, and also in its documentation.

See also:
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics[^],
http://www.w3.org/Graphics/SVG/[^],
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html[^],
http://www.svgelves.com/[^].

Some tutorials:
http://www.w3schools.com/svg/[^],
https://developer.mozilla.org/en-US/docs/SVG/Tutorial[^],
http://tutorials.jenkov.com/svg/index.html[^].

—SA
 
Share this answer
 
Comments
osama.javed 6-May-13 3:20am    
I want to draw chart dynamically from the table, and show it on the asp.net form.
Sergey Alexandrovich Kryukov 6-May-13 3:22am    
And? I answered already: learn SVG and writing SVG code, then you will be able to develop your application. There is no other way.
—SA
osama.javed 6-May-13 3:24am    
ok. Thankyou Sir.
Sergey Alexandrovich Kryukov 6-May-13 3:26am    
You are welcome.
Good luck, call again.
—SA
Try to check out my solution on github: OrgChart.svg The chart is fully rendered in SVG. Supports tip-opver / stacking strategy which is probably the best known solution to create good organisational charts. I would be very happy if it helps someone. It is based on snap.svg.

Example features:
- custom styling using own SVG fragments designed e.g. in Adobe Illustrator
- tip-over / stacking to handle huge amount of nodes in one level
- it's open source, you can use it for free in any project!
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900