SERV-2286 - chart loading

src/Views/Limitless/Linechart/Attachments/linechart.init.js

 function set_chart() {
 
-    setTimeout(function() {
     let chartCounter = 0;
 
     $('.LimitlessLineChart').each(function() {
@@ -9,23 +8,54 @@ function set_chart() {
         let elementChart = $(this);
         elementChart.attr('id', 'LimitlessLineChart' + chartCounter);
 
-            init_line_chart(elementChart[0].id);
+        init_chart(elementChart[0].id);
 
     });
 
-    }, 300);
 }
 
 // main function
-function init_line_chart(chartId) {
+function init_chart(chartId) {
 
     // Define element
     let lineChartElement = document.getElementById(chartId);
 
-    if(lineChartElement) {
+    if (lineChartElement) {
+
+        let titles = ['A', 'B', 'C'];
+        let multichart = (titles && titles.length > 1);
+        let numberOfCharts = titles ? titles.length : 1;
+
+        // adjust container height before initialising the chart.
+        if (multichart) {
+            let height = (titles.length * 240); // (chart height = 160 | charts spacing = 80)
+            lineChartElement.style.height = height + 'px';
+            console.log('adjusted container height', height + 'px');
+        }
+
+        let lineChart = echarts.init(lineChartElement);
+
+        lineChart.showLoading({
+            text: 'LADE DATEN',
+            maskColor: '#353f53',
+            color: '#fff',
+            textColor: '#fff',
+            fontSize: 15
+        });
+
+        set_data(titles, multichart, numberOfCharts, function(options) {
+            lineChart.hideLoading();
+            lineChart.setOption(options);
+            setResizeEvent(lineChartElement, lineChart);
+        })
+    }
+}
+
+function set_data(titles, multichart, numberOfCharts, callback) {
+
+    setTimeout(function() {
 
         // variables (this will be set by user)
-        let titles = ['A'];
         let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
         let animationDuration = 750;
         let seriesNames = ['ONC', 'APR', 'SPR', 'PHX', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];
@@ -39,7 +69,7 @@ function init_line_chart(chartId) {
         let markLine = 'average'; // min | max | average
         let series = [];
 
-        seriesNames.forEach(function (val, idx,arr) {
+        seriesNames.forEach(function (val, idx, arr) {
 
             let chartindex = Math.floor(Math.random() * titles.length);
 
@@ -54,27 +84,8 @@ function init_line_chart(chartId) {
             ], showPointValues, markLine, stacked, chartindex));
         });
 
-
-        // multichart is true if title param is multiple.
-        // legends and datazoom are disabled if multichart.
-
-        let multichart = (titles && titles.length > 1);
-        let numberOfCharts = titles ? titles.length : 1;
-
-        // adjust container height before initialising the chart.
-        if(multichart) {
-            let height = (titles.length * 240); // (chart height = 160 | charts spacing = 80)
-            lineChartElement.style.height = height + 'px';
-            console.log('adjusted container height', height + 'px');
-        }
-
-
-
-
-        let lineChart = echarts.init(lineChartElement);
-
         // Options
-        lineChart.setOption({
+        let options = {
 
             // Chart title
             title: setTitles(titles),
@@ -111,10 +122,12 @@ function init_line_chart(chartId) {
 
             // Add series
             series: series
-        });
+        };
+
+        callback(options);
+
+    }, 1000);
 
-        setResizeEvent(lineChartElement, lineChart);
-    }
 }
 
 // sub functions
@@ -218,6 +231,7 @@ function setYAxis(yAxisLabelValueFormat,  numberOfCharts = 1) {
     return yAxisArray;
 }
 
+// disabled when multichart is true
 function setLegend(legendData, multichart = false) {
     return multichart ? null : {
         data: legendData,
@@ -261,6 +275,7 @@ function setTitles(titles) {
     return arrayTitles;
 }
 
+// disabled when multichart is true
 function setDataZoom(show, multichart = false) {
     return multichart ? null : [
         {