@datarailsshared/dr_renderer 1.2.53 → 1.2.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.53",
+  "version": "1.2.54",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/dr_pivottable.js

@@ -133,75 +133,88 @@ let initDRPivotTable = function($, window, document) {
             return key;
         };
 
-        let newProcessKey = function (record, totals, keys, attrs, getAggregator) {
-            var addKey, attr, flatKey, k, key, len, ref;
-            key = [];
-            addKey = false;
-            for (k = 0, len = attrs.length; k < len; k++) {
-                attr = attrs[k];
-                if (record.hasOwnProperty(attr)) {
-                    key.push((ref = record[attr]));
-                    flatKey = key.join(delim);
-                }
-                if (totals[flatKey] && totals[flatKey].isChangeable) {
-                    continue;
-                }
-                if (!flatKey) return [];
-                if (!totals[flatKey]) {
-                    totals[flatKey] = getAggregator(key.slice());
-                    addKey = true;
-                } else {
-                    totals[flatKey] = getAggregator(key.slice());
-                    totals[flatKey].push(record);
-                }
-            }
-            if (addKey && key.length === attrs.length) {
-                keys.push(key);
-            }
-            return key;
-        };
-
         DRPivotData.prototype.processRecord = function(record, useTotalsCalculation) {
-            var colKey, fColKey, fRowKey, flatColKey, flatRowKey, i, j, k, m, n, ref, results, rowKey;
-            rowKey = [];
-            colKey = [];
             if (useTotalsCalculation) {
-                rowKey = newProcessKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, (function(_this) {
+                if (!this.notFirst) {
+                    this.keysLength = Object.keys(record).length - 1;
+                    this.notFirst = true;
+                }
+                let getRowAggregator = (function(_this) {
                     return function(key) {
                         return _this.aggregator(_this, key, []);
                     };
-                })(this));
-                colKey = newProcessKey(record, this.colTotals, this.colKeys, this.colAttrs, (function(_this) {
+                })(this);
+                let getColAggregator = (function(_this) {
                     return function(key) {
                         return _this.aggregator(_this, [], key);
                     };
-                })(this));
+                })(this);
 
-                if (!colKey.length && !rowKey.length) {
-                    this.allTotal.push(record);
+                let rowKey = [];
+                for (k = 0; k < this.rowAttrs.length; k++) {
+                    let attr = this.rowAttrs[k];
+                    if (record.hasOwnProperty(attr)) {
+                        rowKey.push((ref = record[attr]) != null ? ref : "null");
+                    }
                 }
-                if (!colKey.length && rowKey.length) {
-                    this.rowTotals[rowKey.join(delim)].push(record);
-                    this.rowTotals[rowKey.join(delim)].isChangeable = true;
+
+                let colKey = [];
+                for (k = 0; k < this.colAttrs.length; k++) {
+                    let attr = this.colAttrs[k];
+                    if (record.hasOwnProperty(attr)) {
+                        colKey.push((ref = record[attr]) != null ? ref : "null");
+                    }
                 }
-                if (!rowKey.length && colKey.length) {
-                    this.colTotals[colKey.join(delim)].push(record);
-                    this.colTotals[colKey.join(delim)].isChangeable = true;
+
+                let flatRowKey = rowKey.join(delim);
+                let flatColKey = colKey.join(delim);
+
+                if (this.keysLength === rowKey.length + colKey.length) {
+                    if (!this.rowKeys.some(rKey => rKey.join(delim) === flatRowKey)) {
+                        this.rowKeys.push(rowKey);
+                    }
+                    if (!this.colKeys.some(cKey => cKey.join(delim) === flatColKey)) {
+                        this.colKeys.push(colKey);
+                    }
                 }
-            } else {
-                this.allTotal.push(record);
-                rowKey = processKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, (function(_this) {
-                    return function(key) {
-                        return _this.aggregator(_this, key, []);
-                    };
-                })(this));
-                colKey = processKey(record, this.colTotals, this.colKeys, this.colAttrs, (function(_this) {
-                    return function(key) {
-                        return _this.aggregator(_this, [], key);
-                    };
-                })(this));
+
+                if (!colKey.length && !rowKey.length) {
+                    this.allTotal.push(record);
+                } else if (!colKey.length && rowKey.length) {
+                    if (!this.rowTotals[flatRowKey]) {
+                        this.rowTotals[flatRowKey] = getRowAggregator(rowKey.slice());
+                        this.rowTotals[flatRowKey].push(record);
+                    }
+                } else if (!rowKey.length && colKey.length) {
+                    if (!this.colTotals[flatColKey]) {
+                        this.colTotals[flatColKey] = getColAggregator(rowKey.slice());
+                        this.colTotals[flatColKey].push(record);
+                    }
+                } else {
+                    if (!this.tree[flatRowKey]) {
+                        this.tree[flatRowKey] = {};
+                    }
+                    this.tree[flatRowKey][flatColKey] = this.aggregator(this, rowKey, colKey);
+                    this.tree[flatRowKey][flatColKey].push(record);
+                }
+                return;
             }
 
+            var colKey, fColKey, fRowKey, flatColKey, flatRowKey, i, j, k, m, n, ref, results, rowKey;
+            rowKey = [];
+            colKey = [];
+            this.allTotal.push(record);
+            rowKey = processKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, (function(_this) {
+                return function(key) {
+                    return _this.aggregator(_this, key, []);
+                };
+            })(this));
+            colKey = processKey(record, this.colTotals, this.colKeys, this.colAttrs, (function(_this) {
+                return function(key) {
+                    return _this.aggregator(_this, [], key);
+                };
+            })(this));
+
             m = rowKey.length - 1;
             n = colKey.length - 1;
             if (m < 0 || n < 0) {

package/src/highcharts_renderer.js

@@ -891,14 +891,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return chartOptions;
     };
 
-    highchartsRenderer.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions) {
+    // Generate series for charts functions
+    highchartsRenderer.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions, opts, chartOptions) {
         var chart_series = [],
             row_n_keys = pivotData.getRowKeys(),
             col_n_keys = pivotData.getColKeys();
 
-        var num_cols = col_n_keys.length;
-        var num_rows = row_n_keys.length;
-
         var has_delta = false;
         if (additionOptions && lodash.has(additionOptions, "delta_column.field") && additionOptions.delta_column.field == "series") {
             has_delta = true;
@@ -909,16 +907,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         var i = 0;
         var variat_serias = null;
+        const n = col_n_keys.length;
+        const xSum = (1 + n) / 2 * n;
 
         lodash.forEach(row_n_keys, function (row_n_value) {
             var ob = {};
+            let ySum = 0;
+            let xySum = 0;
+            let squareXSum = 0;
             ob.data = [];
             if (row_n_value && row_n_value.length > 0)
                 ob.name = row_n_value.join(highchartsRenderer.delimer);
 
-            lodash.forEach(col_n_keys, function (col_n_value) {
+            lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
                 var val = agg.value();
+
                 if (isUniqueVals && agg.uniq)
                     val = agg.uniq.join('<br>');
 
@@ -937,6 +941,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     else
                         val = 0;
                 }
+
+                xySum += Number(val) * (index + 1);
+                ySum += Number(val);
+                squareXSum += (index + 1) * (index + 1);
                 ob.data.push(val);
             });
 
@@ -950,6 +958,24 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
 
             chart_series.push(ob);
+
+            if (opts.trendLine) {
+                const a = ((ySum * squareXSum) - (xSum * xySum)) / ((n * squareXSum) - (xSum * xSum));
+                const b = ((n * xySum) -  (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
+
+                const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
+                trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
+                trendSeries.dashStyle = 'shortdot';
+                trendSeries.type = 'line';
+                trendSeries.data = trendSeries.data.map((el, index) => a + b * (index + 1));
+
+                if (colors && colors[i]) {
+                    trendSeries.color = colors[i];
+                }
+
+                chart_series.push(trendSeries);
+            }
+
             i++;
         });
 
@@ -970,30 +996,48 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
 
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts);
+
+        if (opts.total) {
+            const newSeries = lodash.clone(chart_series[chart_series.length - 1]);
+            newSeries.name = 'Total';
+            newSeries.data = [];
+            col_n_keys.forEach(columnKey => {
+                let totalKey = columnKey;
+                if (lodash.isArray(columnKey)) {
+                    totalKey = totalKey.join(' , ');
+                }
+                newSeries.data.push(pivotData.colTotals[totalKey].sum);
+            })
+
+            chart_series.push(newSeries);
+        }
+
         return chart_series;
     };
 
-
-    highchartsRenderer.ptCreateColumnSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, isNotDrilldown, additionOptions) {
+    highchartsRenderer.ptCreateColumnSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, isNotDrilldown, additionOptions, opts, chartOptions, chartType) {
         var chart_series = [],
             row_n_keys = pivotData.getRowKeys(),
             col_n_keys = pivotData.getColKeys();
-        var num_cols = col_n_keys.length;
-        var num_rows = row_n_keys.length;
 
         var has_delta = false;
         if (additionOptions && lodash.has(additionOptions, "delta_column.field") && additionOptions.delta_column.field == "series") {
             has_delta = true;
         }
 
-
         if (row_n_keys.length == 0)
             row_n_keys.push([]);
 
         var i = 0;
         var variat_serias = null;
+        const n = col_n_keys.length;
+        const xSum = (1 + n) / 2 * n;
 
         lodash.forEach(row_n_keys, function (row_n_value) {
+            let ySum = 0;
+            let xySum = 0;
+            let squareXSum = 0;
             var ob = {};
             ob.data = [];
             if (row_n_value && row_n_value.length > 0)
@@ -1006,7 +1050,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 style: highchartsRenderer.getDataLabelsStyle(additionOptions)
             }
 
-            lodash.forEach(col_n_keys, function (col_n_value) {
+            lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
                 var val = agg.value();
 
@@ -1040,6 +1084,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (!isNotDrilldown)
                     tmoobj.drilldown = true;
 
+                xySum += Number(val) * (index + 1);
+                ySum += Number(val);
+                squareXSum += (index + 1) * (index + 1);
                 ob.data.push(tmoobj);
             });
 
@@ -1053,6 +1100,23 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
 
             chart_series.push(ob);
+
+            if (opts.trendLine) {
+                const a = ((ySum * squareXSum) - (xSum * xySum)) / ((n * squareXSum) - (xSum * xSum));
+                const b = ((n * xySum) -  (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
+
+                const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
+                trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
+                trendSeries.dashStyle = 'shortdot';
+                trendSeries.type = 'line';
+                trendSeries.data = trendSeries.data.map((data, index) => ({name: data.name, y: a + b * (index + 1)}));
+
+                if (colors && colors[i]) {
+                    trendSeries.color = colors[i];
+                }
+
+                chart_series.push(trendSeries);
+            }
             i++;
         });
 
@@ -1064,18 +1128,68 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
 
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts);
+
+        let weights = { line: 2,spline: 3 ,area:-2, areaspline: -1, scatter:4, column: 1 };
+
+        if (opts.comboOptions && opts.comboOptions.seriesOptions.length && chartType.includes('combo')) {
+            opts.comboOptions.seriesOptions.forEach(option => {
+                chart_series.forEach(series => {
+                    if (option.series === series.name) {
+                        switch (option.chartType) {
+                            case 'line-chart':
+                                series.type = 'line';
+                                break;
+                            case 'line-chart-smooth':
+                                series.type = 'spline';
+                                break;
+                            case 'area-chart':
+                                series.type = 'area';
+                                break;
+                            case 'area-chart-smooth':
+                                series.type = 'areaspline';
+                                break;
+                            case 'scatter-chart':
+                                series.type = 'scatter';
+                                break;
+                            case 'column-chart' || 'column-chart-stacked':
+                                delete series.type;
+                                break;
+                        }
+                    }
+                })
+            })
+        }
+
+        if (opts.total) {
+            const totalSeries = lodash.clone(chart_series[chart_series.length - 1]);
+            totalSeries.name = 'Total';
+            totalSeries.data = [];
+            col_n_keys.forEach(columnKey => {
+                let key = columnKey;
+                let totalKey = columnKey;
+                if (lodash.isArray(columnKey)) {
+                    key = columnKey[0];
+                    totalKey = totalKey.join(' , ');
+                }
+                totalSeries.data.push({name: lodash.unescape(key), y: pivotData.colTotals[totalKey].sum});
+            });
+
+            chart_series.push(totalSeries);
+        }
+
+        chart_series.sort((a,b) => {
+            return (weights[a.type] || 0) > (weights[b.type] || 0) ? 1 : (weights[a.type] || 0) < (weights[b.type] || 0) ? -1 : 0
+        });
+
         return chart_series;
-    };
+    }
 
     highchartsRenderer.getVariantSeries = function (series, delta_column_options) {
         const varianceColor = delta_column_options.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
         series.name = delta_column_options.name.replace('_', '');
         series.color = varianceColor;
 
-        if (!delta_column_options.only_variant && !delta_column_options.same_yaxis) {
-            series.yAxis = 1;
-        }
-
         if (delta_column_options.point_click_event) {
             series.allowPointSelect = true;
             series.point = {
@@ -1103,9 +1217,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             series.marker = {
                 lineColor: varianceColor
             };
-        } else if (delta_column_options.chart == 'column') {
+        } else if (delta_column_options.chart == 'column' || delta_column_options.chart == 'combo') {
             series.type = 'column';
-        } else {
+        } else if (delta_column_options.chart == 'spline') {
             series.type = 'spline';
             series.lineWidth = 0;
             series.lineColor = varianceColor;
@@ -1145,11 +1259,20 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             };
         }
+        else if (delta_column_options.chart == 'area') {
+            series.color = varianceColor;
+            series.type = 'area'
+        } else if (delta_column_options.chart == 'areaspline') {
+            series.color = varianceColor;
+            series.type = 'areaspline'
+        } else if (delta_column_options.chart == 'scatter-chart') {
+            series.color = varianceColor;
+            series.type = 'scatter-chart'
+        }
         return series;
     }
 
