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 data set on our data
3
var dataSet = anychart.data.set([
4
['January', 8.1, 2.3],
5
['February', 8.4, 2.1],
6
['March', 11.4, 3.9],
7
['April', 14.2, 5.5],
8
['May', 17.9, 8.7],
9
['June', 21.1, 11.7],
10
['July', 23.5, 13.9],
11
['August', 23.2, 13.7],
12
['September', 19.9, 11.4],
13
['October', 15.6, 8.4],
14
['November', 11.2, 4.9],
15
['December', 8.3, 2.7]
16
]);
17
18
// map data for the first series, take x from the zero column and value from the first column of data set
19
var data1 = dataSet.mapAs({'x': 0, 'value': 1});
20
// map data for the second series, take x from the zero column and value from the second column of data set
21
var data2 = dataSet.mapAs({'x': 0, 'value': 2});
22
23
// create radar chart
24
var chart = anychart.radar();
25
26
// set container id for the chart
27
chart.container('container');
28
29
// set chart yScale settings
30
chart.yScale()
31
.minimum(0)
32
.maximumGap(0)
33
.ticks().interval(5);
34
35
// set axes labels settings
36
chart.xAxis().labels().padding(5);
37
38
// set chart legend settings
39
chart.legend()
40
.align('center')
41
.enabled(true);
42
43
// set chart margin settings
44
chart.margin().bottom(40);
45
46
// create point data labels formation function
47
var labelFormattingFunction = function () {
48
return this.x + ': ' + this.value.toFixed(2)
49
};
50
51
// create first series with mapped data
52
var series1 = chart.area(data1).name('Day (max)');
53
// set tooltip formatting settings
54
series1.tooltip().format(labelFormattingFunction);
55
56
var series2 = chart.area(data2).name('Night (min)');
57
// set tooltip formatting settings
58
series2.tooltip().format(labelFormattingFunction);
59
60
// initiate chart drawing
61
chart.draw();
62
});