Suggestions for coding connecting lines on a dynam

Results 1 to 3 of 3

Thread: Suggestions for coding connecting lines on a dynam

  1. #1
    Join Date
    Dec 1969

    Default Suggestions for coding connecting lines on a dynam

    I am attempting to develop a dynamic org chart. I have a pretty good idea about how to collect user input and display each "box" in the hierarchy. My problem is drawing lines between each of the boxes on the chart. Are there any experienced ASP / JavaScript geniuses out there who can lend a hand?<BR><BR>Thanks!<BR>

  2. #2
    Join Date
    Dec 1969

    Default Use tables with bgcolor

    Use tables.<BR><BR>1 table corresponds to one line to draw<BR><BR>Each tables has a different background color<BR><BR>Each tables has a different length.<BR><BR><BR>Quick example :<BR><BR>Number of patients : 15<BR>Number of doctors : 5<BR><BR>&#060;table bgcolor="red" border="0" cellpadding="0" cellspacing="0"&#062;<BR>&#060;tr&#062;<BR>for i=0 to PatientCount-1<BR>&#060;td width="10" heigth="10"&#062;&nbsp;&#060;/td&#062;<BR>Next<BR>&#060;/tr&#062;<BR>&#060;/table&#062;<BR><BR>&#060;table bgcolor="blue" border="0" cellpadding="0" cellspacing="0"&#062;<BR>&#060;tr&#062;<BR>for i=0 to DoctorCount-1<BR>&#060;td width="10" heigth="10"&#062;&nbsp;&#060;/td&#062;<BR>Next<BR>&#060;/tr&#062;<BR>&#060;/table&#062;<BR><BR>This will give a 150 pixels long red line (representing the patient count)<BR><BR>and<BR><BR>a 50 pixels long red line (representing doctor count)<BR><BR><BR>Eniac

  3. #3
    Join Date
    Dec 1969

    Default RE: Suggestions for coding connecting lines on a d

    You can look for DynAPI or another DHTML cross browser library that will draw lines. If you want people to be able to print things created this way, they need to check "print background graphics and colors" or similar option in their browser.<BR><BR>Doing org charts should be pretty easy because you probably won&#039;t want to draw diagonal lines. You don&#039;t really need to use javascript/DHTML to do it, but if you don&#039;t want to do the work yourself to make it cross browser, it is probably easiest to use a library.<BR><BR>If you want to make your own, to just draw the lines, make a &#060;div style="postion:absolute;width:1px;height:100px;lef t:0px;top:0px;bgcolor:black;background-color:black;"&#062; inserting the values you want for top/left/width/height and background color (note I didn&#039;t test in Netscape and I forget the exact name of the background color style property, but you can look it up).<BR><BR>If you need help with the connection coordinates, I would definitely use DynAPI because you can then you can write some classes which will do things like<BR>var l = new Line(<BR> box2.left + box2.width / 2,<BR> + box2.height,<BR> box1.left + box1.width / 2,<BR>;<BR>which might make a line from the bottom center of box2 to the top center of box1. Also, DynAPI implements drag and drop!<BR><BR>-joe

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts