All versions of this documentation
X

Excel Advanced

It exports the graph data as one Excel file which can be customized in terms of tabs and content. This file is downloaded by the web browser.

Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/xlsx@0.11.12/dist/xlsx.core.min.js"></script>
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
  </style>
</head>
<body>
  <div id="graph-container"></div>

<script>
'use strict';

function randomGraph(N, E) {
  var g = {nodes:[], edges:[]};

  for (var i = 0; i < N; i++) {
    g.nodes.push({
      id: 'n' + i,
      attributes: {
        x: Math.random() * 100,
        y: Math.random() * 100,
        text: 'Node ' + i,
        radius: 3 + Math.random() * 3,
        color: '#FF0000'
      },
      data: {
        properties: {
          aString: 'abc ' + i,
          aCrappyString: 'cr"p\n\r ',
          aBoolean: true,
          anInteger: i,
          aFloat: Math.random(),
          anArray: [1, 2, 3],
          aNull: null,
          anUndef: undefined,
          anObject: {},
          aFunction: function (argument) {}
        },
        category: i % 2 ? 'catA' : 'catB'
      }
    });
  }

  for (var i = 0; i < E; i++) {
    g.edges.push({
      id: 'e' + i,
      source: 'n' + (Math.random() * N | 0),
      target: 'n' + (Math.random() * N | 0),
      attributes: {
        text: 'Edge ' + i,
        width: 1 + Math.random(),
        color: '#FF0000'
      },
      data: {
        aString: 'abc ' + i,
        aBoolean: true,
        anInteger: i,
        aNull: null,
        anObject: {},
        aFunction: function (argument) {},
        category: i%2 ? 'catC' : 'catD'
      }
    });
  }

  return g;
}

var g = randomGraph(10, 10);

var ogma = new Ogma({
  graph: g,
  container: 'graph-container'
});

ogma.export.xlsx({
    filename: 'my-graph.xlsx',
    tab: {
        nodes: function(node){ return node.data.category; },
        edges: function(edge){ return edge.data.category; }
    },
    nodeData: function(data, allTabs){
        if(allTabs[0] === "catA"){
            return {
                // you can rename column names in here
                counter: data.properties.aString,
                active: data.properties.aBoolean,
                related: data.properties.anArray
            };
        }
        if(allTabs[0] === "catB"){
            return {
                integer: data.properties.anInteger,
                float: data.properties.aFloat
            };
        }
        return {}; // empty
    }
    // edgeData is used as default: the full data object will be printed for catC and catD tabs
});
</script>
</body>
</html>