You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Current »

In this article, we will share how we can prepare the data intended to be fed into echart to generate "Radar" chart.

Figure 1: Radar Chart


<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>

Form line 10 to 52, we are making use of datalist hash variable to populate the data, and further process the data into the structure recognised by echart library for radar chart.

APP_radar-1-20210903102953.jwa



  • No labels