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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.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', '\uF024', '\uF128', '\uF129', '\uF130', '\uF131', '\uF3ed'];

    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: 'Font Awesome 5 Free', // Use FontAwesome icons.
            color: 'black', // Use the node color.
            // Retrieve the icon based on the node id.
            style: 'bold',
            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>