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
// chart type
4
var chart = anychart.cartesian();
5
6
// all data
7
var data1 = anychart.data.set([
8
{"x": 2000, value: 1100, size: 3},
9
{"x": 2001, value: 800, size: 3},
10
{"x": 2002, value: 1100, size: 3},
11
{"x": 2003, value: 1500, size: 2},
12
{"x": 2004, value: 921, size: 4},
13
{"x": 2005, value: 1000, size: 3},
14
{"x": 2006, value: 1400, size: 2}
15
]);
16
17
var data2 = anychart.data.set([
18
{"x": 2000, value: 900, size: 1},
19
{"x": 2001, value: 950, size: 4},
20
{"x": 2002, value: 800, size: 2},
21
{"x": 2003, value: 1000, size: 3},
22
{"x": 2004, value: 800, size: 3},
23
{"x": 2005, value: 750, size: 1},
24
{"x": 2006, value: 800, size: 2}
25
]);
26
27
// set data for each series
28
series1 = chart.bubble(data1);
29
series2 = chart.bubble(data2);
30
31
// set colors
32
series1.color(["#90caf9", "#6aabcc"], 0.69, 0.59, anychart.math.rect(200, 200, 400, 400), 0.8, 0.7, 0.84);
33
series1.stroke("#00897b", 1, "10 5", "round");
34
series1.hoverFill("#6aabcc", 0.3);
35
series1.hoverStroke("#00897b", 2, "10 5", "round");
36
series1.selectFill("#1976d2", 0.8);
37
series1.selectStroke("#00897b", 4, "10 5", "round");
38
39
series2.fill(["#80cbc4", "#519790"], 0.69, 0.59, anychart.math.rect(200, 200, 400, 400), 0.8, 0.7, 0.84);
40
series2.hoverFill("#80cbc4", 0.5);
41
series2.selectFill("#16685d");
42
series2.hatchFill("percent10");
43
series2.hoverHatchFill("percent30");
44
series2.selectHatchFill("percent50");
45
46
// limit bubbles size
47
chart.minBubbleSize("3%");
48
chart.maxBubbleSize("10%");
49
50
// chart title
51
chart.title("Multi-Series Bubble Chart with bubbles size limits set");
52
53
chart.legend(true);
54
55
// Sets settings for interactivity.
56
chart.interactivity({hoverMode: "byX"});
57
58
// set axes titles
59
chart.xAxis().title("Years");
60
chart.yAxis().title("Sales");
61
62
// draw
63
chart.container("container");
64
chart.draw();
65
});