Network Graph

---

Html

JavaScript

/* Options */
var options = {
  // An array of nodes.
  nodes: [
    {
      // Unique node id.
      id: 'node-a',
      // X coordinate on canvas.
      x: 30,
      // Y coordinate on canvas.
      y: 100,
      // Color of the node circle.
      color: getRandomColor(),
      // Radius of the node circle.
      size: 15,
      // Text around the node.
      text: {
        // Display value.
        value: 'Node A',
        // Font color.
        color: '#007bfb',
        // Canvas font style. For instance, '12px Arial'. 
        font: '16px Arial',
        // X offset from the center of the node.
        xOffset: 0,
        // Y offset from the center of the node.
        yOffset: -20
      },
      // An array of adjacent nodes and edges. It is used to draw a line from current node to other nodes without direction. If ignored, no line is drawn.
      neighbors: [{
        // Node id.
        id: 'node-b',
        // Edge.
        edge: {
          // Line width.
          width: 1,
          // Line color.
          color: '#007bfb',
          // Canvas dash line style. If ignored, a solid line is drawn.
          dash: [2, 2]
        }
      }]
    }
  ] 
};

/* Constructor */
var networkGraph = new zeu.NetworkGraph('network-graph', options);

/* Function */
// Add a list of nodes to the graph.
networkGraph.addNodes([
  {
    // Accept the same node object listed above.
  }
]);

// Add one neighbor to the graph.
networkGraph.addNeighbor(
  // Source node id.
  'node-a', 
  // Destination node and edge style.
  {
    // Destination node id.
    id: 'node-b',
    // Edge style.
    edge: {
      // Line width.
      width: 3,
      // Line color.
      color: '#007bfb',
      // Canvas dash line style. If ignored, a solid line is drawn.
      dash: [5, 5]
    }
  }
);

// Send one signal from one node to another node.
networkGraph.signal({
  // Source node id.
  from: 'node-a',
  // Destination node id.
  to: 'node-b',
  // Signal color.
  color: '#007bfb',
  // Duration.
  duration: 15000,
  // Signal radius.
  size: 3
});

More examples

Distributed system communication.

Use an image as background.