Other versions of this documentation User manual Administration manual REST API documentation Ogma documentation Documentation home Linkurious website
All versions of this documentation
X

Multiple instances


Open in a new window. 
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container-top-left { top: 0; height:50%; left: 0; width:50%; position: absolute; }
    #graph-container-bottom-left { top: 50%; bottom: 0; left: 0; width: 50%; position: absolute; }
    #graph-container-top-right { top: 0; height:50%; left: 50%; right: 0; position: absolute; }
    #graph-container-bottom-right { top: 50%; bottom: 0; left: 50%; right: 0; position: absolute; }
  </style>
</head>
<body>
  <div id="graph-container-top-left"></div>
  <div id="graph-container-bottom-left"></div>
  <div id="graph-container-top-right"></div>
  <div id="graph-container-bottom-right"></div>
<script>
'use strict';

var ogmaTopLeft = new Ogma({
  container: 'graph-container-top-left'
});

var ogmaBottomLeft = new Ogma({
  container: 'graph-container-bottom-left'
});

var ogmaTopRight = new Ogma({
  container: 'graph-container-top-right'
});

var ogmaBottomRight = new Ogma({
  container: 'graph-container-bottom-right'
});

ogmaTopLeft.generate.random({nodes:20, edges:50}).then(function(g) {
  ogmaTopLeft.setGraph(g); ogmaTopLeft.view.locateGraph();
});
ogmaBottomLeft.generate.random({nodes:20, edges:50}).then(function(g) {
  ogmaBottomLeft.setGraph(g); ogmaBottomLeft.view.locateGraph();
});
ogmaTopRight.generate.random({nodes:20, edges:50}).then(function(g) {
  ogmaTopRight.setGraph(g); ogmaTopRight.view.locateGraph();
});
ogmaBottomRight.generate.random({nodes:20, edges:50}).then(function(g) {
  ogmaBottomRight.setGraph(g); ogmaBottomRight.view.locateGraph();
});

</script>
</body>
</html>