<div id="container" style="min-height: 800px; max-width: 90%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"></div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>

<script type="text/javascript">

categories = "#datalist.csv.listCategory?json#";
categories = categories.split("\n");
categories.shift();
categories.pop();

series = "#datalist.csv.listSeries?json#";
series = series.split("\n");
series.shift();
series.pop();

data = "#datalist.csv.list_radar?json#";
data2d = [];
data2d = data.split("\n").map(function(e){
  return e.split(",");
});
data2d.shift();
data2d.pop();

//prepare data for echart
//--indicators
indicators = [];
categories.forEach( function(value, index, array){
    obj = { "name" : value, "max": 3000 };
    indicators.push(obj);
});

//--seriesData
allSeriesData = [];
series.forEach( function(value, index, array){
    seriesName = value;
    tempObj = { "name" : seriesName };
    tempValue = [];
    
    data2d.forEach( function(dvalue, dindex, darray){
        row = dvalue;
        if(row[0] == seriesName){
            tempValue.push(row[2]);
        }
    });
    
    tempObj.value = tempValue;
    allSeriesData.push(tempObj);
});

$(function(){
   	
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    
    var option;
    
    option = {
        title: {
            text: 'Robots Experiment'
        },
            tooltip: {
                    show : true
                },
    
        legend: {
            data: series
        },
        radar: {
            // shape: 'circle',
            indicator: indicators
        },
        series: [{
            name: 'Robots Experiment',
            type: 'radar',
            data: allSeriesData
        }]
    };
    
    if (option && typeof option === 'object') {
        myChart.setOption(option);
		//make it clickable
        myChart.on('click', function (params) {
            url = "radar_crud?embed=true&d-2581891-fn_c_name=" + params.name;  
            var popupActionDialog = new PopupDialog(url);
            popupActionDialog.init();
        });
    }

});
</script>