creating tree diagrams in PHP (and mysql)

Hello,

I am trying to create a tree diagram using php (something like http://www.sapdesignguild.org/community/IMAGES/tree_graph.gif - where I will be able to label and put comments in ech node), and am looking for a script to help me. I have been able to find lots of scripts that help with bar graphs and pie charts etc, but not with producing a hieracrhy tree structure like above.

What I am trying to do is create this graph and ujse values i have stored in the mysql database as values.  For example, the top of the tree, may get its value from a projects table, and its two "children" may gets its values from other tables etc etc...I.e. so all the nodes in the trees will get its values from small little sql queries I will create manipulating themysql database.

Any help or suggestion are welcome.

Fennis
LVL 1
awesomefennisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
You could look into generating a svg graphic from php.

Adobe has plugins for about every browser available, and the SVG is just an xml file interpreted by the plugin and visualized.

-r-
0
awesomefennisAuthor Commented:
thanks roonaan....it looks promising.

However, i have no idea where to start with this!

I presume I need to get the XML in to the format of something like:
<node label="Project">
   <node label="SubSet1"/>
   <node label="SubSet2"/>
   <node label="SubSet3">
      <node label="Item1"/>
      <node label="Item2"/>
   </node>
</node>

The above is obviously just made up, but lets say I wanted to create that in to a graphic. A) How would I go about that. b) Would it have to be displayed in adobe? or canb i display that in a browser too?

Any help would be appreciated.

Fennis
0
RoonaanCommented:
A simple svg graphic is created like:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg height="400" width="400">
  <circle cx="100" cy="100" r="10" fill="black" />
  <circle cx="100" cy="200" r="10" fill="black" />
  <circle cx="200" cy="100" r="10" fill="black" />
  <circle cx="200" cy="200" r="10" fill="black" />
  <line x1="100" y1="100" x2="200" y2="100" stroke="black" stroke-width="1px" />
  <line x1="100" y1="200" x2="200" y2="200" stroke="black" stroke-width="1px" />
</svg>

So you would have to do the calculations in php and the positioning and stuff.

-r-
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

awesomefennisAuthor Commented:
thanks roonaan....that seems possible, but it seems like a lot of work to do all the calculations etc.....

I have found this link below that seems to be easier http://www.dpawson.co.uk/xsl/sect4/svg.html#d12868e206

Which seems to be a XSLT which takes an input (i presume xml?) and converts it to a tree SVG graphic.  However, I am not sure how this XSLT is to be used....but it seems once i work it out, it will be easier to use.

any ideas?

0
RoonaanCommented:
Below a sample php/svg code. You should be able to work with XSLT I think. Haven't tried it yet though.

Embed it in your html with <embed src="svg.php" /> or call the file directly.

<?php
  header('Content-type:image/svg+xml');
 
  echo '<'.'?xml version="1.0" encoding="UTF-8" standalone="no" ?'.'>';
  echo '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
  echo "\n".'<svg height="400" width="900" xmlns:xlink="http://www.w3.org/1999/xlink">';
  echo "\n".'<defs>';
  echo "\n".'<rect id="r1" width="100%" height="100%" stroke="#96B9E3" stroke-width="1" />';
  echo "\n".'<linearGradient id="g1" x1="0%" y1="0%" x2="0%" y2="100%">';
  echo "\n".'<stop stop-color="#FFFFFF" offset="0%" />';
  echo "\n".'<stop stop-color="#D7E2E6" offset="100%" />';
  echo "\n".'</linearGradient>';
  echo "\n".'</defs>';
  echo "\n".'<use x="0" y="0" xlink:href="#r1" fill="url(#g1)" />';

  function dispTree($tree, $x=0, $width=400, $nodeKey='', $level=0) {
    # Set the vertical spacing between each level
   
    $h = 100;
    # Calculate the Center for this node
    $x1=floor($x+0.5*$width);
    $y1=$level*$h;
   
    # The circle and label are drawn after the subnodes are
    # drawn, to make sure that the circle is on top of any
    # lines in the rest of the graphic
   
    # If this entry isn't an array, then it's an endnode
    if(!is_array($tree) || count($tree) < 1) {
      echo $nl.'<!-- endnode -->';
    } else {
      # Calculate the spacing allowed for each subtree
      $w = ceil($width/count($tree));
      # Keep a simple counter
      $i = 0;
      # Walk through all subnodes
      foreach($tree as $key => $data) {
        # Calculate the center point for the subnode
        $x2 = floor($x+($i+0.5)*$w);
        $y2 = floor(($level+1)*$h);
       
        # Draw the line between this node, and the parentnode
        if($nodeKey) {
          echo $nl.'  <line x1="'.$x1.'" y1="'.$y1.'" x2="'.$x2.'" y2="'.$y2.'" stroke="black" stroke-width="1px" />';
        }
        # If the subnode is an array, call this function recursively
        if(is_array($data)) {
          dispTree($data, $x+$i*$w, $w, $key, $level + 1);
        } else {
          # Else just draw a label + node circle
          echo $nl.'  <circle cx="'.$x2.'" cy="'.$y2.'" r="10" fill="white" stroke="black" stroke-width="2px" />';
          echo $nl.'  <text x="'.(12+$x+($i+0.5)*$w).'" y="'.(($level+1)*$h).'" style="font-family:Arial;font:'.(9-$level).'px;fill:black">'.$data.'</text>';
        }
        $i++;
      }
    }
   
    # Draw the node-circle and its label
    if($nodeKey) {
      echo $nl.'<circle cx="'.$x1.'" cy="'.$y1.'" r="10" fill="#dddddd" stroke="black" stroke-width="2px" />';
      echo $nl.'<text x="'.floor($x+12+0.5*$width).'" y="'.(5+$level*$h).'" style="font-family:Arial;font:'.(9-$level).'px;fill:black">'.$nodeKey.'</text>';
    }
  }

  $tree = array(
    'Project' => array('SubSet1' => array(),
                       'SubSet2' => array(),
                       'Subset3' => array('Item1', 'Item2', 'Item3'),
                       'Subset4' => array('Item1' => array('a','b'),
                                          'Item2' => array('c','d'),
                                          'Item3' => array('e','f')),  
                       )
                );
  echo '<g transform="translate(0,-80)">';
  dispTree($tree, 0, 800);  
  echo '</g>';
  echo '</svg>';
