function getKeyValue(business_unit_id, cond_field1, sel_field1, sel_field2, table_name, selected_div) {
    $.ajax({
        type: "POST",
        url: "get_key_value.php",
        data: {
            cond_column_value: business_unit_id,
            cond_column_name: cond_field1,
            field1: sel_field1,
            field2: sel_field2,
            table_name: table_name
        },
        dataType: 'json',
        success: function (data) {
            if (data != null) {
                var content = '<option value=""></option>';
                for (var i = 0; i < data.length; i++) {
                    content += '<option value="' + data[i].key + '">' + data[i].value + '</option>'
                }
                $('#' + selected_div).html(content);
                $('#' + selected_div).trigger('chosen:updated');
            }
        },
        error: function (data) { }
    });
}
jQuery(function ($) {
    $('#id-disable-check').on('click', function () {
        var inp = $('#form-input-readonly').get(0);
        if (inp.hasAttribute('disabled')) {
            inp.setAttribute('readonly', 'true');
            inp.removeAttribute('disabled');
            inp.value = "This text field is readonly!";
        } else {
            inp.setAttribute('disabled', 'disabled');
            inp.removeAttribute('readonly');
            inp.value = "This text field is disabled!";
        }
    });
    if (!ace.vars['touch']) {
        $('.chosen-select').chosen({
            allow_single_deselect: true
        });
        $(window)
            .off('resize.chosen')
            .on('resize.chosen', function () {
                $('.chosen-select').each(function () {
                    var $this = $(this);
                    $this.next().css({
                        'width': $this.parent().width()
                    });
                })
            }).trigger('resize.chosen');
        //resize chosen on sidebar collapse/expand
        $(document).on('settings.ace.chosen', function (e, event_name, event_val) {
            if (event_name != 'sidebar_collapsed') return;
            $('.chosen-select').each(function () {
                var $this = $(this);
                $this.next().css({
                    'width': $this.parent().width()
                });
            })
        });
        $('#chosen-multiple-style .btn').on('click', function (e) {
            var target = $(this).find('input[type=radio]');
            var which = parseInt(target.val());
            if (which == 2) $('#form-field-select-4').addClass('tag-input-style');
            else $('#form-field-select-4').removeClass('tag-input-style');
        });
    }
    $('[data-rel=tooltip]').tooltip({
        container: 'body'
    });
    $('[data-rel=popover]').popover({
        container: 'body'
    });
    autosize($('textarea[class*=autosize]'));
    $('textarea.limited').inputlimiter({
        remText: '%n character%s remaining...',
        limitText: 'max allowed : %n.'
    });
    //"jQuery UI Slider"
    //range slider tooltip example
    $("#slider-range").css('height', '180px').slider({
        orientation: "vertical",
        range: true,
        min: 0,
        max: 100,
        values: [17, 67],
        slide: function (event, ui) {
            var val = ui.values[$(ui.handle).index() - 1] + "";
            if (!ui.handle.firstChild) {
                $("<div class='tooltip right in' style='display:none;left:16px;top:-6px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>")
                    .prependTo(ui.handle);
            }
            $(ui.handle.firstChild).show().children().eq(1).text(val);
        }
    }).find('span.ui-slider-handle').on('blur', function () {
        $(this.firstChild).hide();
    });
    $("#slider-range-max").slider({
        range: "max",
        min: 1,
        max: 10,
        value: 2
    });
    $("#slider-eq > span").css({
        width: '90%',
        'float': 'left',
        margin: '15px'
    }).each(function () {
        // read initial values from markup and remove that
        var value = parseInt($(this).text(), 10);
        $(this).empty().slider({
            value: value,
            range: "min",
            animate: true
        });
    });
    $("#slider-eq > span.ui-slider-purple").slider('disable'); //disable third item
    $('#id-input-file-1 , #id-input-file-2').ace_file_input({
        no_file: 'No File ...',
        btn_choose: 'Choose',
        btn_change: 'Change',
        droppable: false,
        onchange: null,
        thumbnail: false //| true | large
        //whitelist:'gif|png|jpg|jpeg'
        //blacklist:'exe|php'
        //onchange:''
        //
    });
    //pre-show a file name, for example a previously selected file
    //$('#id-input-file-1').ace_file_input('show_file_list', ['myfile.txt'])
    //datepicker plugin
    //link
    $('.date-picker').datepicker({
        autoclose: true,
        todayHighlight: true
    })
        //show datepicker when clicking on the icon
        .next().on(ace.click_event, function () {
            $(this).prev().focus();
        });
    //chosen plugin inside a modal will have a zero width because the select element is originally hidden
    //and its width cannot be determined.
    //so we set the width after modal is show
    $('#modal-form').on('shown.bs.modal', function () {
        if (!ace.vars['touch']) {
            $(this).find('.chosen-container').each(function () {
                $(this).find('a:first-child').css('width', '210px');
                $(this).find('.chosen-drop').css('width', '210px');
                $(this).find('.chosen-search input').css('width', '180px');
            });
        }
    })
    /**
    //or you can activate the chosen plugin after modal is shown
    //this way select element becomes visible with dimensions and chosen works as expected
    $('#modal-form').on('shown', function () {
        $(this).find('.modal-chosen').chosen();
    })
    */
    $(document).one('ajaxloadstart.page', function (e) {
        autosize.destroy('textarea[class*=autosize]')
        $('.limiterBox,.autosizejs').remove();
        $('.daterangepicker.dropdown-menu,.colorpicker.dropdown-menu,.bootstrap-datetimepicker-widget.dropdown-menu').remove();
    });
});

function prepareChart(chartType, chartData, labels, header) {
    var color = Chart.helpers.color;
    Chart.defaults.global.pointHitDetectionRadius = 1;
    var customTooltips = function (tooltip) {
        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');
        if (!tooltipEl) {
            tooltipEl = document.createElement('div');
            tooltipEl.id = 'chartjs-tooltip';
            tooltipEl.innerHTML = '<table></table>';
            this._chart.canvas.parentNode.appendChild(tooltipEl);
        }
        // Hide if no tooltip
        if (tooltip.opacity === 0) {
            tooltipEl.style.opacity = 0;
            return;
        }
        // Set caret Position
        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltip.yAlign) {
            tooltipEl.classList.add(tooltip.yAlign);
        } else {
            tooltipEl.classList.add('no-transform');
        }

        function getBody(bodyItem) {
            return bodyItem.lines;
        }
        // Set Text
        if (tooltip.body) {
            var titleLines = tooltip.title || [];
            var bodyLines = tooltip.body.map(getBody);
            var innerHtml = '<thead>';
            titleLines.forEach(function (title) {
                innerHtml += '<tr><th>' + title + '</th></tr>';
            });
            innerHtml += '</thead><tbody>';
            bodyLines.forEach(function (body, i) {
                var colors = tooltip.labelColors[i];
                var style = 'background:' + colors.backgroundColor;
                style += '; border-color:' + colors.borderColor;
                style += '; border-width: 2px';
                var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                innerHtml += '<tr><td>' + span + body + '</td></tr>';
            });
            innerHtml += '</tbody>';
            var tableRoot = tooltipEl.querySelector('table');
            tableRoot.innerHTML = innerHtml;
        }
        var positionY = this._chart.canvas.offsetTop;
        var positionX = this._chart.canvas.offsetLeft;
        // Display, position, and set styles for font
        tooltipEl.style.opacity = 1;
        tooltipEl.style.left = positionX + tooltip.caretX + 'px';
        tooltipEl.style.top = positionY + tooltip.caretY + 'px';
        tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
        tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
        tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
        tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
    };
    if (chartType == 'bar') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'doughnut') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    '#003f5c',
                    '58508d',
                    '#2f4b7c',
                    '#665191',
                    '#a05195',
                    '#d45087',
                    '#f95d6a',
                    '#ff7c43',
                    '#ffa600',
                ],
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'line') {
        var data = chartData;
        console.log('chart data: ' + chartData[0]);
        // get the dataset label names count 
        var dataset_labels_count = chartData[(chartData.length) - 1].length;
        var lc_data = [];
        var lc_label = [];
        var j = 0;
        for (var i = 0; i < chartData.length; i++) {
            for (var j = 0; j < dataset_labels_count; j++) {
                lc_label[j] = chartData[i][j];
            }
        }
        // for (var i = 0; i < dataset_labels_count; i++) {
        // 	for(var j = 0; j < chartData.length; j++){
        // 		console.log("chart Data: "+chartData[j][i]);
        // 		lc_data[i][j] = chartData[j][i];
        // 	}	
        // }
        for (var i = 0; i < data.length - 1; i++) {
            for (var j = 0; j < i; j++) {
                const tmp = data[i][j];
                data[i][j] = data[j][i];
                data[j][i] = tmp;
            }
        }
        console.log('labels: ' + lc_label);
        console.log('data: ' + data[1]);
        const background_color = [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            '#003f5c',
            '58508d',
            '#2f4b7c',
            '#665191',
            '#a05195',
            '#d45087',
            '#f95d6a',
            '#ff7c43',
            '#ffa600',
        ];
        var datasets_array = []
        for (var j = 0; j < dataset_labels_count; j++) {
            datasets_array.push({
                label: lc_label[j],
                data: data[j],
                borderColor: background_color[j]
            });
        }
        var barChartData = {
            labels: labels,
            datasets: datasets_array
        };
    }
    if (chartType == 'line') {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    } else {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '%';
                            }
                        }
                    }]
                }
            }
        });
    }
    // chart.destroy();
}