-
-    highchartsRenderer.ptCreateSeriesToDrillDownChart = function (pivotData) {
+    highchartsRenderer.ptCreateSeriesToDrillDownChart = function (pivotData, chartOptions, additionOptions, opts) {
         var pie_series = [];
 
         var col_n_keys = pivotData.getColKeys();
@@ -1180,13 +1303,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             pie_series.push(ob);
         });
 
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(pie_series, pivotData, chartOptions, additionOptions, opts);
+
         return ([{
             colorByPoint: true,
             data: pie_series
         }]);
     };
 
-    highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart = function (pivotData) {
+    highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart = function (pivotData, chartOptions, additionOptions, opts) {
 
         var pie_drill_down_series = [],
             row_n_keys = pivotData.getRowKeys(),
@@ -1224,12 +1349,60 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         });
 
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(pie_drill_down_series, pivotData, chartOptions, additionOptions, opts);
 
         return ({
             series: pie_drill_down_series
         });
     };
 
+    highchartsRenderer.moveSeriesToSecondYAxisIfNeeded = function(chartSeries, pivotData, chartOptions, additionOptions, opts) {
+        if (!opts || !opts.comboOptions) {
+            return;
+        }
+
+        let addSecondYAxis = false;
+        lodash.forEach(chartSeries, function (series) {
+            let sOptions = lodash.find(opts.comboOptions.seriesOptions, function(sOptions) {
+                return sOptions.series === series.name || sOptions.series.replace('_', '') === series.name
+            });
+            if (sOptions && sOptions.secondaryAxis) {
+                series.yAxis = 1;
+                addSecondYAxis = true;
+            }
+        });
+
+        if (addSecondYAxis) {
+            highchartsRenderer.addSecondYAxis(pivotData, chartOptions, additionOptions, opts);
+        }
+    }
+
+    highchartsRenderer.addSecondYAxis = function (pivotData, chartOptions, additionOptions, opts) {
+        const varianceColor = (additionOptions && additionOptions.delta_column.color) || (highchartsRenderer && highchartsRenderer.variance_color) || Highcharts.getOptions().colors[7];
+        let labels_formatter = opts.comboOptions.secondaryAxisSettings.is_percentage ?
+            highchartsRenderer.persantageValueLabelsFormatter(pivotData, opts) :
+            highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts);
+
+        chartOptions.yAxis = [chartOptions.yAxis];
+        chartOptions.yAxis[1] = {
+            min: !isNaN(parseInt(opts.comboOptions.secondaryAxisSettings.min)) ? opts.comboOptions.secondaryAxisSettings.min : null,
+            max: !isNaN(parseInt(opts.comboOptions.secondaryAxisSettings.max)) ? opts.comboOptions.secondaryAxisSettings.max : null,
+            title: {
+                text: opts.comboOptions.secondaryAxisSettings.name,
+                style: {
+                    color: varianceColor
+                }
+            },
+            labels: {
+                formatter: labels_formatter,
+                style: {
+                    color: varianceColor
+                }
+            },
+            opposite: true
+        }
+    };
+
     highchartsRenderer.ptRenderBasicPie = function (pivotData, opts) {
         var chartOptions = {};
         var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('pie-chart');
@@ -1409,7 +1582,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         chartOptions.xAxis = {categories: pivotData.getColKeys()};
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
 
         var total = [];
         lodash.forEach(chartOptions.series, function (obj) {
@@ -1550,7 +1723,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
 
         chartOptions.xAxis = {categories: pivotData.getColKeys()};
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
 
         var total = [];
         lodash.forEach(chartOptions.series, function (obj) {
@@ -1644,7 +1817,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         };
         var uniqueVals = kpioptions.value.value == "Unique";
 
-        let temp_series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, uniqueVals);
+        let temp_series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, uniqueVals, null, opts, chartOptions);
 
         var total = [];
         lodash.forEach(temp_series, function (obj) {
@@ -1764,12 +1937,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (useNewUx) {
           chartOptions.tooltip.borderColor = '#fff';
         }
-        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true);
         if (drilldownFunc)
             chartOptions.drilldown = {}
         else
-            chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData);
+            chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
 
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
 
@@ -1826,7 +1999,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
             }
         };
