Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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


Code Block
linenumberstrue
<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);
    }

});
</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.

View file
nameAPP_radar-1-20210902185951.jwa
height250

...