Hello all! I hope this is the right category for the request.
I just need to embed and render a DOT graph in a WEB page, but I don’t know how to start.
The examples I’ve found until now, simply don’t work here from my Windows PC (nor from another Linux PC I’ve tryed on).
The very basic page is:
Hello World!
How do I render the "myhugegraph" variable here and handle it with javascript? I need to render DOT scripts, not visualize ready-made SVG images by using "img src=...".
As you can see, it’s a very basic subject, but I don’t know what scripts and links to embed. Even worse, I’m not able to figure out why the various examples didn’t work and this is the reason for which I am asking for a very basic example to copy-and-paste into a scratch page, just plain HTML.
I am not sure about the specifics because myhugegraph doesn’t appear in your message, but Graphviz ≥10.0.1 has a target -Tsvg_inline that produces a header-less SVG suitable for copy-pasting into HTML.
Thanks smattr for the fast reply. The original HTML code I wrote has been “eaten” by the editor, so that it partially disapeared : let me try to edit it in a different way.
<!DOCTYPE html>
<html>
<script>
let myhugegraph = ‘digraph {sample1 → sample2}’
</script>
<body onload=“document.getElementById(‘demo’).innerHTML = myhugegraph”>
<h1>Hello World!</h1>
<p>
How do I dynamically render the “myhugegraph” variable here and handle it with javascript? I need to render DOT scripts, not visualize ready-made SVG images using “img src=”.
<p>
<p id=“demo”></p>
</body>
</html>
Unfortunately the “paste” solution is not an option here because the resulting page has to be totally automated and responsive to some JS code that has already been written, for managing user options, choices and inputs.
I need to manage events thru JS, but first of all I must learn how to render a string of DOT code
Thanks again: I didn’t know about " target -Tsvg_inline" and this solves another issue of mine: great!
Thanks smattr. You pointed me in the right direction. Unfortunately I am not a web programmer, and it will take some time for understanding. Anyway, it is a valuable resource.
Have a nice day!
: let me try to edit it in a different way.