All versions of this documentation
X

CSV

It exports the graph data as one CSV file for the nodes, and one for the edges. These files are downloaded by the web browser. The CSV strings are displayed below the graph.

Open in a new window.
          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container {
      top: 0;
      height: 50%;
      left: 0;
      right: 0;
      position: absolute;
    }

    #output-nodes {
      top: 50%;
      width: 50%;
      height: 100%;
      position: absolute;
      background: #eee;
      overflow: auto;
    }

    #output-edges {
      left: 50%;
      top: 50%;
      float: right;
      width: 50%;
      height: 100%;
      position: absolute;
      background: #eee;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>
  <div>
    <pre id="output-nodes"></pre>
    <pre id="output-edges"></pre>
  </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) { }
            },
            categories: ['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) { }
          }
        });
      }

      return g;
    }

    var g = randomGraph(10, 10);

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

    function exportToCSV(what) {
      // Export to CSV and add the contents under the graph
      ogma.export.csv({
        download: false,
        what: what,
        dataProperties: ['properties'],
        separator: ',',
        textSeparator: '"'
      }).then(function (csv) {
        document.getElementById('output-' + what).innerText = what.toUpperCase() + ' CSV\n\n' + csv;
      });
    }

    ['nodes', 'edges'].forEach(function (what) {
      exportToCSV(what);
    });

  </script>
</body>

</html>