Network Chart

Toggle class name on click in jQuery

by andypotanin

HTML

<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-graph.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>

  <div id="container"></div>

CSS

html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.anychart-tooltip {
  width: 300px;
  background: white;
  color: black;
  box-shadow: 5px 5px 18px #333;
}

.anychart-tooltip h5 {
  text-align: center;
  margin: 5px 0;
}

.anychart-tooltip img {
  display: block;
  margin: 0 auto;
  max-height: 250px;
}

JavaScript

anychart.onDocumentReady(function () {
  // create a chart
  var chart = anychart.graph({
    nodes: [
      // Clients and External Interfaces
      { id: "SSH/SFTPS Client", x: 50, y: 50 },
      { id: "Github", x: 550, y: 50 },

      // UDX System Components
      { id: "UDX Docker", x: 200, y: 200 },
      { id: "AUTH ENGINE PORT 22", x: 400, y: 200 },
      { id: "Public Key ACL Cache", x: 400, y: 50 },

      // Application Layer
      { id: "APP Docker", x: 200, y: 350 },
      { id: "G-exec Session", x: 400, y: 350 },
    ],
    edges: [
      // Connections between clients/interfaces and UDX system
      { from: "SSH/SFTPS Client", to: "AUTH ENGINE PORT 22" },
      { from: "UDX Docker", to: "AUTH ENGINE PORT 22" },
      { from: "AUTH ENGINE PORT 22", to: "Public Key ACL Cache" },
      { from: "Public Key ACL Cache", to: "Github" },

      // Internal application connections
      { from: "APP Docker", to: "G-exec Session" },

      // Network isolation edges (visual representation only)
      { from: "UDX Docker", to: "APP Docker", labels:["namespace isolation"] },
    ]
   });

   // set the layout type
   chart.layout("fixed");

   // enable and configure the labels for the nodes
   chart.nodes().labels().enabled(true);
   chart.nodes().labels().format(function () {
     return this.id;
   });

   // disable the default tooltips
   chart.tooltip(false);

   // customize the visual appearance of nodes
   chart.nodes().normal().fill("#64b5f6");
   chart.nodes().hovered().fill("#1976d2");
   chart.nodes().selected().fill("#ef6c00");

   // customize the visual appearance of edges
   chart.edges().normal().stroke({ color:"#9e9e9e", thickness :2 });
   chart.edges().hovered().stroke("#ff6f00");

   // enable and configure labels on edges
   chart.edges().labels().enabled(true);
   chart.edges().labels().format("{%from} - {%to}");

    // set the container id for the chart and draw it
    chart.container("container").draw();

    // After drawing the...