HTMLcopy
1
<html>
2
<head>
3
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
4
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script>
5
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
6
<style type="text/css"></style>
7
</head>
8
<body>
9
<div id="container"></div>
10
</body>
11
</html>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
anychart.data.loadJsonFile("https://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data.json", function (data) {
3
4
// create a chart from the loaded data
5
var chart = anychart.graph(data);
6
7
// set the title
8
chart.title("Network Graph showing the battles in Game of Thrones");
9
10
// access nodes
11
var nodes = chart.nodes();
12
13
// set the size of nodes
14
nodes.normal().height(30);
15
nodes.hovered().height(45);
16
nodes.selected().height(45);
17
18
// set the fill of nodes
19
nodes.normal().fill("#ffa000");
20
nodes.hovered().fill("white");
21
nodes.selected().fill("#ffa000");
22
23
// set the stroke of nodes
24
nodes.normal().stroke(null);
25
nodes.hovered().stroke("#333333", 3);
26
nodes.selected().stroke("#333333", 3);
27
28
// draw the chart
29
chart.container("container").draw();
30
31
});
32
});