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
height: 60,
12
fill: {
13
src: "https://cdn.anychart.com/samples-data/graph/avengers/pepper.jpg"
14
}
15
},
16
{id: "Frank"},
17
{id: "Brett"},
18
{id: "Tommy"}
19
],
20
edges: [
21
{from: "Richard", to: "Larry"},
22
{from: "Richard", to: "Marta"},
23
{from: "Larry", to: "Marta"},
24
{from: "Marta", to: "Jane"},
25
{from: "Jane", to: "Norma"},
26
{from: "Jane", to: "Frank"},
27
{from: "Jane", to: "Brett"},
28
{from: "Brett", to: "Frank"}
29
]
30
};
31
32
// create a chart and set the data
33
var chart = anychart.graph(data);
34
35
// prevent zooming the chart with the mouse wheel
36
chart.interactivity().zoomOnMouseWheel(false);
37
38
// set the chart title
39
chart.title("Network Graph: Nodes (Custom Images)");
40
41
// set the container id
42
chart.container("container");
43
44
// initiate drawing the chart
45
chart.draw();
46
});