All versions of this documentation
X

Color pie

It's possible to pass an array of colors to the color attribute, in which case they are displayed as a pie-chart.

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;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>

  <script>
    'use strict';

    var COLORS = ['#161344', '#3f1c4c', '#632654', '#86315b', '#a93c63', '#cd476a', '#f35371'];

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

    // Create a rule that assigns an array of colors to each node.
    ogma.styles.addRule({
      nodeAttributes: {
        color: function (node) {
          // in this case ids are numeric, so let's use it to decide how many slices to show
          const i = + node.getId();
          return COLORS.slice(0, 1 + (i % (COLORS.length)));
        },
        radius: 10
      }
    });

    // Create a random graph
    ogma.generate.random({ nodes: 12, edges: 0 })
      .then(function (graph) {
        return ogma.setGraph(graph);
      }).then(function () {
        return ogma.layouts.grid({ locate: true });
      });
  </script>
</body>

</html>