function prepareChart1(chartType, chartData, labels, header) {
    var color = Chart.helpers.color;
    Chart.defaults.global.pointHitDetectionRadius = 1;
    var customTooltips = function (tooltip) {
        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');
        if (!tooltipEl) {
            tooltipEl = document.createElement('div');
            tooltipEl.id = 'chartjs-tooltip';
            tooltipEl.innerHTML = '<table></table>';
            this._chart.canvas.parentNode.appendChild(tooltipEl);
        }
        // Hide if no tooltip
        if (tooltip.opacity === 0) {
            tooltipEl.style.opacity = 0;
            return;
        }
        // Set caret Position
        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltip.yAlign) {
            tooltipEl.classList.add(tooltip.yAlign);
        } else {
            tooltipEl.classList.add('no-transform');
        }

        function getBody(bodyItem) {
            return bodyItem.lines;
        }
        // Set Text
        if (tooltip.body) {
            var titleLines = tooltip.title || [];
            var bodyLines = tooltip.body.map(getBody);
            var innerHtml = '<thead>';
            titleLines.forEach(function (title) {
                innerHtml += '<tr><th>' + title + '</th></tr>';
            });
            innerHtml += '</thead><tbody>';
            bodyLines.forEach(function (body, i) {
                var colors = tooltip.labelColors[i];
                var style = 'background:' + colors.backgroundColor;
                style += '; border-color:' + colors.borderColor;
                style += '; border-width: 2px';
                var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                innerHtml += '<tr><td>' + span + body + '</td></tr>';
            });
            innerHtml += '</tbody>';
            var tableRoot = tooltipEl.querySelector('table');
            tableRoot.innerHTML = innerHtml;
        }
        var positionY = this._chart.canvas.offsetTop;
        var positionX = this._chart.canvas.offsetLeft;
        // Display, position, and set styles for font
        tooltipEl.style.opacity = 1;
        tooltipEl.style.left = positionX + tooltip.caretX + 'px';
        tooltipEl.style.top = positionY + tooltip.caretY + 'px';
        tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
        tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
        tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
        tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
    };
    if (chartType == 'bar') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'doughnut') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    '#003f5c',
                    '58508d',
                    '#2f4b7c',
                    '#665191',
                    '#a05195',
                    '#d45087',
                    '#f95d6a',
                    '#ff7c43',
                    '#ffa600',
                ],
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'line') {
        var data = chartData;
        console.log('chart data: ' + chartData[0]);
        // get the dataset label names count 
        var dataset_labels_count = chartData[(chartData.length) - 1].length;
        var lc_data = [];
        var lc_label = [];
        var j = 0;
        for (var i = 0; i < chartData.length; i++) {
            for (var j = 0; j < dataset_labels_count; j++) {
                lc_label[j] = chartData[i][j];
            }
        }
        // for (var i = 0; i < dataset_labels_count; i++) {
        // 	for(var j = 0; j < chartData.length; j++){
        // 		console.log("chart Data: "+chartData[j][i]);
        // 		lc_data[i][j] = chartData[j][i];
        // 	}	
        // }
        for (var i = 0; i < data.length - 1; i++) {
            for (var j = 0; j < i; j++) {
                const tmp = data[i][j];
                data[i][j] = data[j][i];
                data[j][i] = tmp;
            }
        }
        console.log('labels: ' + lc_label);
        console.log('data: ' + data[1]);
        const background_color = [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            '#003f5c',
            '58508d',
            '#2f4b7c',
            '#665191',
            '#a05195',
            '#d45087',
            '#f95d6a',
            '#ff7c43',
            '#ffa600',
        ];
        var datasets_array = []
        for (var j = 0; j < dataset_labels_count; j++) {
            datasets_array.push({
                label: lc_label[j],
                data: data[j],
                borderColor: background_color[j]
            });
        }
        var barChartData = {
            labels: labels,
            datasets: datasets_array
        };
    }
    if (chartType == 'line') {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    } else {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    }
    // chart.destroy();
}

