All versions of this documentation
X

Pulse

Node pulses are concentric circles that go away from nodes. Pulses can be triggered once or several times. More info here.

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', 'white'];

var pulse_options = {
  number: 5,
  duration: 1700,
  interval: 600,
  startColor: 'inherit',
  endColor: 'rgb(113,199,183)',
  width: 5,
  startRatio: 1,
  endRatio: 5,
};

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

// Change the background color.
ogma.setOptions({ backgroundColor: 'rgb(113,199,183)'});

// Rule to randomly color the nodes.
// This random function must be deterministic.
ogma.styles.addNodeRule({
  color: function (n) { return COLORS[n.getId() % COLORS.length]; }
});

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

    // Trigger a pulse manually on the node '0'
    ogma.getNode('0').pulse(pulse_options);

    // Set a timer that triggers pulses every 3s.
    var current_pulse = 0;
    setInterval( function () {
      ogma.getNode(current_pulse++ % N).pulse(pulse_options);
      current_pulse++;
    }, 3000);
  });
</script>
</body>
</html>