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 graph chart that illustrates the broader SDLC workflow and where UDX Worker fits
  var chart = anychart.graph({
    nodes: [
      // SDLC Stages
      {id: "Plan", x: 100, y: 100, group: "SDLC Stage", height: 70, fill: "#90caf9"},
      {id: "Code", x: 300, y: 100, group: "SDLC Stage", height: 70, fill: "#90caf9"},
      {id:"Build", x: 500, y: 100, group: "SDLC Stage", height: 70, fill: "#90caf9"},
      {id:"Test", x: 700, y: 100, group: "SDLC Stage", height: 70, fill: "#90caf9"},
      {id:"Deploy", x: 900, y: 100, group: "SDLC Stage", height: 70, fill: "#90caf9"},
      {id:"Operate", x: 1100, y: 100, group: "SDLC Stage", height: 70, fill: "#90caf9"},
      {id:"Monitor", x: 1300, y: 100, group: "SDLC Stage", height: 70, fill: "#90caf9"},

      // UDX Worker and its Interfaces
      {id:"UDX Worker CLI", x: 300, y: 300, group: "Tool", height: 60, fill: "#81c784"},
      {id:"UDX Worker Environment", x: 700, y: 300, group: "Tool", height: 60, fill: "#81c784"},
      {id:"UDX Worker AI", x: 1100, y: 300, group: "Tool", height: 60, fill: "#81c784"}
    ],
    edges:[
      // SDLC Workflow
      {from: "Plan", to: "Code"},
      {from: "Code", to: "Build"},
      {from: "Build", to: "Test"},
      {from: "Test", to: "Deploy"},
      {from: "Deploy", to: "Operate"},
      {from: "Operate", to: "Monitor"},

      // How UDX Worker fits into the workflow
      {from: "UDX Worker CLI", to: "Code"},
      {from: "UDX Worker CLI", to: "Build"},
      {from: "UDX Worker Environment", to: "Deploy"},
      {from: "UDX Worker Environment", to: "Operate"},
      {from: "UDX Worker AI", to: "Monitor"},
      {from: "UDX Worker AI", to: "Plan"}
    ]
  });

  // Set layout type
  chart.layout().type('fixed');

  // Enable and customize node labels
  chart.nodes().labels().enabled(true).format(function() {
    return this.id;
  });

  // Customize groups with specific settings for visual distinction
  chart.group("SDLC...