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
//anychart.data.loadCsvFile("https://path_to.csv", function (data) {
4
5
6
data =
7
'Accelerate, Onsite, 15250, null, 1284,\n' +
8
'CIS Others, Offshore, null, null, 11431,\n' +
9
'CIS Others, 3rd Party, 2341, 1434, 1234,\n' +
10
'CIS Renew, Offshore, 6451, null, 1435,\n' +
11
'CIS Renew, Onsite, 715, 4134, 5344'
12
13
// create a data set
14
var dataSet = anychart.data.set(data);
15
16
// map the data
17
var seriesData_1 = dataSet.mapAs({value: 2, 'p2': 1});
18
var seriesData_2 = dataSet.mapAs({value: 3});
19
var seriesData_3 = dataSet.mapAs({value: 4});
20
21
// create a chart
22
var chart = anychart.column3d();
23
24
// enable the value stacking mode
25
chart.yScale().stackMode("value");
26
chart.yAxis().labels().format('{%Value}{groupsSeparator:.} €');
27
28
// create area series, set the data
29
var series1 = chart.column(seriesData_1);
30
series1.name("Mysirlakis Fragkiskos")
31
series1.labels()
32
.position('center')
33
.fontColor('white')
34
.enabled(true);
35
36
var series2 = chart.column(seriesData_2);
37
series2.name("Maria Vernadoy")
38
series2.labels()
39
.position('center')
40
.fontColor('white')
41
.enabled(true);
42
var series3 = chart.column(seriesData_3);
43
series3.name("John Kennendy")
44
series3.labels()
45
.position('center')
46
.fontColor('white')
47
.enabled(true);
48
49
chart.labels()
50
.enabled(true)
51
.format('{%Value}{groupsSeparator:.} €');
52
chart.hovered().labels(false);
53
54
chart.xScale().names('p2');
55
chart.xAxis(0).ticks(false);
56
57
chart.legend(true);
58
chart.animation(true,1200);
59
// set the container id
60
chart.container("container").draw();
61
62
var names = [];
63
var ticks = [];
64
var iter = dataSet.mapAs({'p1': 0, 'p2': 1}).getIterator();
65
while(iter.advance()) {
66
names.push(iter.get('p1'));
67
if (names[names.length - 1] != names[names.length - 2]) {
68
ticks.push(iter.getIndex());
69
}
70
}
71
var scale2 = anychart.scales.ordinal();
72
scale2.values(chart.xScale().values());
73
scale2.names(names);
74
scale2.ticks(ticks);
75
chart.xAxis(1)
76
.scale(scale2)
77
.stroke('none')
78
.ticks(false);
79
chart.xAxis(2)
80
.scale(scale2)
81
.labels(false)
82
.stroke('none');
83
chart.xAxis(2).ticks()
84
.length(87)
85
.position('inside');
86
// set title
87
chart.title("Awesomeness");
88
89
// interactivity settings and tooltip position
90
chart.interactivity().hoverMode('single');
91
92
chart.tooltip()
93
.positionMode('')
94
.position('center-top')
95
.anchor('center-bottom')
96
.offsetX(0)
97
.offsetY(5)
98
.titleFormat('{%SeriesName}')
99
.format('Net Value: {%Value}{groupsSeparator:.} €');
100
101
// set container id for the chart
102
chart.xAxis(0).labels().rotation(90);
103
// });
104
});