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
//create table
3
var table = anychart.standalones.table(6, 2);
4
table.cellBorder(null);
5
table.bottom(5);
6
7
//create shared scale for all charts
8
var sharedScale = anychart.scales.linear();
9
sharedScale.minimum(0);
10
sharedScale.maximum(20);
11
12
//create bullet chart
13
var bullet1 = anychart.bullet([{value: 11, fill: '#64b5f6'}, {value: 13, stroke: '#545f69'}]);
14
bullet1.axis(null);
15
bullet1.scale(sharedScale);
16
bullet1.padding(0);
17
18
//create bullet chart
19
var bullet2 = anychart.bullet([{value: 14, fill: '#64b5f6'}, {value: 13, stroke: '#545f69'}]);
20
bullet2.axis(null);
21
bullet2.scale(sharedScale);
22
bullet2.padding(0);
23
24
//create bullet chart
25
var bullet3 = anychart.bullet([{value: 9, fill: '#64b5f6'}, {value: 13, stroke: '#545f69'}]);
26
bullet3.axis(null);
27
bullet3.scale(sharedScale);
28
bullet3.padding(0);
29
30
//create bullet chart
31
var bullet4 = anychart.bullet([{value: 16, fill: '#64b5f6'}, {value: 13, stroke: '#545f69'}]);
32
bullet4.axis(null);
33
bullet4.scale(sharedScale);
34
bullet4.padding(0);
35
36
//table settings
37
table.getRow(0).height('10%');
38
table.getRow(5).height('10%');
39
//modify first column visual settings
40
table.getCol(0)
41
.width('15%')
42
.vAlign('middle')
43
.hAlign('right')
44
.fontSize(14);
45
table.getCell(0, 0).colSpan(2);
46
47
//create axis to display shared scale
48
var sharedAxis = anychart.standalones.axes.linear();
49
sharedAxis.scale(sharedScale);
50
sharedAxis.padding(-20, 0);
51
sharedAxis.ticks({position: 'inside'});
52
sharedAxis.minorTicks(false);
53
sharedAxis.labels({offsetY: 25});
54
55
//create title for table
56
tableTitle = anychart.standalones.label();
57
tableTitle.width('100%');
58
tableTitle.height('100%');
59
tableTitle.hAlign('center');
60
tableTitle.text('Seasons statistic');
61
62
//Sets contents.
63
table.contents([
64
[tableTitle, null],
65
['Winter', bullet1],
66
['Spring', bullet2],
67
['Summer', bullet3],
68
['Autumn', bullet4],
69
[null, sharedAxis]
70
]);
71
//set container
72
table.container('container');
73
//draw table
74
table.draw();
75
});