function prepareChart2(chartType, chartData, labels, header, chartData1, chartData2, chartData3, chartData4) {
    var color = Chart.helpers.color;
    Chart.defaults.global.pointHitDetectionRadius = 1;
    var customTooltips = function (tooltip) {
        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');
        if (!tooltipEl) {
            tooltipEl = document.createElement('div');
            tooltipEl.id = 'chartjs-tooltip';
            tooltipEl.innerHTML = '<table></table>';
            this._chart.canvas.parentNode.appendChild(tooltipEl);
        }
        // Hide if no tooltip
        if (tooltip.opacity === 0) {
            tooltipEl.style.opacity = 0;
            return;
        }
        // Set caret Position
        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltip.yAlign) {
            tooltipEl.classList.add(tooltip.yAlign);
        } else {
            tooltipEl.classList.add('no-transform');
        }

        function getBody(bodyItem) {
            return bodyItem.lines;
        }
        // Set Text
        if (tooltip.body) {
            var titleLines = tooltip.title || [];
            var bodyLines = tooltip.body.map(getBody);
            var innerHtml = '<thead>';
            titleLines.forEach(function (title) {
                innerHtml += '<tr><th>' + title + '</th></tr>';
            });
            innerHtml += '</thead><tbody>';
            bodyLines.forEach(function (body, i) {
                var colors = tooltip.labelColors[i];
                var style = 'background:' + colors.backgroundColor;
                style += '; border-color:' + colors.borderColor;
                style += '; border-width: 2px';
                var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                innerHtml += '<tr><td>' + span + body + '</td></tr>';
            });
            innerHtml += '</tbody>';
            var tableRoot = tooltipEl.querySelector('table');
            tableRoot.innerHTML = innerHtml;
        }
        var positionY = this._chart.canvas.offsetTop;
        var positionX = this._chart.canvas.offsetLeft;
        // Display, position, and set styles for font
        tooltipEl.style.opacity = 1;
        tooltipEl.style.left = positionX + tooltip.caretX + 'px';
        tooltipEl.style.top = positionY + tooltip.caretY + 'px';
        tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
        tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
        tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
        tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
    };
    if (chartType == 'bar') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: 2016,
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            },
            {
                label: 2017,
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData1,
                hoverOffset: 4
            },
            {
                label: 2018,
                backgroundColor: window.chartColors.yellow,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData2,
                hoverOffset: 4
            },
            {
                label: 2019,
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData3,
                hoverOffset: 4
            },
            {
                label: 2020,
                backgroundColor: window.chartColors.orange,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData4,
                hoverOffset: 4
            }
            ]
        };
    } else if (chartType == 'doughnut') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    '#003f5c',
                    '58508d',
                    '#2f4b7c',
                    '#665191',
                    '#a05195',
                    '#d45087',
                    '#f95d6a',
                    '#ff7c43',
                    '#ffa600',
                ],
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'line') {
        var data = chartData;
        console.log('chart data: ' + chartData[0]);
        // get the dataset label names count 
        var dataset_labels_count = chartData[(chartData.length) - 1].length;
        var lc_data = [];
        var lc_label = [];
        var j = 0;
        for (var i = 0; i < chartData.length; i++) {
            for (var j = 0; j < dataset_labels_count; j++) {
                lc_label[j] = chartData[i][j];
            }
        }
        // for (var i = 0; i < dataset_labels_count; i++) {
        // 	for(var j = 0; j < chartData.length; j++){
        // 		console.log("chart Data: "+chartData[j][i]);
        // 		lc_data[i][j] = chartData[j][i];
        // 	}	
        // }
        for (var i = 0; i < data.length - 1; i++) {
            for (var j = 0; j < i; j++) {
                const tmp = data[i][j];
                data[i][j] = data[j][i];
                data[j][i] = tmp;
            }
        }
        console.log('labels: ' + lc_label);
        console.log('data: ' + data[1]);
        const background_color = [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            '#003f5c',
            '58508d',
            '#2f4b7c',
            '#665191',
            '#a05195',
            '#d45087',
            '#f95d6a',
            '#ff7c43',
            '#ffa600',
        ];
        var datasets_array = []
        for (var j = 0; j < dataset_labels_count; j++) {
            datasets_array.push({
                label: lc_label[j],
                data: data[j],
                borderColor: background_color[j]
            });
        }
        var barChartData = {
            labels: labels,
            datasets: datasets_array
        };
    }
    if (chartType == 'line') {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    } else {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    }
    // chart.destroy();
}

