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)
drawchart = method to draw chart
onnodeclick = fires when user click on a node.
onnodedblclick = fires when user double-click on a node.
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.
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
customized chart with nodepicture, nodecaptio and tooltiptext properies
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.
local lo_bmp as xfcbitmap of "system.drawing.prg"
*-- recreate bitmap object if required
*-- get bitmap object
*-- add watermark
*-- draw border
please find attached class and samples.
hope this is a useful class for you.
- 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
- added new method printchart()
- added new method savetobitmap().
- updated sample files with new functionalities