-        highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
 
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, true);
 
@@ -1871,7 +2043,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
@@ -1902,8 +2074,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
-        highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
-
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, true);
 
         chartOptions.plotOptions = {
@@ -1950,7 +2120,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
 
         var colors = ['#ff0202', '#b3060e', '#70000a'];
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, colors, null, null, additionOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, colors, null, null, additionOptions, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
 
@@ -1972,34 +2142,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     }
 
-    highchartsRenderer.addSecondYAxisIfNeed = function (pivotData, chartOptions, additionOptions, opts) {
-        if (additionOptions && additionOptions.delta_column && additionOptions.delta_column.field == "series") {
-            chartOptions.yAxis = [chartOptions.yAxis];
-
-            let labels_formatter = highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts);
-            if (additionOptions.delta_column.is_percentage) {
-                labels_formatter = highchartsRenderer.persantageValueLabelsFormatter(pivotData, opts);
-            }
-
-            const varianceColor = additionOptions.delta_column.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
-            chartOptions.yAxis[1] = {
-                title: {
-                    text: additionOptions.delta_column.name.replace('_', ''),
-                    style: {
-                        color: varianceColor
-                    }
-                },
-                labels: {
-                    formatter: labels_formatter,
-                    style: {
-                        color: varianceColor
-                    }
-                },
-                opposite: true
-            }
-        }
-    };
-
     highchartsRenderer.ptRenderSpLine = function (pivotData, opts) {
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;
@@ -2025,8 +2167,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
-        highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
-
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, true);
 
         chartOptions.plotOptions = {
@@ -2068,7 +2208,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions);
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
@@ -2116,7 +2256,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions);
 
