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