function prepareChart3(chartType, chartData, labels, header, chartData1, chartData2, chartData3) {
    var color = Chart.helpers.color;
    Chart.defaults.global.pointHitDetectionRadius = 1;
    var customTooltips = function (tooltip) {
        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');
        if (!tooltipEl) {
            tooltipEl = document.createElement('div');
            tooltipEl.id = 'chartjs-tooltip';
            tooltipEl.innerHTML = '<table></table>';
            this._chart.canvas.parentNode.appendChild(tooltipEl);
        }
        // Hide if no tooltip
        if (tooltip.opacity === 0) {
            tooltipEl.style.opacity = 0;
            return;
        }
        // Set caret Position
        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltip.yAlign) {
            tooltipEl.classList.add(tooltip.yAlign);
        } else {
            tooltipEl.classList.add('no-transform');
        }

        function getBody(bodyItem) {
            return bodyItem.lines;
        }
        // Set Text
        if (tooltip.body) {
            var titleLines = tooltip.title || [];
            var bodyLines = tooltip.body.map(getBody);
            var innerHtml = '<thead>';
            titleLines.forEach(function (title) {
                innerHtml += '<tr><th>' + title + '</th></tr>';
            });
            innerHtml += '</thead><tbody>';
            bodyLines.forEach(function (body, i) {
                var colors = tooltip.labelColors[i];
                var style = 'background:' + colors.backgroundColor;
                style += '; border-color:' + colors.borderColor;
                style += '; border-width: 2px';
                var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                innerHtml += '<tr><td>' + span + body + '</td></tr>';
            });
            innerHtml += '</tbody>';
            var tableRoot = tooltipEl.querySelector('table');
            tableRoot.innerHTML = innerHtml;
        }
        var positionY = this._chart.canvas.offsetTop;
        var positionX = this._chart.canvas.offsetLeft;
        // Display, position, and set styles for font
        tooltipEl.style.opacity = 1;
        tooltipEl.style.left = positionX + tooltip.caretX + 'px';
        tooltipEl.style.top = positionY + tooltip.caretY + 'px';
        tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
        tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
        tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
        tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
    };
    if (chartType == 'bar') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: 2021,
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            },
            {
                label: 2020,
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData1,
                hoverOffset: 4
            },
            {
                label: 2019,
                backgroundColor: window.chartColors.yellow,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData2,
                hoverOffset: 4
            },
            {
                label: 2018,
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData3,
                hoverOffset: 4
            }
            ]
        };
    } else if (chartType == 'doughnut') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    '#003f5c',
                    '58508d',
                    '#2f4b7c',
                    '#665191',
                    '#a05195',
                    '#d45087',
                    '#f95d6a',
                    '#ff7c43',
                    '#ffa600',
                ],
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'line') {
        var data = chartData;
        console.log('chart data: ' + chartData[0]);
        // get the dataset label names count 
        var dataset_labels_count = chartData[(chartData.length) - 1].length;
        var lc_data = [];
        var lc_label = [];
        var j = 0;
        for (var i = 0; i < chartData.length; i++) {
            for (var j = 0; j < dataset_labels_count; j++) {
                lc_label[j] = chartData[i][j];
            }
        }
        // for (var i = 0; i < dataset_labels_count; i++) {
        // 	for(var j = 0; j < chartData.length; j++){
        // 		console.log("chart Data: "+chartData[j][i]);
        // 		lc_data[i][j] = chartData[j][i];
        // 	}	
        // }
        for (var i = 0; i < data.length - 1; i++) {
            for (var j = 0; j < i; j++) {
                const tmp = data[i][j];
                data[i][j] = data[j][i];
                data[j][i] = tmp;
            }
        }
        console.log('labels: ' + lc_label);
        console.log('data: ' + data[1]);
        const background_color = [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            '#003f5c',
            '58508d',
            '#2f4b7c',
            '#665191',
            '#a05195',
            '#d45087',
            '#f95d6a',
            '#ff7c43',
            '#ffa600',
        ];
        var datasets_array = []
        for (var j = 0; j < dataset_labels_count; j++) {
            datasets_array.push({
                label: lc_label[j],
                data: data[j],
                borderColor: background_color[j]
            });
        }
        var barChartData = {
            labels: labels,
            datasets: datasets_array
        };
    }
    if (chartType == 'line') {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    } else {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    }
    // chart.destroy();
}

