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 = [
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 = [
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
// limit bubbles size
32
chart.minBubbleSize("3%");
33
chart.maxBubbleSize("10%");
34
35
// chart title
36
chart.title("Bubble Chart: Size (Percent)");
37
38
chart.legend(true);
39
40
// Sets settings for interactivity.
41
chart.interactivity({hoverMode: "by-x"});
42
43
// set the titles of the axes
44
chart.xAxis().title("Year");
45
chart.yAxis().title("Sales, $");
46
47
// draw
48
chart.container("container");
49
chart.draw();
50
});