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 a stage
4
var stage = anychart.graphics.create("container");
5
6
// create data
7
var data = {
8
nodes: [
9
{id: "Richard"},
10
{id: "Larry"},
11
{id: "Marta"},
12
{id: "Jane"},
13
{id: "Norma"},
14
{id: "Frank"},
15
{id: "Brett"},
16
{id: "Tommy"}
17
],
18
edges: [
19
{from: "Richard", to: "Larry"},
20
{from: "Richard", to: "Marta"},
21
{from: "Larry", to: "Marta"},
22
{from: "Marta", to: "Jane"},
23
{from: "Jane", to: "Norma"},
24
{from: "Jane", to: "Frank"},
25
{from: "Jane", to: "Brett"},
26
{from: "Brett", to: "Frank"}
27
]
28
};
29
30
// create and configure the first graph chart
31
var chart1 = anychart.graph(data);
32
chart1.title("Rotation Angle: Default (0\xb0)");
33
chart1.bounds(0, 0, "50%", "100%");
34
// prevent zooming the chart with the mouse wheel
35
chart1.interactivity().zoomOnMouseWheel(false);
36
// set the chart container
37
chart1.container(stage);
38
// initiate drawing the chart
39
chart1.draw();
40
41
// create and configure the second graph chart
42
var chart2 = anychart.graph(data);
43
chart2.title("Rotation Angle: 90\xb0");
44
chart2.bounds("50%", 0, "50%", "100%");
45
// prevent zooming the chart with the mouse wheel
46
chart2.interactivity().zoomOnMouseWheel(false);
47
// set the rotation angle
48
chart2.rotation(90);
49
// set the chart container
50
chart2.container(stage);
51
// initiate drawing the chart
52
chart2.draw();
53
});