Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
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); } }); </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.