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>
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...
No comments:
Post a Comment