function prepareChart4(chartType, chartData, labels, header, chartData1, chartData2, chartData3, chartData4) {
    var color = Chart.helpers.color;
    Chart.defaults.global.pointHitDetectionRadius = 1;
    var customTooltips = function (tooltip) {
        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');
        if (!tooltipEl) {
            tooltipEl = document.createElement('div');
            tooltipEl.id = 'chartjs-tooltip';
            tooltipEl.innerHTML = '<table></table>';
            this._chart.canvas.parentNode.appendChild(tooltipEl);
        }
        // Hide if no tooltip
        if (tooltip.opacity === 0) {
            tooltipEl.style.opacity = 0;
            return;
        }
        // Set caret Position
        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltip.yAlign) {
            tooltipEl.classList.add(tooltip.yAlign);
        } else {
            tooltipEl.classList.add('no-transform');
        }

        function getBody(bodyItem) {
            return bodyItem.lines;
        }
        // Set Text
        if (tooltip.body) {
            var titleLines = tooltip.title || [];
            var bodyLines = tooltip.body.map(getBody);
            var innerHtml = '<thead>';
            titleLines.forEach(function (title) {
                innerHtml += '<tr><th>' + title + '</th></tr>';
            });
            innerHtml += '</thead><tbody>';
            bodyLines.forEach(function (body, i) {
                var colors = tooltip.labelColors[i];
                var style = 'background:' + colors.backgroundColor;
                style += '; border-color:' + colors.borderColor;
                style += '; border-width: 2px';
                var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                innerHtml += '<tr><td>' + span + body + '</td></tr>';
            });
            innerHtml += '</tbody>';
            var tableRoot = tooltipEl.querySelector('table');
            tableRoot.innerHTML = innerHtml;
        }
        var positionY = this._chart.canvas.offsetTop;
        var positionX = this._chart.canvas.offsetLeft;
        // Display, position, and set styles for font
        tooltipEl.style.opacity = 1;
        tooltipEl.style.left = positionX + tooltip.caretX + 'px';
        tooltipEl.style.top = positionY + tooltip.caretY + 'px';
        tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
        tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
        tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
        tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
    };
    if (chartType == 'bar') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: 'TOTAL YELLOW',
                backgroundColor: window.chartColors.yellow,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            },
            {
                label: 'TOTAL WHITE',
                backgroundColor: window.chartColors.white,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData1,
                hoverOffset: 4
            },
            {
                label: 'TOTAL BLUE',
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData2,
                hoverOffset: 4
            },
            {
                label: 'TOTAL RED',
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData3,
                hoverOffset: 4
            }
            ]
        };
    } else if (chartType == 'doughnut') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    '#003f5c',
                    '58508d',
                    '#2f4b7c',
                    '#665191',
                    '#a05195',
                    '#d45087',
                    '#f95d6a',
                    '#ff7c43',
                    '#ffa600',
                ],
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'line') {
        var data = chartData;
        console.log('chart data: ' + chartData[0]);
        // get the dataset label names count 
        var dataset_labels_count = chartData[(chartData.length) - 1].length;
        var lc_data = [];
        var lc_label = [];
        var j = 0;
        for (var i = 0; i < chartData.length; i++) {
            for (var j = 0; j < dataset_labels_count; j++) {
                lc_label[j] = chartData[i][j];
            }
        }
        // for (var i = 0; i < dataset_labels_count; i++) {
        // 	for(var j = 0; j < chartData.length; j++){
        // 		console.log("chart Data: "+chartData[j][i]);
        // 		lc_data[i][j] = chartData[j][i];
        // 	}	
        // }
        for (var i = 0; i < data.length - 1; i++) {
            for (var j = 0; j < i; j++) {
                const tmp = data[i][j];
                data[i][j] = data[j][i];
                data[j][i] = tmp;
            }
        }
        console.log('labels: ' + lc_label);
        console.log('data: ' + data[1]);
        const background_color = [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            '#003f5c',
            '58508d',
            '#2f4b7c',
            '#665191',
            '#a05195',
            '#d45087',
            '#f95d6a',
            '#ff7c43',
            '#ffa600',
        ];
        var datasets_array = []
        for (var j = 0; j < dataset_labels_count; j++) {
            datasets_array.push({
                label: lc_label[j],
                data: data[j],
                borderColor: background_color[j]
            });
        }
        var barChartData = {
            labels: labels,
            datasets: datasets_array
        };
    }
    if (chartType == 'line') {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    } else {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    }
    // chart.destroy();
}

