Radar Chart with multiple graphs
HTML
<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/none.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "radar",
"theme": "none",
"dataProvider": [{
"activity": "Eating",
"person1": 65,
"person2": 28,
"person3": 19
},{
"activity": "Drinking",
"person1": 59,
"person2": 48,
"person3": 15
},{
"activity": "Sleeping",
"person1": 90,
"person2": 40,
"person3": 44
},{
"activity": "Designing",
"person1": 81,
"person2": 19,
"person3": 44
},{
"activity": "Coding",
"person1": 56,
"person2": 96,
"person3": 77
},{
"activity": "Partying",
"person1": 55,
"person2": 27,
"person3": 22
},{
"activity": "Running",
"person1": 40,
"person2": 100,
"person3": 42
}],
"valueAxes": [{
"axisTitleOffset": 20,
"minimum": 0,
"axisAlpha": 0.15
}],
"startDuration": 2,
"graphs": [{
"balloonText": "[[value]] hours per year",
"lineColor": "#00338D",
"lineThickness": 6,
"fillAlphas": 0,
"bullet": "round",
"valueField": "person1"
},{
"balloonText": "[[category]] hours per year",
"lineColor": "#BC204B",
"lineThickness": 2,
"fillAlphas": 0.5,
"bullet": "round",
"valueField": "person2"
},
{
"balloonText": "[[value]] hours per year",
"lineColor": "#00A3A1",
"lineThickness": 2,
"fillAlphas": 0.5,
"bullet": "round",
"valueField": "person3"
}],
"categoryField": "activity",
"exportConfig": {
"menuTop":"10px",
"menuRight":"10px",
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});