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
var dataSet = anychart.data.set([
3
{name: 'Planning and organizational skills', applicant: 5},
4
{name: 'Flexibility / Adaptability to changes', applicant: 5, company_high: 6, company_low: 8},
5
{name: 'Results-oriented', applicant: 7, company_high: 2, company_low: 4},
6
{name: 'Commitment and responsibility', applicant: 7},
7
{name: 'Communication efficiency (adequacy and precision)', applicant: 10, company_high: 6, company_low: 8},
8
{name: 'Development of business opportunities', applicant: 8},
9
{name: 'Learning and innovation', applicant: 7}
10
]);
11
12
chart = anychart.polar();
13
14
// setup chart appearence settings
15
chart.startAngle(-27);
16
chart.innerRadius('10%');
17
18
// setup chart scales settings
19
chart.yScale().minimum(2).maximum(10);
20
chart.xScale('ordinal');
21
chart.xScale().names('name');
22
chart.sortPointsByX(true);
23
24
// setup chart interactivity and tooltip settings
25
chart.interactivity().hoverMode('single');
26
chart.tooltip().displayMode('union');
27
chart.tooltip().titleFormat("{%name}");
28
29
// setup chart axes and grid settings
30
chart.yAxis(false);
31
chart.xAxis().labels()
32
.padding(7)
33
.fontSize(10)
34
.hAlign('center')
35
.wordWrap('normal');
36
chart.xAxis().fill('rgb(237,236,239)')
37
.stroke('none');
38
chart.xAxis().ticks()
39
.length('100%')
40
.stroke('#FEFEFE');
41
42
// setup chart legend settings
43
var legend = chart.legend();
44
legend.enabled(true);
45
legend.positionMode('outside');
46
legend.itemsLayout('vertical');
47
legend.position('bottom');
48
legend.align('left');
49
legend.margin().top(-30);
50
legend.itemsSpacing(5);
51
52
// create ploygon series
53
var polygonSeries = chart.polygon(dataSet.mapAs({x: 'x', value: 'applicant'}));
54
polygonSeries.name('Applicant');
55
polygonSeries.color('#CD4A2D');
56
polygonSeries.fill('rgba(180, 180, 180, 0.3)');
57
polygonSeries.zIndex(31);
58
polygonSeries.labels().enabled(true).fontColor('#CD4A2D').fontSize(11).fontWeight('bold');
59
polygonSeries.legendItem().iconFill('#CD4A2D').iconType('line').iconStroke('6 #CD4A2D');
60
61
// create range column series
62
var companySeries = chart.rangeColumn(dataSet.mapAs({x: 'x', high: 'company_high', low: 'company_low' }));
63
companySeries.pointWidth('85%');
64
companySeries.name('Company average');
65
companySeries.color('#E2DFE0');
66
67
// set chart container id
68
chart.container('container');
69
70
// make even/odd xAxis labels coloring
71
chart.listen('chartDraw', function () {
72
var stage = chart.container().getStage();
73
stage.suspend();
74
var count = chart.xAxis().labels().getLabelsCount();
75
for (var i = 0; i < count; i++) {
76
var color = i % 2 ? '#CD4A2D' : '#4C4C4C';
77
var label = chart.xAxis().labels().getLabel(i);
78
if (label) {
79
label.fontColor(color);
80
label.draw();
81
}
82
}
83
stage.resume();
84
});
85
86
// initiate chart drawing
87
chart.draw();
88
});