<!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() {
//create data set on our data
var dataSet = anychart.data.set([
[0, 14.582, -14.582],
[2, 15.24, -15.24],
[4, 16.169, -16.169],
[6, 17.44, -17.44],
[8, 19.101, -19.101],
[10, 20.997, -20.997],
[12, 21.462, -21.462],
[14, 20.279, -20.279],
[16, 18.077, -18.077],
[18, 15.902, -15.902],
[20, 14.157, -14.157],
[22, 12.847, -12.847],
[24, 11.761, -11.761],
[26, 10.786, -10.786],
[28, 9.955, -9.955],
[30, 9.341, -9.341],
[32, 8.935, -8.935],
[34, 8.636, -8.636],
[36, 8.323, -8.323],
[38, 8.025, -8.025],
[40, 7.843, -7.843],
[42, 7.874, -7.874],
[44, 7.985, -7.985],
[46, 8.089, -8.089],
[48, 8.163, -8.163],
[50, 8.257, -8.257],
[52, 8.455, -8.455],
[54, 8.657, -8.657],
[56, 8.84, -8.84],
[58, 9.024, -9.024],
[60, 9.238, -9.238],
[62, 9.636, -9.636],
[64, 10.072, -10.072],
[66, 10.54, -10.54],
[68, 11.04, -11.04],
[70, 11.57, -11.57],
[72, 12.369, -12.369],
[74, 13.233, -13.233],
[76, 14.035, -14.035],
[78, 14.61, -14.61],
[80, 14.885, -14.885],
[82, 14.991, -14.991],
[84, 14.788, -14.788],
[86, 14.206, -14.206],
[88, 13.393, -13.393],
[90, 12.613, -12.613],
[92, 11.921, -11.921],
[94, 11.291, -11.291],
[96, 10.624, -10.624],
[98, 9.938, -9.938],
[100, 9.394, -9.394],
[102, 8.979, -8.979],
[104, 8.728, -8.728],
[106, 8.582, -8.582],
[108, 8.515, -8.515],
[110, 8.581, -8.581],
[112, 8.502, -8.502],
[114, 8.534, -8.534],
[116, 8.656, -8.656],
[118, 8.833, -8.833],
[120, 9.034, -9.034],
[122, 8.861, -8.861],
[124, 8.657, -8.657],
[126, 8.369, -8.369],
[128, 7.982, -7.982],
[130, 7.514, -7.514],
[132, 7.173, -7.173],
[134, 6.778, -6.778],
[136, 6.339, -6.339],
[138, 5.873, -5.873],
[140, 5.402, -5.402],
[142, 4.999, -4.999],
[144, 4.597, -4.597],
[146, 4.221, -4.221],
[148, 3.876, -3.876],
[150, 3.55, -3.55],
[152, 3.266, -3.266],
[154, 2.997, -2.997],
[156, 2.745, -2.745],
[158, 2.514, -2.514],
[160, 2.299, -2.299],
[162, 2.206, -2.206],
[164, 2.111, -2.111],
[166, 2.071, -2.071],
[168, 2.075, -2.075],
[170, 2.058, -2.058],
[172, 2.11, -2.11],
[174, 2.118, -2.118],
[176, 2.131, -2.131],
[178, 2.135, -2.135],
[180, 2.073, -2.073],
[182, 2.054, -2.054],
[184, 1.976, -1.976],
[186, 1.837, -1.837],
[188, 1.64, -1.64],
[190, 1.415, -1.415],
[192, 1.223, -1.223],
[194, 1.031, -1.031],
[196, 0.793, -0.793],
[198, 0.516, -0.516],
[200, 0.281, -0.281],
[202, 0.126, -0.126],
[204, 0.027, -0.027],
[206, 0.018, -0.018],
[208, 0.099, -0.099],
[210, 0.245, -0.245],
[212, 0.551, -0.551],
[214, 0.913, -0.913],
[216, 1.321, -1.321],
[218, 1.754, -1.754],
[220, 2.184, -2.184],
[222, 2.522, -2.522],
[224, 2.83, -2.83],
[226, 3.104, -3.104],
[228, 3.311, -3.311],
[230, 3.399, -3.399],
[232, 3.403, -3.403],
[234, 3.288, -3.288],
[236, 3.128, -3.128],
[238, 2.945, -2.945],
[240, 2.697, -2.697],
[242, 2.529, -2.529],
[244, 2.321, -2.321],
[246, 2.137, -2.137],
[248, 1.99, -1.99],
[250, 1.844, -1.844],
[252, 1.787, -1.787],
[254, 1.732, -1.732],
[256, 1.747, -1.747],
[258, 1.838, -1.838],
[260, 1.945, -1.945],
[262, 2.032, -2.032],
[264, 2.15, -2.15],
[266, 2.318, -2.318],
[268, 2.534, -2.534],
[270, 2.78, -2.78],
[272, 3, -3],
[274, 3.257, -3.257],
[276, 3.564, -3.564],
[278, 3.92, -3.92],
[280, 4.304, -4.304],
[282, 4.748, -4.748],
[284, 5.221, -5.221],
[286, 5.773, -5.773],
[288, 6.401, -6.401],
[290, 7.034, -7.034],
[292, 7.649, -7.649],
[294, 8.268, -8.268],
[296, 8.737, -8.737],
[298, 9.048, -9.048],
[300, 9.369, -9.369],
[302, 9.83, -9.83],
[304, 10.348, -10.348],
[306, 10.871, -10.871],
[308, 11.409, -11.409],
[310, 12.052, -12.052],
[312, 12.984, -12.984],
[314, 14.11, -14.11],
[316, 15.32, -15.32],
[318, 16.582, -16.582],
[320, 18.017, -18.017],
[322, 19.861, -19.861],
[324, 22.274, -22.274],
[326, 24.923, -24.923],
[328, 26.94, -26.94],
[330, 27.227, -27.227],
[332, 25.166, -25.166],
[334, 23.02, -23.02],
[336, 21.075, -21.075],
[338, 19.431, -19.431],
[340, 18.164, -18.164],
[342, 17.007, -17.007],
[344, 16.099, -16.099],
[346, 15.357, -15.357],
[348, 14.742, -14.742],
[350, 14.287, -14.287],
[352, 13.93, -13.93],
[354, 13.737, -13.737],
[356, 13.783, -13.783],
[358, 14.084, -14.084]
]);
//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 zero column and value from the second column of data set
var seriesData_2 = dataSet.mapAs({x: [0], value: [2]});
//create polar chart
chart = anychart.polar();
//set container id for the chart
chart.container('container');
//set chart yScale settings
chart.yScale().stackMode(anychart.enums.ScaleStackMode.VALUE);
chart.yScale().ticks().interval(10);
//set chart xScale settings
chart.xScale().maximum(360);
chart.xScale().ticks().interval(15);
//set xAxis labels 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'
});
//create first series with mapped data
var series1 = chart.area(seriesData_1);
series1.name('Series A');
series1.fill('rgb(29, 139, 209) .3').stroke('2 rgb(19, 93, 140)');
//create first series with mapped data
var series2 = chart.area(seriesData_2);
series1.name('Series B');
series2.fill('rgb(241, 104, 60) .3').stroke('2 rgb(164, 48, 11)');
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>