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 for the first series
4
var data_1 = [
5
{x: 4, value: 42},
6
{x: 13, value: 59},
7
{x: 25, value: 68},
8
{x: 25, value: 63},
9
{x: 44, value: 54},
10
{x: 55, value: 58},
11
{x: 56, value: 46},
12
{x: 60, value: 54},
13
{x: 72, value: 73}
14
];
15
16
// create data for the second series
17
var data_2 = [
18
{x: 42, value: 36},
19
{x: 80, value: 80}
20
];
21
22
// create data for the third series
23
var data_3 = [
24
{x: 18, value: 74, size: 7},
25
{x: 71, value: 23, size: 14}
26
];
27
28
// create a chart
29
var chart = anychart.quadrant();
30
31
// create the first series (marker) and set the data
32
var series1 = chart.marker(data_1);
33
34
// configure the visual settings of the first series
35
series1.normal().fill("black", 0.3);
36
series1.hovered().fill("black", 0.3);
37
series1.selected().fill("black", 0.5);
38
series1.normal().stroke("black", 1);
39
series1.hovered().stroke("black", 2);
40
series1.selected().stroke("black", 4);
41
42
// create the second series (line) and set the data
43
var series2 = chart.line(data_2);
44
45
// configure the visual settings of the second series
46
series2.normal().stroke("#00cc99", 3, "10 5", "round");
47
48
// create the third series (bubble) and set the data
49
var series3 = chart.bubble(data_3);
50
51
// configure the visual settings of the third series
52
series3.normal().fill("#0066cc", 0.3);
53
series3.hovered().fill("#0066cc", 0.1);
54
series3.selected().fill("#0066cc", 0.5);
55
series3.normal().stroke("#0066cc");
56
series3.hovered().stroke("#0066cc", 2);
57
series3.selected().stroke("#0066cc", 4);
58
59
// set the chart title
60
chart.title("Quadrant Chart: Appearance");
61
62
// set the container id
63
chart.container("container");
64
65
// initiate drawing the chart
66
chart.draw();
67
});