Radar Charh with multiple value axis - amCharts

AmChart is now very popular to display data using charts. One of them different charts Radar Chart is most used chart to display graphical data. Its very easy to plot data in radar chart, but we sometimes need multiple radar on same chart. To do so we need to do some extra java-script coding as follows. Below code will also do some extra work such change color of radar as configured.

JavaScript Code:

var chart = AmCharts.makeChart("chartdiv", {
    "type": "radar",
    "theme": "light",
    "addClassNames": true,
    "dataProvider": [{
        "title": "Mango",
        "weight": 100, "count": 1400, "color": "red"
    }, {
        "title": "Banana",
        "weight": 125, "count": 1750, "color": "green"
    }, {
        "title": "Apple",
        "weight": 220, "count": 2850, "color": "blue"
    }, {
        "title": "Blackberry",
        "weight": 200, "count": 2150, "color": "hotpink"
    }, {
        "title": "Gooseberry",
        "weight": 123, "count": 2650, "color": "black"
    }, {
        "title": "Grapes",
        "weight": 98, "count": 1670, "color": "orange"
    }],
    "valueAxes": [{
        "axisTitleOffset": 20,
        "minimum": 0,
        "axisAlpha": 0.15
    }, {
        "id": "v2",
        "axisTitleOffset": 20,
        "minimum": 0,
        "axisAlpha": 0,
        "inside": true
    }],
    "startDuration": 0.2,
    "graphs": [{
        "balloonText": "[[value]] Kg of [[title]] per year",
        "bullet": "round",
        "lineThickness": 2,
        "valueField": "weight"
    }, {
        "balloonText": "[[value]] piece of [[title]] per year",
        "bullet": "square",
        "lineThickness": 2,
        "valueField": "count",
        "valueAxis": "v2"
    }],
    "categoryField": "title",
    "listeners": [{
        "event": "rendered",
        "method": updateLabels
    }, {
        "event": "resized",
        "method": updateLabels
    }],
    "export": {
        "enabled": false
    }
});

function updateLabels(event) {
    try {
        var labels = event.chart.chartDiv.getElementsByClassName("amcharts-axis-title");
        for (var i = 0; i < labels.length; i++) {
            try {
                var color = event.chart.dataProvider[i - event.chart.dataProvider.length + 1].color;
                if (color !== undefined) {
                    labels[i].setAttribute("fill", color);
                }
            } catch (e) {}
        }
    } catch (e) {}

    var x = event.chart.chartDiv.getElementsByClassName("amcharts-graph-line");

    for (var i = 0; i < x.length; i++) {
        try {
            if (i % 2 != 0) {
                var _g = x[i];
                var _p = _g.getElementsByTagName("path");
                _p[0].setAttribute("stroke", "blue");
            }
        }
        catch (e) {}

        var _c = event.chart.chartDiv.getElementsByClassName("amcharts-graph-bullet");
        try {
            for (var c = _c.length / 2; c < _c.length; c++) {
                _c[c].setAttribute("fill", "blue");
            }
        }
        catch (e) {}
    }
}

HtmlCode:

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/radar.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

<style type="text/css">
    #chartdiv {
        width: 100%;
        height: 500px;
    }
</style> 

And output would be like below image:







If you need you can download related resources from this link.