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 for the first chart
7
var data1 = [
8
{x: "John", value: 5000},
9
{x: "Richard", value: 5000},
10
{x: "Larry", value: 5000},
11
{x: "Marta", value: 15000}
12
];
13
14
// create data for the second chart
15
var data2 = [
16
{x: "January", value: 2000},
17
{x: "February", value: 4000},
18
{x: "March", value: 10000},
19
{x: "April", value: 9000},
20
{x: "May", value: 5000}
21
];
22
23
// create and configure the first chart
24
var chart1 = anychart.pie(data1);
25
chart1.bounds(0, "10%", "40%", "90%");
26
// disable the legend
27
chart1.legend(false);
28
// set the chart container
29
chart1.container(stage);
30
// initiate drawing the chart
31
chart1.draw();
32
33
// create and configure the second chart
34
var chart2 = anychart.line();
35
var series = chart2.line(data2);
36
series.name("Total");
37
series.color("#455a64");
38
chart2.bounds("40%", "10%", "60%", "90%");
39
// set the chart container
40
chart2.container(stage);
41
// initiate drawing the chart
42
chart2.draw();
43
44
// create a standalone legend
45
var legend = anychart.standalones.legend();
46
47
// set the source of legend items
48
legend.itemsSource([chart1, chart2]);
49
50
// set the padding of the legend
51
legend.padding(10);
52
53
// set the container for the legend
54
legend.container(stage);
55
56
// draw the legend
57
legend.draw();
58
});