function prepareChart5(chartType, chartData, labels, header, chartData1, chartData2, chartData3, chartData4, chartData5) {
    var color = Chart.helpers.color;
    Chart.defaults.global.pointHitDetectionRadius = 1;
    var customTooltips = function (tooltip) {
        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');
        if (!tooltipEl) {
            tooltipEl = document.createElement('div');
            tooltipEl.id = 'chartjs-tooltip';
            tooltipEl.innerHTML = '<table></table>';
            this._chart.canvas.parentNode.appendChild(tooltipEl);
        }
        // Hide if no tooltip
        if (tooltip.opacity === 0) {
            tooltipEl.style.opacity = 0;
            return;
        }
        // Set caret Position
        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltip.yAlign) {
            tooltipEl.classList.add(tooltip.yAlign);
        } else {
            tooltipEl.classList.add('no-transform');
        }

        function getBody(bodyItem) {
            return bodyItem.lines;
        }
        // Set Text
        if (tooltip.body) {
            var titleLines = tooltip.title || [];
            var bodyLines = tooltip.body.map(getBody);
            var innerHtml = '<thead>';
            titleLines.forEach(function (title) {
                innerHtml += '<tr><th>' + title + '</th></tr>';
            });
            innerHtml += '</thead><tbody>';
            bodyLines.forEach(function (body, i) {
                var colors = tooltip.labelColors[i];
                var style = 'background:' + colors.backgroundColor;
                style += '; border-color:' + colors.borderColor;
                style += '; border-width: 2px';
                var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                innerHtml += '<tr><td>' + span + body + '</td></tr>';
            });
            innerHtml += '</tbody>';
            var tableRoot = tooltipEl.querySelector('table');
            tableRoot.innerHTML = innerHtml;
        }
        var positionY = this._chart.canvas.offsetTop;
        var positionX = this._chart.canvas.offsetLeft
        // Display, position, and set styles for font
        tooltipEl.style.opacity = 1;
        tooltipEl.style.left = positionX + tooltip.caretX + 'px';
        tooltipEl.style.top = positionY + tooltip.caretY + 'px';
        tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
        tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
        tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
        tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
    };
    if (chartType == 'bar') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: new Date().getFullYear() - 5,
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }, {
                label: new Date().getFullYear() - 4,
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData1,
                hoverOffset: 4
            }, {
                label: new Date().getFullYear() - 3,
                backgroundColor: window.chartColors.yellow,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData2,
                hoverOffset: 4
            }, {
                label: new Date().getFullYear() - 2,
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData3,
                hoverOffset: 4
            }, {
                label: new Date().getFullYear() - 1,
                backgroundColor: window.chartColors.orange,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData4,
                hoverOffset: 4
            }, {
                label: new Date().getFullYear(),
                backgroundColor: window.chartColors.purple,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData5,
                hoverOffset: 4
            }]
        };
        // if(chartData.length==0){
        // 	barChartData.datasets.splice(0,1);
        // }
        // else if(chartData1.length==0){
        // 	barChartData.datasets.splice(1,1);
        // }
        // else if(chartData2.length==0){
        // 	barChartData.datasets.splice(2,1);
        // }
        // else if(chartData3.length==0){
        // 	barChartData.datasets.splice(3,1);
        // }
        // else if(chartData4.length==0){
        // 	barChartData.datasets.splice(4,1);
        // }
        // else{
        // 	barChartData.datasets.splice(5,1);
        // }
    } else if (chartType == 'doughnut') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    '#003f5c',
                    '58508d',
                    '#2f4b7c',
                    '#665191',
                    '#a05195',
                    '#d45087',
                    '#f95d6a',
                    '#ff7c43',
                    '#ffa600',
                ],
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'line') {
        var data = chartData;
        console.log('chart data: ' + chartData[0]);
        // get the dataset label names count 
        var dataset_labels_count = chartData[(chartData.length) - 1].length;
        var lc_data = [];
        var lc_label = [];
        var j = 0;
        for (var i = 0; i < chartData.length; i++) {
            for (var j = 0; j < dataset_labels_count; j++) {
                lc_label[j] = chartData[i][j];
            }
        }
        // for (var i = 0; i < dataset_labels_count; i++) {
        // 	for(var j = 0; j < chartData.length; j++){
        // 		console.log("chart Data: "+chartData[j][i]);
        // 		lc_data[i][j] = chartData[j][i];
        // 	}	
        // }
        for (var i = 0; i < data.length - 1; i++) {
            for (var j = 0; j < i; j++) {
                const tmp = data[i][j];
                data[i][j] = data[j][i];
                data[j][i] = tmp;
            }
        }
        console.log('labels: ' + lc_label);
        console.log('data: ' + data[1]);
        const background_color = [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            '#003f5c',
            '58508d',
            '#2f4b7c',
            '#665191',
            '#a05195',
            '#d45087',
            '#f95d6a',
            '#ff7c43',
            '#ffa600',
        ];
        var datasets_array = []
        for (var j = 0; j < dataset_labels_count; j++) {
            datasets_array.push({
                label: lc_label[j],
                data: data[j],
                borderColor: background_color[j]
            });
        }
        var barChartData = {
            labels: labels,
            datasets: datasets_array
        };
    }
    if (chartType == 'line') {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    } else {
        var ctx1 = document.getElementById("chart3").getContext("2d");
        chart = new Chart(ctx1, {
            type: chartType,
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: header,
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += new Intl.NumberFormat('en-US', {
                                    style: 'percent',
                                    currency: 'USD'
                                }).format(context.parsed.y);
                            }
                            return label;
                        }
                    },
                    enabled: true,
                    mode: 'index',
                    position: 'nearest',
                    custom: customTooltips
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return value + '';
                            }
                        }
                    }]
                }
            }
        });
    }
    // chart.destroy();
}
$('#startDate1').datepicker({
    format: "mm-yyyy",
    viewMode: "months",
    minViewMode: "months"
});
$('#endDate1').datepicker({
    format: "mm-yyyy",
    viewMode: "months",
    minViewMode: "months"
});

function open_pdf() {
    html2canvas(document.getElementById("report_div"), {
        onrendered: function (canvas) {
            var img = canvas.toDataURL(); //image data of canvas
            // var doc = new jsPDF('p','pt','a2');
            var doc = new jsPDF('l', 'mm', [300, 350]);
            doc.addImage(img, 10, 10);
            doc.save('graph.pdf');
        }
    });
}