Page 1 of 1
Organigram Application
Posted: Fri Oct 31, 2008 1:04 pm
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):
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!
Re: Organigram Application
Posted: Fri Oct 31, 2008 2:10 pm
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/
Re: Organigram Application
Posted: Fri Oct 31, 2008 2:41 pm
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!
Re: Organigram Application
Posted: Fri Oct 31, 2008 2:49 pm
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!
Re: Organigram Application
Posted: Fri Oct 31, 2008 3:16 pm
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.
Re: Organigram Application
Posted: Fri Oct 31, 2008 3:21 pm
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!

Re: Organigram Application
Posted: Sat Nov 01, 2008 11:10 am
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
Re: Organigram Application
Posted: Thu Nov 06, 2008 8:31 am
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!