background

when one of my friends asked me to create an organization chart, i was not sure how to implement it. but i said yes because i always think that there is nothing impossible in this world (please don’t ask me to fly). 

then i started creating some raw controls using shapes and lines.
but it was very hard to continue until i got the idea that draw bottom to up rows instead of drawing up to bottom.

 

in bottom to up method, child nodes will be aligned first and parent nodes will be aligned related to its child nodes. so that it would be easier to determine positions of each node.

organization chart control
when i started working on this, i never thought about creating it as a generic customizable control. so i had to change 80% of (dirty) code to create a customizable organization chart control.

the following section will give you an idea how it is working and how can you customize this control for your needs

  • organization chart pane(container)

 

methods
drawchart           = method to draw chart
onnodeclick       = fires when user click on a node.
onnodedblclick = fires when user double-click on a node.
nodes collection(collection)
methods
addnode            = method to add a new node object to nodes collection
removenode     = method to remove node object from nodes collection
item                      = get the reference of a node

  • node object(container)

each node objects derived from chartnode class of org_chart.vcx library.
 

it is a container with one image and two label controls to give basic characteristics of a node. as it is a container control it is easy to add another container into it and customize your chart.

properties
nodekey         = holds the unique key for a node
nodecaption  = caption of a node
nodeimage     = specify the image to be displayed on a node
childcount      = returns the number of child nodes


how to draw a organization chart?

following examples illustrates how to draw a basic organization chart

local lo_orgchart as organizationchart of org_chart

_screen.newobject("org_chart", "organizationchart", "org_chart")
lo_orgchart = _screen.org_chart
lo_orgchart.visible = .t.

lo_orgchart.nodes.addnode("0001") && root node
lo_orgchart.nodes.addnode("0002", "0001")
lo_orgchart.nodes.addnode("0003", "0001")
lo_orgchart.nodes.addnode("0004", "0002")
lo_orgchart.nodes.addnode("0005", "0002")
lo_orgchart.nodes.addnode("0006", "0003")
lo_orgchart.nodes.addnode("0007", "0003")

lo_orgchart.drawchart()

result:

 

customized chart with nodepicture, nodecaptio and tooltiptext  properies

 

extended functionalities

print chart
you can print a chart by calling printchart() method

save chart to image
you can save chart to image file (png format) by calling savetobitmap() method

get gdi bitmap object for advanced functions
a new object tobitmap has been created to handle gdi+ functionaties. this object will scan each and every objects in chart and draw it into a bitmap using gdi.
you can get the reference of created bitmap object (xfcbitmap) and modify it using gdi+ functions.
issuing
tobitmap.createimage() will make sure tobitmap updated bitmap object of chart.
eg:

local lo_bmp as xfcbitmap of "system.drawing.prg"

*-- recreate bitmap object if required
organizationchart.tobitmap.createimage()

*-- get bitmap object
organizationchart.tobitmap.getbitmapobject(@lo_bmp)

*-- add watermark
.............


*-- draw border

.............

please find attached class and samples.
hope this is a useful class for you.

_________________________________________________________________
change history  
==========================================================
16/05/2011

  • added nextkey() method to return unique key for nodes. this method will be used to generate node keys if you vomit tc_key value in addnode() method
  • added tc_caption, tc_image parameters in addnode() method.
  • fixed several bugs

18/05/2011

  • added new method printchart()
  • added new method savetobitmap(). 
  • updated sample files with new functionalities

One Response to Organization Chart Control for Visual FoxPro

  • Bernard Bout says:

    I think this is absolutely Cooool!

    Next step?

    * A visual editor. The user can drag n drop nodes, images, add text, move the nodes around and connect them manually using the mouse.

    * When saved write all data to a table so that the “chart” can be re created and then loaded at a later date and further edited if needed.

    * Allow screen capture and printing

    * Make a Family Tree Application.

    * Use GDI+ or predrawn graphics to draw code logic a-la-visio.

    That should do for now….

    Hi Bernard,
    Thank you very much for your brilliant suggestions.
    Currently I am trying to fix some bugs. Also I am creating a “Visual Editor” to design Organization charts. I will update it here once I done.

Leave a Reply

Your email address will not be published. Required fields are marked *