График в стиле радар

Предположим, вам необходимо построить не тривиальный график, на котором надо сравнить, сколько пива в год на человека выпивают в разных странах. Ниже - один из способов сравнения.


Ну, а теперь коды, которые позволили построить такой адаптивный график. Подключаем сразу скрипты:
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script type="text/javascript" src="http://www.amcharts.com/lib/3/radar.js"></script> <script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/patterns.js"></script> Затем, размещаем файлы стиля:

#chartdiv {
 width : 100%;
 height : 500px;
 font-size : 11px;

Теперь скрипт с данными и форматированием:
var chart = AmCharts.makeChart("chartdiv", { "type": "radar", "theme": "patterns", "dataProvider": [{ "country": "Чехия", "litres": 156.9 }, { "country": "Ирландия", "litres": 131.1 }, { "country": "Германия", "litres": 115.8 }, { "country": "Австралия", "litres": 109.9 }, { "country": "Австрия", "litres": 108.3 }, { "country": "Англия", "litres": 99 }], "valueAxes": [{ "axisTitleOffset": 20, "minimum": 0, "axisAlpha": 0.15 }], "startDuration": 2, "graphs": [{ "balloonText": "[[value]] литров на человека в год", "bullet": "round", "valueField": "litres" }], "categoryField": "country", "exportConfig": { "menuTop":"10px", "menuRight":"10px", "menuItems": [{ "icon": '/lib/3/images/export.png', "format": 'png' }] } }); Контейнер, в котором выводится график.
<div id="chartdiv"></div>