Radar/Polar

For Radar/Polar charts, including rose charts like Polar Bars and Wind Rose.

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.core.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.data.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.globalize.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/datavisualization/ej.chart.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

JavaScript

$(function () {
    
    var options = {
        size: { width: "300", height: "185" },
        commonSeriesOptions: {
            type: "polar",
        },
        series: [{ drawType:'column', points: [] }],
    };
    var dataSource = [
        { year: 2000, y1: 40, z1: 1, y2: 20, z2: 1, y3: 0, z3: 1 },
        { year: 2001, y1: 62, z1: 1, y2: 12, z2: 3, y3: 6, z3: 1 },
        { year: 2002, y1: 53, z1: 3, y2: 19, z2: 2, y3: 8, z3: 1 },
        { year: 2003, y1: 49, z1: 1, y2: 28, z2: 1, y3: 10, z3: 2 },
        { year: 2004, y1: 52, z1: 2, y2: 42, z2: 3, y3: 12, z3: 1 },
        { year: 2005, y1: 32, z1: 1, y2: 75, z2: 1, y3: 15, z3: 3 },
        { year: 2006, y1: 28, z1: 3, y2: 80, z2: 3, y3: 17, z3: 1 },
        { year: 2007, y1: 46, z1: 1, y2: 55, z2: 1, y3: 18, z3: 2 },
        { year: 2008, y1: 55, z1: 2, y2: 45, z2: 2, y3: 25, z3: 1 },
        { year: 2009, y1: 88, z1: 1, y2: 38, z2: 1, y3: 18, z3: 2 },
        { year: 2010, y1: 68, z1: 1, y2: 29, z2: 1, y3: 24, z3: 2 },
        { year: 2011, y1: 63, z1: 1, y2: 19, z2: 1, y3: 29, z3: 1 },
        { year: 2012, y1: 65, z1: 1, y2: 14, z2: 3, y3: 31, z3: 3 },
        { year: 2013, y1: 68, z1: 2, y2: 18, z2: 1, y3: 52, z3: 2 },
        { year: 2014, y1: 48, z1: 1, y2: 16, z2: 1, y3: 72, z3: 3 },
        { year: 2015, y1: 39, z1: 3, y2: 13, z2: 2, y3: 63, z3: 1 },
        { year: 2016, y1: 20, z1: 1, y2: 10, z2: 1, y3: 10, z3: 1 }
    ];
    for (var i = 0; i < dataSource.lengh; i++)
        options.series[0].points.push({
        		x: "y" + dataSource[i].year,
           	y: dataSource[i].y1 });
    $("#chart_div").ejChart(options);
});