How do I use Viz.js? Viz.js is GraphViz converted to JavaScript. There is a demo at http://webgraphviz.com.

What I would like to do is send a string (dot syntax) created by a PHP function to Viz.js to produce svg output for display as "content". I know zilch about JavaScript and my trial and error attempts with drupal_add_js() and Drupal.behaviors are getting me nowhere.

Hoping someone can guide me through this. (The string from my PHP function is valid - it displays correctly if I paste it into the demo site).

Some background:

I have a working system using locally installed GraphViz and the PEAR Image_GraphViz class. The problem is shared hosting providers don't want to install GraphViz -- so this js conversion could get around that.

I have a link on a Views display that calls a function to build a chart through calls to methods in Image_GraphViz. At the end of the function I do

&lt;?php
return $gv-&gt;fetch();
?&gt;


which opens a page displaying the chart in the site theme content area.

In my attempt to use Viz.js I have first placed scripts[] = Viz.js in my .info file -- that seems correct to me and does get Viz.js into the html header. According to the author I only need one line of javascript like svg = Viz("digraph { a -&gt; b; }", "svg");.

My problem is: where do I put it? Obviously, I need to pass a string to replace the 1st parameter and that is easily obtained by

&lt;?php
$gvdata = $gv-&gt;parse();
?&gt;


Pasting such a string into the demo site produces correct results.

Does the one-liner need to be in a separate file or can it be tacked on to the main function?

I tried this:

&lt;?php
$gvdot = $gv-&gt;parse();
$gvdata = array('gvdata' =&gt; $gvdot);
drupal_add_js(array('ftree' =&gt; $gvdata), 'setting');
return drupal_add_js('jQuery(document).ready(function () {
Viz(Drupal.settings.ftree.gvdata, "svg"); });', 'inline');
?&gt;


gives a blank screen.

I also tried calling a separate file:

&lt;?php
$gvdot = $gv-&gt;parse();
$gvdata = array('gvdata' =&gt; $gvdot);
drupal_add_js(array('ftree' =&gt; $gvdata), 'setting');
drupal_add_js('dot2viz.js');
return;
?&gt;


that contained:

(function ($){
  Drupal.behaviors.ftreeBehavior = {
    attach: function (context, settings) {
      var gvdata = Drupal.settings.ftree.gvdata;
      document.body.innerHTML += Viz(gvdata, "svg");
    }
  };
})(jQuery);


also returns a blank screen.

And that's where I am -- hoping someone can explain what I'm missing and/or doing wrong.

p.s. a better formatted version is at https://drupal.org/node/2153353
I have managed to coerce the system into providing the desired result, but I'm not entirely happy with the method.
I have the main function listed in my module's .info file as previously stated.
The function that builds the dot script is a "menu callback", triggered from a views display. I have mimicked the method found here.

After the dot script is built, the function returns:

 &lt;?php
 $gvdata = $gv-&gt;parse();
  $return = '&lt;div id="svgarea"&gt; &lt;/div&gt;';
  $return .= '&lt;textarea id="dotscript" rows="20" cols="80" width="100%" wrap="off"&gt;';
  $return .= $gvdata."\n\n";
  $return .= '&lt;/textarea&gt;';
  return $return;
?&gt;


I get the javascript into the output using the js_injector module to put the following into the footer:

    jQuery(document).ready(function () {

  var svg_div = jQuery('#svgarea');
  var graphviz_data_textarea = jQuery('#dotscript');

  function UpdateGraphviz() {
    svg_div.html("");
    var data = graphviz_data_textarea.val();
    // Generate the Visualization of the Graph into "svg".
    var svg = Viz(data, "svg");
    svg_div.html("&lt;hr&gt;"+svg);
  }

  // Startup function: call UpdateGraphviz
  jQuery(function() {
      UpdateGraphviz();
  });


});


It seems to me there should be a more elegant way to do this.