HTMLcopy
1
<div id="container"></div>
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
3
// create data
4
var data = {
5
nodes: [
6
{id: "Richard"},
7
{id: "Larry"},
8
{id: "Marta",
9
normal: {
10
height: 40,
11
shape: "star5",
12
fill: "#ffa000",
13
stroke: null
14
},
15
hovered: {
16
height: 55,
17
shape: "star5",
18
fill: "white",
19
stroke: "3 #ffa000"
20
},
21
selected: {
22
height: 55,
23
shape: "star5",
24
fill: "#ffa000",
25
stroke: "3 #333333"
26
}
27
},
28
{id: "Jane"},
29
{id: "Norma"},
30
{id: "Frank"},
31
{id: "Brett"},
32
{id: "Tommy",
33
normal: {
34
height: 20,
35
shape: "diagonal-cross",
36
fill: "#ff3300",
37
stroke: null
38
},
39
hovered: {
40
height: 27,
41
shape: "diagonal-cross",
42
fill: "white",
43
stroke: "3 #ff3300"
44
},
45
selected: {
46
height: 27,
47
shape: "diagonal-cross",
48
fill: "#ff3300",
49
stroke: "3 #333333"
50
}
51
}
52
],
53
edges: [
54
{from: "Richard", to: "Larry"},
55
{from: "Richard", to: "Marta"},
56
{from: "Larry", to: "Marta"},
57
{from: "Marta", to: "Jane"},
58
{from: "Jane", to: "Norma"},
59
{from: "Jane", to: "Frank"},
60
{from: "Jane", to: "Brett"},
61
{from: "Brett", to: "Frank"}
62
]
63
};
64
65
// create a chart and set the data
66
var chart = anychart.graph(data);
67
68
// prevent zooming the chart with the mouse wheel
69
chart.interactivity().zoomOnMouseWheel(false);
70
71
// set the chart title
72
chart.title("Network Graph: Individual Nodes");
73
74
// set the container id
75
chart.container("container");
76
77
// initiate drawing the chart
78
chart.draw();
79
});