Member Avatar for 54uydf

this is like my last hope guys! lol
I need to generate a diagram that looks sort of like this only 4 times bigger using data from db
http://imageshack.us/photo/my-images/827/unledoyt.jpg/
my db is MySql, I don't think this is possible using php, but I saw there are a lot of grapf and charts generators in JavaScript, so I'm thinking this is not that far from that, though I haven't seen something that looks like this.
I also like to add that I don't know JS nor Ajax, so I'm trying to find out if it's possible to achive this using those scripts, and if not any other suggestions would be appreciated!

  • 3 Contributors
  • 5 Replies
  • 126 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Two practical, realistic paths given the two-week limit and basic PHP/HTML/CSS skills: generate the diagram server-side as an image/SVG (minimal JavaScript) or use a small client-side graph library and pump your PHP/JSON into it. was right that a mix of tech is common; ’s pointer about existing generators is also worth checking before building from scratch.

Server-side (fast to ship, no JS learning curve)

  • Let Graphviz do layout and export SVG or PNG. PHP creates a DOT string from your rows, calls dot to render, and serves the resulting SVG. Advantages: automatic, readable layouts and instant “one‑click” output you can cache. Caveats: Graphviz must be installed on the server and you must sanitize inputs and use unique temp filenames to avoid injection/race issues.
  • Example (conceptual):
// build DOT from $edges = [['from'=>'A','to'=>'B'], ...]
$dot = "digraph G {\nrankdir=LR;\nnode [shape=box];\n";
foreach ($edges as $e) {
  $dot .= '"' . addslashes($e['from']) . '" -> "' . addslashes($e['to']) . "\";\n";
}
$dot .= "}\n";
file_put_contents('/tmp/graph.dot', $dot);
exec('dot -Tsvg /tmp/graph.dot -o /tmp/graph.svg');
echo file_get_contents('/tmp/graph.svg');

Client-side (interactive, more flexible visuals)

  • Use a proven library so you only need a little JS: consider vis.js, Cytoscape.js or jsPlumb (for DOM-box connectors). Have PHP output a JSON structure and include the library to render nodes/edges. This approach gives zoom, pan, drag and live updates but needs small JS glue code and the library files.
  • Concept: var graph = <?php echo json_encode($graph); ?>; then feed graph.nodes/graph.edges to the library.

Practical tips

  • For left-to-right/order diagrams use Graphviz rankdir=LR or the library’s hierarchical layout.
  • Cache output by hashing data to avoid regenerating on every request.
  • For very large graphs, paginate, cluster, or let users expand nodes on demand.
  • If using exec/cmd, enforce timeouts, sanitize inputs, and store outputs outside webroot or stream SVG directly.

References: Graphviz, vis.js (network), Cytoscape.js, jsPlumb (GitHub).

Recommended Answers

All 5 Replies

Member Avatar for Member #905211

Yes it is possible. You would need a mix of PHP, JavaScript, CSS and HTML. Is this easy? No, not by a long shot, so if you want to do this yourself, you will either need to spend a lot of time learning (a year or 2, maybe more) or find something that already does everything you want.

Member Avatar for 54uydf

umm I don't have a year...I can give this about 2 weeks, more than that it's just not worth it..
but what is the basic concept if I might ask?
I know basic php, html and CSS

Member Avatar for Member #905211

Connect to database
Pull information
Display information

That is the basic concept. Beyond that it completely depends on how dynamic you want it, what kind of diagram, what you are diagramming...

Member Avatar for 54uydf

well that is obvious and I can do that easily.
the diagram is like the one I showed in the link.
I have a DB table with records that have connection to one another. sort of like object a comes before t, and object k comes after c. it's sort of like a Gantt, that shows the order of the objects.
what I want to do is to allow people with 1 click to generate the diagram according to the data that is always changing
example- table1-
Id | pre | post
a..|..0..|..d..
d..|..a..|..g..
g..|..d..|..x..
g..|..b..|..x..
g..|..c..|..x..
......
......


I have all the connections in the DB, what I'm trying to do is to make some sort of way to show all the connections on the page, in a graphical and simple way.
the main problem is how to connect the boxes.
I can do the boxes with the object's name with divs or pictures created with GD library..but how do I connect them?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.