title: Graphic visualisation ArborJS
body: <p>I want to add graph visualisation to my php page and for that i have written code but I don't know why it is not showing anything. Can any one help me to solve my problem.</p>
  
  <p>Thanks in advance</p>
  
  <p></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script language="javascript" type="text/javascript" src="arbor_files/jquery.js"&gt;       &lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="arbor_files/arbor.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="arbor_files/arbor-tween.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="arbor_files/graphics.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="arbor_files/renderer.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;canvas id="viewport" width="800" height="600"&gt;&lt;/canvas&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  var sys = arbor.ParticleSystem(1000, 400,1);
  sys.parameters({gravity:true});
  sys.renderer = Renderer("#viewport") ;
  var animals = sys.addNode('Animals',{'color':'red','shape':'dot','label':'Animals'});
  
  var dog = sys.addNode('dog',{'color':'green','shape':'dot','label':'dog'});
  var cat = sys.addNode('cat',{'color':'blue','shape':'dot','label':'cat'});
  
  sys.addEdge(animals, dog);
  sys.addEdge(animals, cat);
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>