All versions of this documentation
X

Badge

Badges are "extensions" of node shapes. Nodes can have up to 4 badges (top left, top right, bottom left, bottom-right). Badges have a stroke, a background (color or image) and can contain text or icons.

Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <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>

  <!-- Force the loading of the font awesome -->
  <i class="fa fa-camera-retro fa-1x" style="color: rgba(0,0,0,0);"></i>

<script>
'use strict';

var COLORS = ['#965E04','#C89435','#F7A456','#AFCF8A','#7B39DE','#B095C0',
  '#D24556','#93C2FA','#9DB09E','#F8C821'];

var ICONS = ['\uF11b','\uF11c','\uF11d','\uF128','\uF129','\uF130','\uF131','\uF132'];

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

// Rules to specify the node style. Functions must be deterministic.
ogma.styles.addNodeRule({
  color: function (n) { return COLORS[n.getId() % COLORS.length]; },
  text: function (n) { return 'Node ' + n.getId(); },
  radius:15,
  badges: {
    bottomRight: {
      color: '#fff',
      text: {
        font: 'FontAwesome', // Use FontAwesome icons.
        color: 'black', // Use the node color.
        // Retrieve the icon based on the node id.
        content: function (n) { return ICONS[n.getId() % ICONS.length]; }
      },
      stroke: {
        color: 'inherit', // Use the node color
        width: 1,
      }
    }
  }
});

// Generate a random graph
ogma.generate.random({nodes:10, edges:0})
  .then(function (graph) {
    // Assign this graph to Ogma.
    ogma.setGraph(graph);
    ogma.view.locateGraph();

    // Change the badge of a single node: use a
    // background image and some text content.
    ogma.getNode('0').setAttributes({
      badges : {
        bottomRight: {
          image: 'flags/fr.svg',
          text: {
            font: 'Arial',
            style: 'bold',
            content:'FR',
            color: 'black',
          }
        }
      }
    });
});

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