?>

Plugin download at http://www.adobe.com/svg/viewer/install/main.html

-r-
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
awesomefennisAuthor Commented:
thanks....

I am not sure what you have given me.

The PHP code above, that should be called svg.php - right?
I then have a html file called test.html where i embed the svg.php file using:
<EMBED src="svg.php" width=500 height=500 />

However, how do i then link my xml file with this svg.php?
test.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
 <node depth="1" width="4" label="a">
   <node depth="2" width="1" label="b"/>
   <node depth="2" width="1" label="c"/>
   <node depth="2" width="2" label="d">
      <node depth="3" width="1" label="e"/>
      <node depth="3" width="1" label="f"/>
   </node>
</node>

Thanks for all your help...appreciated.

I may be away for a few days, but i will definetly try anything you suggest when i get a chance.

Fennis
0
RoonaanCommented:
There are multiple things you can do.

Currently the three is hardcoded:
  $tree = array(
    'Project' => array('SubSet1' => array(),
                       'SubSet2' => array(),
                       'Subset3' => array('Item1', 'Item2', 'Item3'),
                       'Subset4' => array('Item1' => array('a','b'),
                                          'Item2' => array('c','d'),
                                          'Item3' => array('e','f')),  
                       )
                );

We can either replace that with code to fetch nodes from your database, or code to parse your xml.

-r-
0
awesomefennisAuthor Commented:
Hey Roonaan!

Ok so i am not getting any image - i get one of those small red square, blue circle and green triangle little images, , meaning the image cant be loaded.

I have an index.html which is below:
<html>
<head>
</head>
<body>

<EMBED src="svg.php" width=500 height=500 />

</body>
</html>

I also have a svg.php which is exactly the code you printed above.

Both the svg.php and index.html are in the same directory (desktop), and i have installed the adobe plugin.

is there anyway to see what exactly is going wrong? i.e. what error why there is no image being displayed?

Thanks.
0
RoonaanCommented:
Do you see the svg at: http://clients.roonaan.nl/ee/21817288/

-r-
0
awesomefennisAuthor Commented:
yeah i do....pretty cool!

so what am i doing wrong?
0
RoonaanCommented:
Not sure.

Can you copy the svg source from that page into one of your files. Maybe it's just a copy and past error.

Strange though that you got a red cross, that usually only happens with <img> tags and not with <embed>

-r-
0
awesomefennisAuthor Commented:
i copied the code from your website....and it still doesnt work.

so all i need is that svg.php code and an index.html which embeds the svg.php - right?

thats strange that it doesnt work!
0
RoonaanCommented:
Try adding:
<?php
  error_reporting(E_ALL);
  ini_set('display_errors','1');
?>

Might be that we are overlooking something.

What happens when you go to svg.php directly?
0
awesomefennisAuthor Commented:
not sure where you want me to pur the error reporting code. in svg.php or index.html?

also, my svg.php is just made up of the php code that is on your website i.e. the start of the file is <?php
and the end is  ?>

There is no html tags in th svg.php file - is that right?
0
awesomefennisAuthor Commented:
i tried to open the svg.php directly, and it doesnt open - which i rpesume is something to do with whgat i explained above? that it is just the php code? ...perhaps.
0
RoonaanCommented:
When you view svg.php from your browser you see the <?php tag?

Then the php doesn't get parsed, which is strange.

-r-
0
awesomefennisAuthor Commented:
I can't opne the svg.php in my browser..it doesnt open, i dont see anything.
0
RoonaanCommented:
Can you comment out the header('Content-type:.. etc line?

-r-
0
awesomefennisAuthor Commented:
commented it out and still doesnt work, tried to access it directly and through index.html - no luck.
0
awesomefennisAuthor Commented:
thanks for all your help :) A+
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.