How to create Graph without writing files

Hi,
I have a web application where I'm creating graph dynamically using dot language.
For every graph related request I have to recreate the graph with new data and send it back to webpage to view user.
currently I'm doing in this way.
1. create .dot file at runtime.
2. compile .dot file using commandline utility
3. get the .svg file and include it in web page.

Problem is that I have to these create file for every user and every request and its more tedious process.

Is there any way in Graphviz that I can get graph at runtime without creating physical files on hard disk.

I looked at Viz.js tool, that creates graph using JQuery. Its cool but problem is that it does not support all feather that Graphviz does support for example showing image at node (or may be I dont know how to do it in viz.js).

Looking for your input.
Thanks.
Aamir

You should consider caching

You should consider caching the output file, it can take some time to let dot do its magic.

But as for avoiding files, did you know that graphvis supports using the standard input and output streams? I use it myself in PHP.

Hi Aamir, I just built nice

Hi Aamir,

I just built nice scalable non-install graphviz editor+viewer GraphvizFiddle based on viz.js.

The version of viz.js from github is 2.28.0 (20110507.0327) (summer 2011):
https://www.ibm.com/developerworks/community/blogs/HermannSW/entry/graphvizfiddle#version

Which graphviz version does provide the "showing image at node" feature?
If that is later than 2.28.0 you might just recompile viz.js from github with the version needed.

Hermann.

Viz.js - Image problem

Hi HermannSW,
Thanks for your reply.

In Graphviz, showing image at node feature is available on the 2.16 release occurred on 9 November.

But I have a problem with show Image on a node that is supported in Graphviz but I couldnot get it working using Viz.js. could you please help me if I'm making any mistake.

digraph G {
  node [shape=plaintext]
  a [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2" ROWSPAN="2">two</TD></TR>
              <TR><TD PORT="3">three</TD></TR>
            </TABLE>>];
  b [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
              <TR><TD PORT="1">one</TD><TD PORT="2">two</TD></TR>
              <TR><TD PORT="3" COLSPAN="2"> <IMG SRC="delete.png"/> </TD></TR>
            </TABLE>>];
  a:1 -> b:2;
  b:1 -> a:2;
  b:3 -> a:3;
  }

When I run it, i gives me following error:
Error: syntax error in line 3  viz.js:105
...  <IMG SRC="delete.png"/> ... viz.js:105
in label of node b 

I have also notice that in viz.js, image attribute of Node is not working either, or I dont know how to use it with viz.js.
For example following example works fine in Graphviz but not in Viz.js:

digraph G {
node [shape=plaintext]
a [shape=box, image="C:/work/viz/delete.png"];
b [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="1"><IMG SRC="C:/work/viz/delete.png"/></TD><TD PORT="2">tw</TD></TR>
<TR><TD PORT="3" COLSPAN="2"> three</TD></TR>
</TABLE>>];
a -> b;
}

Thanks for your help.
Regards,
Aamir

Hi, I think the problem for

Hi,

I think the problem for viz.js is a file read access permission Javascript issue.

I did use the minimal 'digraph G { imgnode[image="h.png" label=""]; }' image dot file:
http://stamm-wilbrandt.de/GraphvizFiddle/imgnode/h.dot

With this sample PNG image:
http://stamm-wilbrandt.de/GraphvizFiddle/imgnode/h.png

It works fine on the command line with "dot -Tsvg -Oh.dot.svg h.dot", see the generated SVG file:
http://stamm-wilbrandt.de/GraphvizFiddle/imgnode/h.dot.svg

Comment line in that SVG fle (do view Page source) tells us that my dot version predates viz.js (2.28):
<!-- Generated by graphviz version 2.26.0 (20091210.2329)

So it is really a file permission access or location issue.
I did try several options, with no luck sofar:

  •     relative path to "h.png"
  •     absolute path
  •     http URL

It does not work with viz.js:
http://stamm-wilbrandt.de/GraphvizFiddle/imgnode/h.svg.html

The warning indicates the problem:
"Warning: No such file or directory while opening h.png ..."

"viz.js-0.0.1/viz.c" does not help.
Looking into 2.28.0 sources is needed to figure out what C code does load image:and where it is found in viz.js:
http://www.graphviz.org/pub/graphviz/ARCHIVE/graphviz-2.28.0.tar.gz

Hmm -- md5 checksum on that directory does not match ?!?!?
http://www.graphviz.org/pub/graphviz/ARCHIVE/graphviz-2.28.0.tar.gz.md5

Hermann.

Viz image issue

Hi, I also encounter the same issue like above.

I'm trying to display a graph including image which the dot are being retrieved from JSON and the web is just converting it using viz.js

Everything seems to be working fine except the image is not showing up and I'm getting the same warning.

Is there work around on this? I've looked into the vis.js and it seems to be working but I did not like the animated graph.

Any inputs?

Work around or status of this issue

