Click here to Skip to main content
13,001,686 members (104,146 online)
Rate this:
 
Please Sign up or sign in to vote.
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 5-May-13 20:42pm
Updated 26-Apr-16 22:18pm
v2
Comments
   
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
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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
  Permalink  
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.
   
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.
   
You are welcome.
Good luck, call again.
—SA
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

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!
  Permalink  

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web01 | 2.8.170624.1 | Last Updated 27 Apr 2016
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100