<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
var dataSet = anychart.data.set([
[15, 9, 14.29, 10.7, 8.589, 13.44],
[30, 7, 42.96, 8.75, 10.59, 9.12],
[45, 10, 57.64, 8.82, 54.26, 6.15],
[60, 7, 57.7, 9.83, 66.81, 8.23],
[75, 8, 54.94, 11.1, 19.95, 7.7],
[90, 7, 26.39, 4.91, 23.21, 5.36],
[105, 9, 49.62, 11.81, 9.49, 13.19],
[120, 3, 87.82, 6.82, 98.62, 7.02],
[135, 6, 81.56, 7.71, 35.13, 9.22],
[150, 2, 44.62, 5.18, 62.21, 4.61],
[165, 5, 107.54, 4.75, 161.42, 7.75],
[180, 6, 43.88, 10.07, 153.18, 5.65],
[195, 3, 56.48, 6.11, 153.08, 5.42],
[210, 6, 123.22, 7.16, 127.81, 9.73],
[225, 6, 144.81, 6.54, 120.58, 5.02],
[240, 6, 129.37, 10.22, 91.01, 8.48],
[255, 5, 158.61, 6.11, 90.15, 6.5],
[270, 4, 74.77, 6.74, 5.8, 7.53],
[285, 10, 19.45, 14.41, 144.32, 6.37],
[300, 4, 156.2, 6.7, 284.68, 6.01],
[315, 8, 220.43, 12.49, 34.43, 11.25],
[330, 5, 124.03, 8.41, 120.56, 4.62],
[345, 6, 47.04, 10.24, 131.05, 9.04],
[360, 3, 3.5, 6.99, 3.5, 5.47]
]);
//map data for the first series, take x from the zero column and value from the first column of data set
var seriesData_1 = dataSet.mapAs({x: [0], value: [1]});
//map data for the second series, take x from the second column and value from the third column of data set
var seriesData_2 = dataSet.mapAs({x: [2], value: [3]});
//map data for the second series, take x from the fourth column and value from the fifth column of data set
var seriesData_3 = dataSet.mapAs({x: [4], value: [5]});
//create polar chart
chart = anychart.polar();
//set container id for the chart
chart.container('container');
//set chart yScale settings
chart.yScale().minimum(0).maximum(16);
chart.yScale().ticks().interval(2);
//set chart xScale settings
chart.xScale().maximum(360);
chart.xScale().ticks().interval(15);
//set xAxis formatting settings
chart.xAxis().labels().textFormatter(function() {
return this['value'] + '°'
});
//disable chart title
chart.title(false);
//set chart legend settings
chart.legend({
position: 'right',
align: 'left',
itemsLayout: 'vertical'
});
var series1 = chart.marker(seriesData_1);
series1.type('star5');
series1.name('Signal A');
series1.size(4).hoverSize(8);
series1.fill('rgb(105, 184, 234)').stroke('rgb(19, 93, 140)');
var series2 = chart.marker(seriesData_2);
series2.type('square');
series2.name('Signal B');
series2.size(4).hoverSize(8);
series2.fill('rgb(245, 146, 115)').stroke('rgb(164, 48, 11)');
var series3 = chart.marker(seriesData_3);
series3.type('diamond');
series3.name('Signal C');
series3.size(4).hoverSize(8);
series3.fill('rgb(116, 228, 116)').stroke('rgb(26, 139, 26)');
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>