Hi all, I'm currently working on displaying dot using viz.js by retrieving JSON from the web and then display it on the web directly without having to generate image before.

I've come accross this issue as well because my node contain image that need to be displayed and the image is not being displayed. I'm getting the same error

"Warning: "cube24.png" was not found as a file or as a shape library member"

"Warning: No or improper image="cube24.png" for node "TM1.Cube_PL""

I've tried using the <TABLE> as well and it didn't work.

Here is the diagraph

<script type="text/vnd.graphviz" id="TM1">
digraph TM1 {
imagepath = "C:";
rankdir = LR;ranksep = 0.3;splines = true;
node[shape="box",image="cube24.png",color="white",fontsize=8,fontname="Verdana"]"TM1.Cube_PL"[label=<<TABLE><TR><TD>PL2</TD><TD><IMG SRC="cube234.png"/></TD></TR></TABLE>>];
node[shape="box",image="cube24.png",color="white",fontsize=8,fontname="verdana"]"TM1.ProcessDataSource_FMIS"[label="FMIS", URL="TM1.ProcessDataSource_FMIS.html"];
node[shape="box",image="file:\\\c:\cube24.png",color="white",fontsize=8,fontname="Verdana"]"TM1.Cube_BS"[label="BS", URL="TM1.Cube_BS.html"];
node[shape="box",image="file:///C:/cube24.png",color="white",fontsize=8,fontname="Verdana"]"TM1.Cube_Assets"[label="Assets", URL="TM1.Cube_Assets.html"];
"TM1.Cube_PL" -> "TM1.Cube_PL"[color="darkgreen"];
"TM1.ProcessDataSource_FMIS" -> "TM1.Cube_PL"[color="darkgreen"];
"TM1.Cube_BS" -> "TM1.Cube_PL"[color="darkgreen"];
"TM1.Cube_Assets" -> "TM1.Cube_PL"[color="darkgreen"];
}
</script>

 

I appreciate any pointers with this.

 

 

You can create a dot graph

You can create a dot graph using the Graphviz cgraph library, then run the layout routine on it, then render it into svg in core, so you never have to read or write a file. So then you just have to insert the svg into the returned web page. For creating the graph and describing its attributes, see the functions in cgraph.h. To lay out the graph, call gvLayoutI(); call gvRenderData() to have the output written onto an internal buffer. For more details, see http://www.graphviz.org/pdf/Agraph.pdf and http://www.graphviz.org/doc/libguide/libguide.pdf

Hi erg, Thanks for your

Hi erg,

Thanks for your reply.

But could please explain me how can I use it. Currently I'm using Java and Jsp in web application, how can I call this library (craph.h) from java??

Thanks.

Aamir

You'll need to get some

You'll need to get some package that provides java bindings for the C functions and data structures. A swig-based package comes with Graphviz; there are some others available on the Resources page http://www.graphviz.org/Resources.php. You would then use java to create the graph, insteading of writing text to a file. There will usually be calls to layout and render the graph, in particular, render it in svg into a internal buffer which you can then insert into your web page.
Let me know if you want more details. Also, if you use renderresult, you need to register a function with the gvc, which is just one line of code. This is actually a bug, but the workaround is easy and that way you won't need to install a new version.

renderresult problem

Hi, erg!

Could please explain me how can I "register a function with the gvc".

I use graphviz-2.26.3 with java, but get error:                                                                           

Stack: [0x6f326000,0x6f377000],  sp=0x6f37376c,  free space=309

Native frames: (J=compiled Java code, j=interpreted, Vv=VM code, C=native code)

C  [libc.so.6+0x5c70e]  fwrite+0x3e

C  [libgvc.so.5+0x11d8b]

C  [libgvc.so.5+0x120c6]  gvwrite+0x46

C  [libgvc.so.5+0x124ba]  gvputs+0x3a
C  [libgvplugin_core.so.6+0x8179]

C  [libgvc.so.5+0x11837]  gvrender_begin_job+0x37
C  [libgvc.so.5+0x48321]  gvRenderJobs+0x14d1
C  [libgvc.so.5+0x17fea]  gvRender+0x6a
C  [libgv_java.so+0x4a5c]  _Z12renderresultP8Agraph_tPKcPc+0x4c
C  [libgv_java.so+0x6742]  Java_org_graphviz_gvJNI_renderresult+0x92

 

Thanks.

Alex

I'm sorry about the tardiness

I'm sorry about the tardiness of this reply, but it has taken me this long to fully understand what is really involved. My earlier answer about registering a function is correct, and trivial to do in C. However, you want to do it in java, and that turned out not so easy. I have just committed today a fix to the swig-based java package to do this correctly. Basically, there now is new function:

    byte[] gv.renderresult (SWIGTYPE_p_Agraph_t ing, string format);

You pass in a graph handle and string specifying the format, and it returns a byte array containing the desired output.

Recent comments