Organigram Application

Not for 'how-to' coding questions but PHP theory instead, this forum is here for those of us who wish to learn about design aspects of programming with PHP.

Moderator: General Moderators

Post Reply
User avatar
emmbec
Forum Contributor
Posts: 112
Joined: Thu Sep 21, 2006 12:19 pm
Location: Queretaro, Mexico

Organigram Application

Post by emmbec »

Hi everyone, I was assigned to create a small organigram application to display all of the company's supervisors with their engineers. Do you know any application out there (in PHP) that already does the trick? If not, do you have any ideas on how to create a good looking organigram application? We have an employees table with their suppervisor assigned to each one of them, each employee belongs to an specific department and each department belongs to an specific area in the company. I would like to have something similar to this image (Not from my company):

Image

We basically display the person's name, position, department etc. and their picture, but what I like is the lines, how can I create them on PHP?

Thanks!
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Organigram Application

Post by Christopher »

Do you want to create everything in an image or do the lines and text in HTML? For all in one image, look into GD or Image Magick.

Here is a good library: http://code.google.com/p/php-image/
(#10850)
User avatar
emmbec
Forum Contributor
Posts: 112
Joined: Thu Sep 21, 2006 12:19 pm
Location: Queretaro, Mexico

Re: Organigram Application

Post by emmbec »

arborint wrote:Do you want to create everything in an image or do the lines and text in HTML? For all in one image, look into GD or Image Magick.

Here is a good library: http://code.google.com/p/php-image/
It really doesn't matter if its an image or not, as long as it looks good.

Thanks for the link, I'm going to read it right away!
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: Organigram Application

Post by onion2k »

Just for the record, my PHP Image library that arborint kindly linked to doesn't really have much for drawing stuff yet. It might actually make it a little more tricky when you want to copy photos to the main canvas and then draw on it.

I really want to move on with it and add that sort of thing, but I'm incredibly busy at the moment. Stupid work!
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Organigram Application

Post by alex.barylski »

I would suggest using HTML for handling the flow of the photos and line associations...rendering anything hierarchial like that gets complicated quickly. Drawing any structured documents is a PITA.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Organigram Application

Post by Christopher »

emmbec wrote:It really doesn't matter if its an image or not, as long as it looks good.

Thanks for the link, I'm going to read it right away!
Doing it in HTML would be easier, probably faster, searchable, etc. You just need to think of the chart in terms of rows of photo blocks and rows of connecting lines.

1) Find the number of photos in each row.
2) Determine the row with the max number of photos
3) Based on the photo width and desired spacing, calculate the width of the max row
4) Then center all the other rows using that width

You could do it all with div tags and borders. If you are interested in coding it here, we can walk through the design and implementation.

PS - onion, get to work! ;)
(#10850)
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Organigram Application

Post by josh »

Yeah just create a static background that has lines and boxes, put the text and images with div positioning and CSS, easiest way, then you can just pragmatically output a different img src when the people move around in the hierarchy
User avatar
emmbec
Forum Contributor
Posts: 112
Joined: Thu Sep 21, 2006 12:19 pm
Location: Queretaro, Mexico

Re: Organigram Application

Post by emmbec »

arborint wrote:
emmbec wrote:It really doesn't matter if its an image or not, as long as it looks good.

Thanks for the link, I'm going to read it right away!
Doing it in HTML would be easier, probably faster, searchable, etc. You just need to think of the chart in terms of rows of photo blocks and rows of connecting lines.

1) Find the number of photos in each row.
2) Determine the row with the max number of photos
3) Based on the photo width and desired spacing, calculate the width of the max row
4) Then center all the other rows using that width

You could do it all with div tags and borders. If you are interested in coding it here, we can walk through the design and implementation.

PS - onion, get to work! ;)
That would be great! I just have no idea how to create the lines and all of that. With MySQL I have managed to get the list of people in the company, the hierarchy is something like the following:

Site Manager
Supervisor1 Supervisor2 Supervisor3 Supervisor4 Supervisor5


That would be the most basic organigram, from there what I thought that it would be better that when someone clicks on the name of a supervisor, to show the organigram for that supervisor:
Site Manager
Supervisor
Engineer1 Engineer2 Engineer3 Engineer4 Engineer5


And if they click back on the Site manager the previous organigram should be displayed.

I have done all that with just plain Strings, but I guess that what my main problem right now would be to have a way that to display my organigrams in an easy to read way. Could you give me a hand on accomplishing that?

Thanks!
Post Reply