@@ -2213,14 +2353,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
             lineWidth: 0
         };
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
 
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
-    highchartsRenderer.ptRenderColumn = function (pivotData, opts, drilldownFunc) {
+    highchartsRenderer.ptRenderColumn = function (pivotData, opts, drilldownFunc, chartType) {
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;
         var colAttrs = pivotData.colAttrs;
@@ -2275,8 +2415,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
-        highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
-
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
             shadow: highchartsRenderer.tooltipShadow,
@@ -2290,7 +2428,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         highchartsRenderer.handleGridLines(additionOptions, chartOptions);
 
         var isNotDrilldown = !(colAttrs && colAttrs.length > 1);
-        chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, null, null, null, isNotDrilldown, additionOptions);
+        if (lodash.get(opts, 'paletteOptions.widgetPalette', null)) {
+            const mc_palette = lodash.find(lodash.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
+            chartOptions.colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
+        } else if (lodash.get(opts, 'paletteOptions.dashboardPalette.colors', null)) {
+            chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
+        }
+        chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, chartOptions.colors, null, null, isNotDrilldown, additionOptions, opts, chartOptions, chartType);
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
         chartOptions.plotOptions = {
             column: {
@@ -2327,7 +2471,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
-    highchartsRenderer.ptRenderStackedColumn = function (pivotData, opts, drilldownFunc) {
+    highchartsRenderer.ptRenderStackedColumn = function (pivotData, opts, drilldownFunc, chartType) {
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;
         var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('column-chart-stacked');
@@ -2458,7 +2602,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         };
         //chartOptions.xAxis = { categories: pivotData.getColKeys() };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, null, null, true, true);
+        if (lodash.get(opts, 'paletteOptions.widgetPalette', null)) {
+            const mc_palette = lodash.find(lodash.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
+            chartOptions.colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
+        } else if (lodash.get(opts, 'paletteOptions.dashboardPalette.colors', null)) {
+            chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
+        }
+        chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, chartOptions.colors, null, true, true, null, opts, chartOptions, chartType);
         //chartOptions.drilldown = {}
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
@@ -2535,11 +2685,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.xAxis = {type: 'category'};
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
         //if (drilldownFunc)
         //    chartOptions.drilldown = {}
         //else
-        chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData);
+        chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
 
@@ -2610,7 +2760,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
 
@@ -2724,7 +2874,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
 
@@ -2813,6 +2963,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return format;
     }
 
+    highchartsRenderer.isRowKeyShouldBePercentage = function(render_options, rowKey) {
+        if (render_options && render_options.comboOptions && render_options.comboOptions.secondaryAxisSettings &&
+            render_options.comboOptions.secondaryAxisSettings.is_percentage) {
+            const rowKeyString = rowKey.join(highchartsRenderer.delimer);
+            const rowKeyOptions = lodash.find(render_options.comboOptions.seriesOptions, {series: rowKeyString});
+            if (rowKeyOptions && rowKeyOptions.secondaryAxis) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     highchartsRenderer.ignoreIfCalculatedValue = function(data, rowKey, colKey, record, associatedFields, renderOptions, isGraph) {
         var eliminate = renderOptions && renderOptions.chartOptions && renderOptions.chartOptions.table_options &&
             renderOptions.chartOptions.table_options.eliminate_calc_totals && !_.isEmpty(associatedFields) && !isGraph;
@@ -2832,17 +2994,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.rhPivotCount = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
         var attr = arg[0];
-        var has_variants_persentage = false;
-        var variant_name = '';
-
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field === 'series' &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
-
         return function (data, rowKey, colKey) {
             return {
                 sum: 0,
@@ -2864,10 +3015,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         this.formats = lodash.uniq(this.formats);
                     }
 
-                    if (has_variants_persentage) {
-                        if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                            this.widget_values_format = "#,###%";
-                        }
+                    if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                        this.widget_values_format = "#,###%";
                     }
 
                     if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -2987,17 +3136,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.rhPivotAggregatorSum = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
-        var attr;
-        attr = arg[0];
-        var has_variants_persentage = false;
-        var variant_name = '';
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field == "series" &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
+        var attr = arg[0];
         return function (data, rowKey, colKey) {
             return {
                 sum: 0,
@@ -3030,10 +3169,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.formats = lodash.uniq(this.formats);
                         }
 
-                        if (has_variants_persentage) {
-                            if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                                this.widget_values_format = "#,###%";
-                            }
+                        if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                            this.widget_values_format = "#,###%";
                         }
 
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3087,17 +3224,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.rhPivotAggregatorMin = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
-        var attr;
-        attr = arg[0];
-        var has_variants_persentage = false;
-        var variant_name = '';
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field == "series" &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
+        var attr = arg[0];
         return function (data, rowKey, colKey) {
             return {
                 val: null,
@@ -3131,10 +3258,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.formats = lodash.uniq(this.formats);
                         }
 
-                        if (has_variants_persentage) {
-                            if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                                this.widget_values_format = "#,###%";
-                            }
+                        if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                            this.widget_values_format = "#,###%";
                         }
 
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3185,17 +3310,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.rhPivotAggregatorMax = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
-        var attr;
-        attr = arg[0];
-        var has_variants_persentage = false;
-        var variant_name = '';
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field == "series" &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
+        var attr = arg[0];
         return function (data, rowKey, colKey) {
             return {
                 val: null,
@@ -3229,10 +3344,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.formats = lodash.uniq(this.formats);
                         }
 
-                        if (has_variants_persentage) {
-                            if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                                this.widget_values_format = "#,###%";
-                            }
+                        if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                            this.widget_values_format = "#,###%";
                         }
 
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3283,17 +3396,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.rhPivotAggregatorAverage = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
-        var attr;
-        attr = arg[0];
-        var has_variants_persentage = false;
-        var variant_name = '';
-        if (render_options && render_options.chartOptions &&
-            render_options.chartOptions.delta_column &&
-            render_options.chartOptions.delta_column.field == "series" &&
-            render_options.chartOptions.delta_column.is_percentage) {
-            has_variants_persentage = true;
-            variant_name = render_options.chartOptions.delta_column.name;
-        }
+        var attr = arg[0];
         return function (data, rowKey, colKey) {
             return {
                 sum: 0,
@@ -3328,10 +3431,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             this.formats = lodash.uniq(this.formats);
                         }
 
-                        if (has_variants_persentage) {
-                            if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
-                                this.widget_values_format = "#,###%";
-                            }
+                        if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
+                            this.widget_values_format = "#,###%";
                         }
 
                         if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -4279,6 +4380,50 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 delete options.chartOptions.label;
             }
         }
+
+        if (!options.comboOptions) {
+            options.comboOptions = {
+                secondaryAxisSettings: {
+                    name: 'Secondary Axis',
+                    max: null,
+                    min: null,
+                    is_percentage: false,
+                },
+                seriesOptions: []
+            }
+            if (options.chartOptions.delta_column && options.chartOptions.delta_column.field === 'series') {
+                let deltaColumnSeries = {
+                    series: options.chartOptions.delta_column.name,
+                    secondaryAxis: !options.chartOptions.delta_column.same_yaxis,
+                };
+                switch (options.chartOptions.delta_column.chart) {
+                    case 'line':
+                        deltaColumnSeries.chartType = 'line-chart';
+                        break;
+                    case 'spline':
+                        deltaColumnSeries.chartType = 'line-chart-smooth';
+                        break;
+                    case 'area':
+                        deltaColumnSeries.chartType = 'area-chart';
+                        break;
+                    case 'areaspline':
+                        deltaColumnSeries.chartType = 'area-chart-smooth';
+                        break;
+                    case 'scatter':
+                        deltaColumnSeries.chartType = 'scatter-chart';
+                        break;
+                    case 'column':
+                        deltaColumnSeries.chartType = 'column-chart';
+                        break;
+                    default:
+                        deltaColumnSeries.chartType = 'scatter-chart';
+                        break;
+                }
+                options.comboOptions.seriesOptions.push(deltaColumnSeries);
+                options.comboOptions.secondaryAxisSettings.name = options.chartOptions.delta_column.name.replace('_', '');
+                options.comboOptions.secondaryAxisSettings.is_percentage = options.chartOptions.delta_column.is_percentage;
+            }
+        }
     };
 
     highchartsRenderer.addPivotOptions = function (selectedTemplateWOData, widgetOptions, drilldownFunction, drillDownListFunction) {
@@ -4386,6 +4531,60 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         exTableOptions.pivot.calculatedValues = highchartsRenderer.objectCopyJsonMethod(exTableOptions.calculated_values || []);
     };
 
+    highchartsRenderer.addTemplateDataToDynamicRangeOptions = function (selectedTemplate, dynamicRangeOptions) {
+        highchartsRenderer.setWidgetFieldsToTemplate(selectedTemplate);
+
+        var fields = highchartsRenderer.objectCopyJsonMethod(selectedTemplate.widget_fields);
+        var fieldOb;
+        var filterFields = [];
+        var selectedFields = [];
+
+        lodash.forEach(dynamicRangeOptions.filters, function (filterObj) {
+            fieldOb = lodash.find(fields, {id: filterObj.field});
+            if (fieldOb && filterObj.values && filterObj.values.datetype && filterObj.values.datetype === 'list') {
+                filterObj.values = filterObj.values.val
+            } else if (fieldOb && filterObj.values && filterObj.values.datetype && filterObj.values.datetype !== 'list') {
+                fieldOb.values = filterObj.values;
+            } else if (fieldOb && filterObj.values && filterObj.values.type === 'advanced') {
+                fieldOb.values = filterObj.values;
+            }
+            if (fieldOb && filterObj.values && filterObj.values instanceof Array) {
+                if (filterObj.is_excluded == true) {
+                    fieldOb.excludes = filterObj.values;
+                } else {
+                    fieldOb.includes = filterObj.values;
+                }
+            }
+            if (filterObj.allow_nulls && fieldOb) {
+                fieldOb.allow_nulls = filterObj.allow_nulls;
+            }
+        });
+
+        // fill selected fields
+        lodash.forEach(dynamicRangeOptions.fields, function (valObj) {
+            fieldOb = lodash.find(fields, {id: valObj.field});
+            if (fieldOb) {
+                selectedFields.push(fieldOb);
+                lodash.remove(fields, {id: fieldOb.id});
+            }
+        });
+
+        // fill filter fields
+        lodash.forEach(dynamicRangeOptions.filters, function (valObj) {
+            fieldOb = lodash.find(fields, {id: valObj.field});
+            if (fieldOb) {
+                filterFields.push(fieldOb);
+                lodash.remove(fields, {id: fieldOb.id});
+            }
+        });
+
+        dynamicRangeOptions.pivot = {};
+        dynamicRangeOptions.pivot.fieldsArray = fields;
+        dynamicRangeOptions.pivot.selectedFieldsArray = selectedFields;
+        dynamicRangeOptions.pivot.filtersArray = filterFields;
+        dynamicRangeOptions.pivot.calculatedValues = highchartsRenderer.objectCopyJsonMethod(dynamicRangeOptions.calculated_values || []);
+    }
+
     highchartsRenderer.addTemplateDataToFunctionOptions = function (selectedTemplate, functionOptions) {
         highchartsRenderer.setWidgetFieldsToTemplate(selectedTemplate);
 
@@ -5360,7 +5559,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_options: [
                     {label: 'Markers', value: ''},
                     {label: 'Line', value: 'line'},
+                    {label: 'Smooth Line', value: 'spline'},
                     {label: 'Column', value: 'column'},
+                    {label: 'Area', value: 'area'},
+                    {label: 'Smooth Area', value: 'areaspline'},
                 ],
                 default_value: ''
             }, {
@@ -5372,7 +5574,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 element_label: 'Same yAxis',
                 value_name: 'same_yaxis',
-                default_value: false
+                default_value: false,
+                hidden: true,
             }, {
                 element_type: 'checkbox',
                 element_label: 'Same xAxis',
@@ -5382,7 +5585,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 element_label: 'Percentage',
                 value_name: 'is_percentage',
-                default_value: false
+                default_value: false,
+                hidden: true,
             }, {
                 element_type: 'checkbox',
                 element_label: 'Sort by variance',
@@ -5433,7 +5637,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_options: [
                     {label: 'Markers', value: ''},
                     {label: 'Line', value: 'line'},
+                    {label: 'Smooth Line', value: 'spline'},
                     {label: 'Column', value: 'column'},
+                    {label: 'Area', value: 'area'},
+                    {label: 'Smooth Area', value: 'areaspline'},
                 ],
                 default_value: ''
             }, {
@@ -5445,7 +5652,85 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 element_label: 'Same yAxis',
                 value_name: 'same_yaxis',
+                default_value: false,
+                hidden: true,
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Same xAxis',
+                value_name: 'same_xaxis',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Percentage',
+                value_name: 'is_percentage',
+                default_value: false,
+                hidden: true,
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Sort by variance',
+                value_name: 'sort_by_variance',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Sort by absolute variance',
+                value_name: 'sort_by_absolute_variance',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Filter zero values',
+                value_name: 'is_filter_zero',
+                default_value: false
+            }]
+        },
+        'delta_column_combo': {
+            category_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Variance',
+            category_type: 'delta_column',
+            elements: [{
+                element_type: 'radio',
+                value_name: 'field',
+                element_label: 'Select Field',
+                element_options: [
+                    {label: 'None', value: ''},
+                    {label: 'Axis', value: 'category'},
+                    {label: 'Legend', value: 'series'},
+                ],
+                default_value: ''
+            }, {
+                element_type: 'input',
+                value_name: 'name',
+                element_label: 'Name',
+                default_value: '_Variance'
+            }, {
+                element_type: 'input',
+                value_name: 'formula',
+                element_label: 'Formula',
+                default_value: 'x2-x1'
+            }, {
+                hidden: true,
+                element_type: 'radio',
+                value_name: 'chart',
+                element_label: 'Chart',
+                element_options: [
+                    {label: 'Markers', value: ''},
+                    {label: 'Line', value: 'line'},
+                    {label: 'Smooth Line', value: 'spline'},
+                    {label: 'Column', value: 'column'},
+                    {label: 'Area', value: 'area'},
+                    {label: 'Smooth Area', value: 'areaspline'},
+                ],
+                default_value: ''
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Only variance',
+                value_name: 'only_variant',
                 default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Same yAxis',
+                value_name: 'same_yaxis',
+                default_value: false,
+                hidden: true,
             }, {
                 element_type: 'checkbox',
                 element_label: 'Same xAxis',
@@ -5455,7 +5740,85 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 element_label: 'Percentage',
                 value_name: 'is_percentage',
+                default_value: false,
+                hidden: true,
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Sort by variance',
+                value_name: 'sort_by_variance',
                 default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Sort by absolute variance',
+                value_name: 'sort_by_absolute_variance',
+                default_value: false
+            }]
+        },
+        'delta_column_for_drill_down_combo': {
+            category_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Variance',
+            category_type: 'delta_column',
+            elements: [{
+                element_type: 'radio',
+                value_name: 'field',
+                element_label: 'Select Field',
+                element_options: [
+                    {label: 'None', value: ''},
+                    {label: 'Axis', value: 'category'},
+                    {label: 'Legend', value: 'series'},
+                ],
+                default_value: ''
+            }, {
+                element_type: 'input',
+                value_name: 'name',
+                element_label: 'Name',
+                default_value: '_Variance'
+            }, {
+                element_type: 'input',
+                value_name: 'formula',
+                element_label: 'Formula',
+                default_value: 'x2-x1'
+            }, {
+              element_type: 'input',
+              value_name: 'color',
+              element_label: 'Color',
+              default_value: ''
+            }, {
+                hidden: true,
+                element_type: 'radio',
+                value_name: 'chart',
+                element_label: 'Chart',
+                element_options: [
+                    {label: 'Markers', value: ''},
+                    {label: 'Line', value: 'line'},
+                    {label: 'Smooth Line', value: 'spline'},
+                    {label: 'Column', value: 'column'},
+                    {label: 'Area', value: 'area'},
+                    {label: 'Smooth Area', value: 'areaspline'},
+                ],
+                default_value: ''
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Only variance',
+                value_name: 'only_variant',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Same yAxis',
+                value_name: 'same_yaxis',
+                default_value: false,
+                hidden: true,
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Same xAxis',
+                value_name: 'same_xaxis',
+                default_value: false
+            }, {
+                element_type: 'checkbox',
+                element_label: 'Percentage',
+                value_name: 'is_percentage',
+                default_value: false,
+                hidden: true,
             }, {
                 element_type: 'checkbox',
                 element_label: 'Sort by variance',
@@ -5532,6 +5895,39 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.chartsTypesInfo = {
+        'combo-chart': {
+            name: 'Column Combo Chart ',
+            label: 'Column Combo Chart ',
+            title: 'Allows for multiple chart display formats in one widget',
+            description: 'For example, Revenue and Cost of goods sold as clomuns, and Gross margin as a line',
+            axisName: 'X - Axis',
+            legendName: 'Data series',
+            startedMessage: 'To add multiple chart types, click on  “Combo Chart Options“. A Secondary Axis is available in this chart',
+            axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
+            legendTooltipTitle: 'Click to  display these data series as line or area charts',
+        },
+        'combo-column-chart': {
+            name: 'Column Combo Chart ',
+            label: 'Column Chart',
+            title: 'Allows for multiple chart display formats in one widget',
+            description: 'For example, Revenue and Cost of goods sold as clomuns, and Gross margin as a line',
+            axisName: 'X - Axis',
+            legendName: 'Data series',
+            startedMessage: 'To add multiple chart types, click on  “Combo Chart Options“. A Secondary Axis is available in this chart.',
+            axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
+            legendTooltipTitle: 'Click to  display these data series as line or area charts.',
+        },
+        'combo-stacked-chart': {
+            name: 'Stacked Column Combo Chart  ',
+            label: 'Stacked Column',
+            title: 'Allows for multiple chart display formats in one widget.',
+            description: 'For example, different department stacked clomuns, and average as a line.',
+            axisName: 'X - Axis',
+            legendName: 'Data series',
+            startedMessage: 'To add multiple chart types, click on  “Combo Chart Options“. A Secondary Axis is available in this chart.',
+            axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
+            legendTooltipTitle: 'Click to  display these data series as line or area charts.',
+        },
         'line-chart': {
             name: 'Line chart',
             label: 'Line Chart',
@@ -5761,6 +6157,53 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["table_options_transpose"],
                             highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["negative_number_format"],
+                            highchartsRenderer.suboptions["delta_column_combo"],
+                            highchartsRenderer.suboptions["error_policy"],
+                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["legends"],
+                        ]
+                    }
+                ]
+            },
+            {
+                type: 'combo',
+                name: 'Combo',
+                class: 'combo-chart',
+                subtypes: [{
+                    type: 'combo-column-chart',
+                    name: highchartsRenderer.chartsTypesInfo['combo-column-chart'].name,
+                    class: 'combo-column-chart',
+                    render: highchartsRenderer.ptRenderColumn,
+                    suboptions: [
+                        highchartsRenderer.suboptions["default_show"],
+                        highchartsRenderer.suboptions["axisY"],
+                        highchartsRenderer.suboptions["axisX"],
+                        highchartsRenderer.suboptions["tooltips"],
+                        highchartsRenderer.suboptions["label"],
+                        highchartsRenderer.suboptions["subtitle"],
+                        highchartsRenderer.suboptions["table_options"],
+                        highchartsRenderer.suboptions["chart"],
+                        highchartsRenderer.suboptions["negative_number_format"],
+                        highchartsRenderer.suboptions["delta_column_for_drill_down_combo"],
+                        highchartsRenderer.suboptions["error_policy"],
+                        highchartsRenderer.suboptions["from_version"],
+                        highchartsRenderer.suboptions["legends"],
+                    ],
+                },
+                    {
+                        type: 'combo-stacked-chart',
+                        name: highchartsRenderer.chartsTypesInfo['combo-stacked-chart'].name,
+                        class: 'combo-stacked-chart',
+                        render: highchartsRenderer.ptRenderStackedColumn,
+                        suboptions: [
+                            highchartsRenderer.suboptions["default_show"],
+                            highchartsRenderer.suboptions["axisY"],
+                            highchartsRenderer.suboptions["axisX"],
+                            highchartsRenderer.suboptions["tooltips"],
+                            highchartsRenderer.suboptions["label_with_percentage"],
+                            highchartsRenderer.suboptions["subtitle"],
+                            highchartsRenderer.suboptions["table_options"],
+                            highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["delta_column"],
                             highchartsRenderer.suboptions["error_policy"],
                             highchartsRenderer.suboptions["from_version"],
@@ -6684,7 +7127,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var datesFields = [];
         datesFields = lodash.filter(widget.rows, element => element.type == 'Date');
         datesFields = datesFields.concat(lodash.filter(widget.cols, element => element.type == 'Date'));
-        
+
         const isCustomSorting = widget.options.sortingFields && Array.isArray(widget.options.sortingFields) && widget.options.sortingFields.length > 0;
         if (isCustomSorting) {
             lodash.forEach(datesFields, function (field) {
@@ -7047,7 +7490,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
        itemMarginTop: 2,
      };
      const none = {
-        enabled: false, 
+        enabled: false,
      };
 
      if (additionOptions.legends_position && additionOptions.legends_position.value) {