SERV-2286 - added new parameter for passing raw option data.

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

@@ -26,6 +26,10 @@ function init_chart(chartId) {
         let numberOfCharts = elementObject.attr('charts') ?? 1;
         let multichart = (numberOfCharts > 1);
 
+        let rawData = elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null;
+
+        console.log('raw', rawData);
+
         console.log(numberOfCharts);
         console.log(multichart);
 
@@ -46,7 +50,7 @@ function init_chart(chartId) {
             fontSize: 15
         });
 
-        set_data(elementObject, multichart, numberOfCharts, function(options) {
+        set_data(elementObject, multichart, numberOfCharts, rawData, function(options) {
             lineChart.hideLoading();
             lineChart.setOption(options);
             setResizeEvent(lineChartElement, lineChart);
@@ -54,12 +58,15 @@ function init_chart(chartId) {
     }
 }
 
-function set_data(elementObject, multichart, numberOfCharts, callback) {
+function set_data(elementObject, multichart, numberOfCharts, rawData, callback) {
 
     setTimeout(function() {
 
+        let options;
         const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
 
+        if(rawData == null) {
+
             // variables (this will be set by user)
             let titles = JSON.parse(elementObject.attr('titles')) ?? [];
             let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
@@ -98,7 +105,7 @@ function set_data(elementObject, multichart, numberOfCharts, callback) {
 
 
             // Options
-        let options = {
+            options = {
 
                 // Chart title
                 title: setTitles(titles, numberOfCharts),
@@ -138,6 +145,11 @@ function set_data(elementObject, multichart, numberOfCharts, callback) {
                 options.dataZoom = setDataZoom(showDataZoom, multichart);
             }
 
+        } else {
+            options = rawData;
+        }
+
+
         callback(options);
 
     }, 1000);
@@ -148,8 +160,10 @@ function set_data(elementObject, multichart, numberOfCharts, callback) {
 function setSeries(seriesData, showPointValues  = false, markLineDataType = null, stack = false) {
 
     // uses series options if available else use global options.
-
     let seriesArray = [];
+
+    if(!seriesData || seriesData.length == 0) return [];
+
     for(let i = 0; i < seriesData.length; i++) {
 
         let series = {

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

@@ -13,4 +13,5 @@
          @if($markLine != null) mark-line="{{ $markLine }}" @endif
          categories="{{ json_encode($categories) }}"
          series="{{ json_encode($series) }}"
+         raw="{{ $raw }}"
     >

src/Views/Limitless/Linechart/Config.php

@@ -68,7 +68,8 @@
                 ->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
                 ->withMarkLine($parameters['mark-line'] ?? null)
                 ->withCategories($parameters['categories'] ?? null)
-                ->withSeries($parameters['series'] ?? null);;
+                ->withSeries($parameters['series'] ?? null)
+                ->withRaw($parameters['raw'] ?? null);
 
         }
 

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

@@ -21,6 +21,25 @@
             $seriesData[] = $data;
         }
 
+        // json string data should be valid else it will return null
+        $rawData = '{
+           "xAxis":{
+              "type":"category",
+              "boundaryGap":false,
+              "data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
+           },
+           "yAxis":{
+              "type":"value"
+           },
+           "series":[
+              {
+                 "data":[820,932,901,934,1290,1330,1320],
+                 "type":"line",
+                 "areaStyle":{}
+              }
+           ]
+        }';
+
     @endphp
 
 
@@ -31,20 +50,22 @@
             'colors' => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'],
             'point-values' => true,
             'boundary-gap' => true,
-            'inverted' => true,
+            'inverted' => false,
             'data-zoom' => true,
-            'stacked' => true,
+            'stacked' => false,
             'animation-duration' => 1000,
             'y-axis-label-value-format' => '{value} users',
             'mark-line' => 'average',
             'categories' => $categories,
-            'series' => $seriesData
+            'series' => $seriesData,
         ])
     @Limitless::CardStop
 
-{{--    @Limitless::CardStart(['title' => "Chart 2", 'icon' => 'icon-info22' ] )--}}
-{{--        @Limitless::Chart--}}
-{{--    @Limitless::CardStop--}}
+    @Limitless::CardStart(['title' => "Chart 2  (raw)", 'icon' => 'icon-info22' ] )
+        @Limitless::Chart([
+            'raw' => $rawData
+        ])
+    @Limitless::CardStop
 
 {{--    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
 {{--        @Limitless::LineChartStart--}}