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: {src: 'https://cdn-icons-png.flaticon.com/512/2143/2143318.png', mode:'fit'}},
      {id: "Code", x: 300, y: 100, group: "SDLC Stage", height: 70, fill:{src:'https://cdn-icons-png.flaticon.com/512/2305/2305913.png', mode:'fit'}},
      {id:"Build", x :500,y :100 ,group :"SDLC Stage" ,height :70 ,fill:{src :'https://cdn-icons-png.flaticon.com/512/1828/1828665.png',mode :'fit'}},
      {id:"Test" ,x :700,y :100 ,group :"SDLC Stage" ,height :70 ,fill:{src :'https://cdn-icons-png.flaticon.com/512/1792/1792819.png',mode :'fit'}},
      {id:"Deploy", x:900, y:100, group:"SDLC Stage", height:70, fill:{src:'https://cdn-icons-png.flaticon.com/512/1006/1006575.png', mode:'fit'}},
      {id:"Operate", x:1100,y :100, group:"SDLC Stage", height :70 , fill:{src:'https://cdn-icons-png.flaticon.com/512/3143/3143456.png', mode:'fit'}},
      {id:"Monitor", x:1300,y :100, group:"SDLC Stage", height :70 ,fill:{src:'https://cdn-icons-png.flaticon.com/512/3135/3135706.png', mode:'fit'}},

      // UDX Worker and its Interfaces
      {id:"UDX Worker CLI", x:300, y:300, group :"Tool" ,height :60 ,fill:{src :'https://cdn-icons-png.flaticon.com/512/5968/5968381.png',mode :'fit'}},
      {id:"UDX Worker Environment", x :700,y :300 ,group :"Tool" ,height :60 ,fill:{src :'https://cdn-icons-png.flaticon.com/512/1055/1055646.png',mode :'fit'}},
      {id:"UDX Worker AI" ,x :1100,y :300 ,group :"Tool" ,height :60 ,fill:{src :'https://cdn-icons-png.flaticon.com/512/3213/3213246.png',mode :'fit'}}
    ],
    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",...