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