1

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

3
  • Hello and welcome. Please remember that, as help center points out, questions that are substantially about code, where the code is not shown, are possibly closed. There are good introductory materials, like official Managing JavaScript in Drupal 7, so if you tried to use it, show us your attempts. We are glad to help fellow developers, but we need to see you are one ;) We will not write code from scratch, at least not here where we are not paid to do it.
    – Mołot
    Dec 9 '13 at 8:43
  • additional info added Dec 11 '13 at 0:48
  • 3 reopen votes - 2 more ant it will be reopened. Thanks for participation :)
    – Mołot
    Dec 11 '13 at 7:27
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.

1
  • Obviously, I don't have a clue on how to format code blocks. Dec 17 '13 at 0:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.