Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

creating tree diagrams in PHP (and mysql)

Posted on 2006-04-18
20
Medium Priority
?
4,488 Views
Last Modified: 2013-12-12
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
0
Comment
Question by:awesomefennis
  • 11
  • 9
20 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 16476300
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
 
LVL 1

Author Comment

by:awesomefennis
ID: 16477787
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16477969
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:awesomefennis
ID: 16478038
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
 
LVL 49

Accepted Solution

by:
Roonaan earned 360 total points
ID: 16479227
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
 
LVL 1

Author Comment

by:awesomefennis
ID: 16479508
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16479528
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
 
LVL 1

Author Comment

by:awesomefennis
ID: 16505346
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16505398
Do you see the svg at: http://clients.roonaan.nl/ee/21817288/

-r-
0
 
LVL 1

Author Comment

by:awesomefennis
ID: 16505615
yeah i do....pretty cool!

so what am i doing wrong?
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16505642
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
 
LVL 1

Author Comment

by:awesomefennis
ID: 16505970
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16506003
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
 
LVL 1

Author Comment

by:awesomefennis
ID: 16506160
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
 
LVL 1

Author Comment

by:awesomefennis
ID: 16506167
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16506193
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
 
LVL 1

Author Comment

by:awesomefennis
ID: 16506390
I can't opne the svg.php in my browser..it doesnt open, i dont see anything.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16506443
Can you comment out the header('Content-type:.. etc line?

-r-
0
 
LVL 1

Author Comment

by:awesomefennis
ID: 16506762
commented it out and still doesnt work, tried to access it directly and through index.html - no luck.
0
 
LVL 1

Author Comment

by:awesomefennis
ID: 16523519
thanks for all your help :) A+
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question