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
{id: "Jane"},
10
{id: "Norma"},
11
{id: "Frank"},
12
{id: "Brett"},
13
{id: "Tommy"}
14
],
15
edges: [
16
{from: "Richard", to: "Larry"},
17
{from: "Richard", to: "Marta"},
18
{from: "Larry", to: "Marta"},
19
{from: "Marta", to: "Jane"},
20
{from: "Jane", to: "Norma"},
21
{from: "Jane", to: "Frank"},
22
{from: "Jane", to: "Brett"},
23
{from: "Brett", to: "Frank"}
24
]
25
};
26
27
// create a chart and set the data
28
var chart = anychart.graph(data);
29
30
// prevent zooming the chart with the mouse wheel
31
chart.interactivity().zoomOnMouseWheel(false);
32
33
// access nodes
34
var nodes = chart.nodes();
35
36
// set the size of nodes
37
nodes.normal().height(40);
38
nodes.hovered().height(55);
39
nodes.selected().height(55);
40
41
// set the shape of nodes
42
nodes.normal().shape("star5");
43
44
// set the fill of nodes
45
nodes.normal().fill("#ffa000");
46
nodes.hovered().fill("white");
47
nodes.selected().fill("#ffa000");
48
49
// set the stroke of nodes
50
nodes.normal().stroke(null);
51
nodes.hovered().stroke("#ffa000", 3);
52
nodes.selected().stroke("#333333", 3);
53
54
// set the chart title
55
chart.title("Network Graph: Nodes");
56
57
// set the container id
58
chart.container("container");
59
60
// initiate drawing the chart
61
chart.draw();
62
});