Showing posts with label draw graph using js. Show all posts
Showing posts with label draw graph using js. 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...