How do I use Viz.js?

Question

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

<?php
return $gv->fetch();
?>

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 -> 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

<?php
$gvdata = $gv->parse();
?>

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:

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

gives a blank screen.

I also tried calling a separate file:

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

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

Answer 1

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:

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

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("<hr>"+svg);
  }

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


});

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