HTMLcopy
1
<label><input onclick="layoutType('forced')" type="radio" name="type" checked>Forced Layout</label>
2
<label><input onclick="layoutType('fixed')" type="radio" name="type">Fixed Layout</label>
3
<div id="container"></div>
CSScopy
16
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
label {
8
display: inline-block;
9
margin: 10px 0 0 10px;
10
}
11
#container {
12
position: absolute;
13
width: 100%;
14
top: 35px;
15
bottom: 0;
16
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create data
4
var data = {
5
nodes: [
6
{id: "Richard", x: 0, y: 100},
7
{id: "Larry", x: 50, y: 150},
8
{id: "Marta", x: 100, y: 100},
9
{id: "Jane", x: 200, y: 100},
10
{id: "Norma", x: 250, y: 50},
11
{id: "Frank", x: 250, y: 150},
12
{id: "Brett", x: 300, y: 100},
13
{id: "Tommy", x: 400, y: 100}
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
chart = anychart.graph(data);
29
30
// prevent zooming the chart with the mouse wheel
31
chart.interactivity().zoomOnMouseWheel(false);
32
33
// set the chart title
34
chart.title("Network Graph: Layout = fixed");
35
36
// set the chart title
37
chart.listen("chartDraw", function () {
38
chart.title("Network Graph: Layout = " + chart.layout().type());
39
});
40
41
// set the container id
42
chart.container("container");
43
44
// initiate drawing the chart
45
chart.draw();
46
});
47
48
// set the layout type
49
function layoutType(type) {
50
chart.layout().type(type);
51
}