SERV-2286 - handle multiple initialisations

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

-function init_line_chart() {
+function set_chart() {
 
-    if (typeof echarts == 'undefined') {
-        console.warn('Warning - echarts.min.js is not loaded.');
-        return;
-    }
+    setTimeout(function() {
+        let chartCounter = 0;
+
+        $('.LimitlessLineChart').each(function() {
+
+            chartCounter++;
+            let elementChart = $(this);
+            elementChart.attr('id', 'LimitlessLineChart' + chartCounter);
+
+            init_line_chart(elementChart[0].id);
+
+        });
+
+    }, 300);
+}
+
+// main function
+function init_line_chart(chartId) {
 
     // Define element
-    let lineChartElement = document.getElementById('line_chart');
+    let lineChartElement = document.getElementById(chartId);
 
     if(lineChartElement) {
 
         // variables (this will be set by user)
-        let titles = ['A', 'B', 'C', 'D'];
+        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'];
@@ -103,6 +117,7 @@ function init_line_chart() {
     }
 }
 
+// sub functions
 function setLineChartSeries(name, data = [], showPointValues  = false, markLineDataType = null, stack = false, index = 0) {
 
     let series = {
@@ -365,4 +380,13 @@ function setResizeEvent(lineChartElement, lineChart) {
     });
 }
 
-$(document).ready(init_line_chart);
\ No newline at end of file
+
+$(document).ready(function() {
+
+    if (typeof echarts == 'undefined') {
+        console.warn('Warning - echarts.min.js is not loaded.');
+        return;
+    }
+
+    set_chart();
+});
\ No newline at end of file

src/Views/Limitless/Linechart/Documentation/Index.blade.php

@@ -7,4 +7,12 @@
         @Limitless::LineChartStart
     @Limitless::CardStop
 
+    @Limitless::CardStart(['title' => "Chart 2", 'icon' => 'icon-info22' ] )
+        @Limitless::LineChartStart
+    @Limitless::CardStop
+
+    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )
+        @Limitless::LineChartStart
+    @Limitless::CardStop
+
 @stop

src/Views/Limitless/Linechart/Start.blade.php

 <div class="chart-container">
-    <div class="chart has-fixed-height" id="line_chart"></div>
+    <div class="chart has-fixed-height LimitlessLineChart">
+
+    </div>
 </div>
\ No newline at end of file