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