$(document).ready(function() {
    // Basic Radar Chart

    var options = {
        chart: {
            height: 350,
            type: 'radar',
        },
        series: [{
            name: 'Series 1',
            data: [80, 50, 30, 40, 100, 20],
        }],
        // title: {
        //     text: 'Basic Radar Chart'
        // },
        labels: ['January', 'February', 'March', 'April', 'May', 'June']
    }

    var chart = new ApexCharts(
        document.querySelector("#basicRadar"),
        options
    );

    chart.render();
    // multiple Series Radar

    var options = {
        chart: {
            height: 320,
            type: 'radar',
            dropShadow: {
                enabled: true,
                blur: 1,
                left: 1,
                top: 1
            }
        },
        series: [{
            name: 'Series 1',
            data: [80, 50, 30, 40, 100, 20],
        }, {
            name: 'Series 2',
            data: [20, 30, 40, 80, 20, 80],
        }, {
            name: 'Series 3',
            data: [44, 76, 78, 13, 43, 10],
        }],
        //  title: {
        //      text: 'Radar Chart - Multi Series'
        //  },
        stroke: {
            width: 0
        },
        fill: {
            opacity: 0.4
        },
        markers: {
            size: 0
        },
        labels: ['2011', '2012', '2013', '2014', '2015', '2016']
    }

    var chart = new ApexCharts(
        document.querySelector("#radarMultiSeries"),
        options
    );

    chart.render();

    function updateMultiSeries() {

        function randomSeries() {
            var arr = []
            for (var i = 0; i < 6; i++) {
                arr.push(Math.floor(Math.random() * 100))
            }

            return arr
        }


        chart.updateSeries([{
            name: 'Series 1',
            data: randomSeries(),
        }, {
            name: 'Series 2',
            data: randomSeries(),
        }, {
            name: 'Series 3',
            data: randomSeries(),
        }]);
    };

    $('.updateRadar').on('click', function() {
        updateMultiSeries();
    });

    // Radar with Polygon-fill
    var Filloptions = {
        chart: {
            height: 350,
            type: 'radar',
        },
        series: [{
            name: 'Series 1',
            data: [20, 100, 40, 30, 50, 80, 33],
        }],
        labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        plotOptions: {
            radar: {
                size: 140,
                polygons: {
                    strokeColor: '#e9e9e9',
                    fill: {
                        colors: ['#f8f8f8', '#fff']
                    }
                }
            }
        },
        //   title: {
        //       text: 'Radar with Polygon Fill'
        //   },
        colors: ['#FF4560'],
        markers: {
            size: 4,
            colors: ['#fff'],
            strokeColor: '#FF4560',
            strokeWidth: 2,
        },
        tooltip: {
            y: {
                formatter: function(val) {
                    return val
                }
            }
        },
        yaxis: {
            tickAmount: 7,
            labels: {
                formatter: function(val, i) {
                    if (i % 2 === 0) {
                        return val
                    } else {
                        return ''
                    }
                }
            }
        }
    }

    var Fillchart = new ApexCharts(
        document.querySelector("#radarwithPolygonFill"),
        Filloptions
    );

    Fillchart.render();




});