Showing posts with label sigmajs. Show all posts
Showing posts with label sigmajs. Show all posts

Wednesday 11 July 2012

Graph Draw

                                                                                                        Pinakin Nayi
                                                                                                        OpenERP, Gandhinagar
                                                                                                        nayi.pinakin@gmail.com
                                                                                                        Mo. 08460643746

Hello Friends ,

You can use it, as per your requirement that will draw graph.

  You all are going to search a "How to draw Graph using java Script or Jquery".

I hope this will be helpful to you all.

Primarily just create with simple .html file.

Requirements :
                     sigma.min.js   you can download it from http://sigmajs.org/


<html>
<head>
            <script src="js/sigma.min.js"></script>
</head>
<body>
   <h1>Hello</h1>
   <div class="container">
        <div class="sigma-parent" id="sigma-example-parent">
                <p class="sigma-expand" id="sigma-example">
               </p>
       </div>
   </div>
    <script type="text/javascript">
var sigRoot = document.getElementById('sigma-example');
         var sigInst = sigma.init(sigRoot);
         node1 = {label: 'Hello', color: '#ff0000', size:5, x:1, y:3};
         node2 = {label: 'World', color: '#bb0000', size:10,x:2, y:2};
         sigInst.addNode('hello', node1);
        sigInst.addNode('world', node2);
        sigInst.addEdge('hello_world','hello','world', {size:2, label:"Hello World"});
        sigInst.draw();
        sigInst.drawingProperties({
                  defaultLabelColor: '#ccc',
                  font: 'Arial',
                  edgeColor: 'source',
                  defaultEdgeType: 'curve'
       })
       sigInst.graphProperties({
                  minNodeSize: 1,
                  maxNodeSize: 10
       });
   </script>

<style type="text/css">
  /* sigma.js context : */
  .sigma-parent {
    position: relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    height: 500px;
  }
  .sigma-expand {
    position: absolute;
    width: 30%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .buttons-container{
    padding-bottom: 8px;
    padding-top: 12px;
  }
</style>

</body>
</html>

...Enjoy...