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 data
  var data = {
    // Define nodes
    nodes: [{
        id: "Node1",
        x: 100,
        y: 100
      },
      {
        id: "Node2",
        x: 200,
        y: 100
      },
      {
        id: "Node3",
        x: 300,
        y: 100
      },
      {
        id: "Node4",
        x: 200,
        y: 200
      },
      {
        id: "Node5",
        x: 300,
        y: 200
      },
      {
        id: "Node6",
        x: 400,
        y: 200
      },
      // ... add all other nodes in a similar way
    ],
    // Define edges
    edges: [{
        from: "Node1",
        to: "Node2"
      },
      {
        from: "Node1",
        to: "Node4"
      },
      {
        from: "Node2",
        to: "Node3"
      },
      {
        from: "Node2",
        to: "Node5"
      },
      {
        from: "Node3",
        to: "Node6"
      },
      // ... add all other edges in a similar way
    ]
  };

  // Create graph chart
  var chart = anychart.graph(data);



// Configure nodes
chart.nodes().normal().height(30).fill("#64b5f6").stroke(null);
chart.nodes().hovered().fill(anychart.color.darken("#64b5f6"));
chart.nodes().selected().stroke("2 #212121");
chart.nodes().labels().enabled(true).fontSize(12).fontColor("#212121").anchor("center-top").offsetY(5);



  // Set container id for the chart and initiate drawing
  chart.container('container');
  chart.draw();
});