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
4
var data1 = [
5
{x: "Jan", low: 1000, q1: 1050, median: 1200, q3: 1800, high: 2000, outliers: [800, 2500, 3200]},
6
{x: "Feb", low: 2500, q1: 3000, median: 3800, q3: 3900, high: 4000},
7
{x: "Mar", low: 2000, q1: 2300, median: 2500, q3: 2900, high: 3000},
8
{x: "Apr", low: 4000, q1: 5000, median: 6500, q3: 6900, high: 7200, outliers: [8930]},
9
{x: "May", low: 8000, q1: 8400, median: 8500, q3: 8800, high: 9000, outliers: [6950, 3000]}
10
];
11
var data2 = [
12
{x: "Jan", low: 4000, q1: 4050, median: 6200, q3: 6800, high: 7000},
13
{x: "Feb", low: 1500, q1: 2000, median: 2500, q3: 3000, high: 3500},
14
{x: "Mar", low: 2000, q1: 2200, median: 3000, q3: 3200, high: 3000},
15
{x: "Apr", low: 3600, q1: 4000, median: 6900, q3: 7300, high: 8000},
16
{x: "May", low: 7800, q1: 8050, median: 8350, q3: 8400, high: 9000}
17
];
18
19
// create a chart
20
var chart = anychart.box();
21
22
// create the first series, set the data and name
23
series1 = chart.box(data1);
24
series1.name("Documentary Movies");
25
26
// configure the visual settings of the first series
27
series1.normal().fill("#00cc99", 0.3);
28
series1.hovered().fill("#00cc99", 0.1);
29
series1.selected().fill("#00cc99", 0.5);
30
series1.normal().stroke("#00cc99", 1, "10 5", "round");
31
series1.hovered().stroke("#00cc99", 2, "10 5", "round");
32
series1.selected().stroke("#00cc99", 4, "10 5", "round");
33
34
// create the second series, set the data and name
35
series2 = chart.box(data2);
36
series2.name("Sci-Fi Movies");
37
38
// configure the visual settings of the second series
39
series2.normal().fill("#0066cc", 0.3);
40
series2.hovered().fill("#0066cc", 0.1);
41
series2.selected().fill("#0066cc", 0.5);
42
series2.normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);
43
series2.hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);
44
series2.selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);
45
series2.normal().stroke("#0066cc");
46
series2.hovered().stroke("#0066cc", 2);
47
series2.selected().stroke("#0066cc", 4);
48
49
// set the chart title
50
var title = chart.title("Box Chart: Appearance");
51
52
// set the interactivity mode
53
chart.interactivity("by-x");
54
55
// enable the legend
56
chart.legend(true);
57
58
// set the container id
59
chart.container("container");
60
61
// initiate drawing the chart
62
chart.draw();
63
});