Skip to content
  1. Tutorials

Using Ogma with SystemJS

This example demonstrate how to load Ogma, load a optional dependency and create an instance of Ogma using SystemJS:

html
<div
  id="graph-container"
  style="position: absolute; width: 800px; height: 600px; border: 1px solid black;"
></div>
<script src="path/to/system.js"></script>
<script>
  var Ogma = null;

  SystemJS.import('../../build/ogma.js')
    .then(function (ogmaLibrary) {
      Ogma = ogmaLibrary;

      return SystemJS.import('../../lib/xlsx.min.js');
    })
    .then(function (xlsx) {
      Ogma.libraries['xlsx'] = xlsx;

      let ogma = new Ogma({
        container: 'graph-container',
        renderer: 'canvas'
      });

      ogma.generate
        .random()
        .then(function (graph) {
          return ogma.setGraph(graph);
        })
        .then(function () {
          ogma.view.locateGraph();
          return ogma.layouts.hierarchical();
        })
        .then(function () {
          return ogma.export.xlsx({ filename: 'my-graph.xlsx' });
        });
    });
</script>