/* Project Analysis Chart */
var element = document.getElementById("projectAnalysis");
if (element !== null) {
    element.innerHTML = "";
    var options = {
        series: [{
            name: 'Projects',
            type: 'column',
            data: [1.8, 2.5, 2.5, 1.5, 2.5, 2.8, 3.8]
        }, {
            name: 'Tasks',
            type: 'column',
            data: [1.1, 2.2, 3.1, 4, 4.1, 4.9, 6.5]
        }, {
            name: 'Revenue',
            type: 'line',
            data: [20, 29, 37, 35, 44, 43, 50],
        },
        ],
        chart: {
            toolbar: {
                show: false
            },
            height: 300,
            type: 'line',
            stacked: false,
            fontFamily: 'Poppins, Arial, sans-serif',
        },
        grid: {
            borderColor: '#f5f4f4',
            strokeDashArray: 3
        },
        dataLabels: {
            enabled: false
        },
        title: {
            text: undefined,
        },
        xaxis: {
            categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        },
        yaxis: [
            {
                show: true,
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: false,
                    color: '#4eb6d0'
                },
                labels: {
                    style: {
                        colors: '#4eb6d0',
                    }
                },
                title: {
                    text: undefined,
                },
                tooltip: {
                    enabled: true
                }
            },
            {
                seriesName: 'Projects',
                opposite: true,
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: false,
                },
                labels: {
                    style: {
                        colors: '#00E396',
                    }
                },
                title: {
                    text: undefined,
                },
            },
            {
                seriesName: 'Revenue',
                opposite: true,
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: false,
                },
                labels: {
                    show: false,
                },
                title: {
                    text: undefined,
                }
            },
        ],
        tooltip: {
            enabled: true,
        },
        legend: {
            show: true,
            position: 'top',
            offsetX: 40,
            fontSize: '13px',
            fontWeight: 'normal',
            labels: {
                colors: '#acb1b1',
            },
            markers: {
                width: 10,
                height: 10,
            },
        },
        stroke: {
            width: [0, 0, 1.5],
            curve: 'straight',
            dashArray: [0, 0, 0],
        },
        plotOptions: {
            bar: {
                columnWidth: "35%",
                borderRadius: 3
            }
        },
        colors: ["rgb(132, 90, 223)", "#ededed", "#23b7e5"]
    };
    var chart1 = new ApexCharts(document.querySelector("#projectAnalysis"), options);
    chart1.render();
}

function projectAnalysis() {
    chart1.updateOptions({
        colors: ["rgb(" + myVarVal + ")", "#ededed", "#23b7e5"],
    })
}
/* Project Analysis Chart */

/* for user1 */
var element = document.getElementById("user1");
if (element !== null) {
    element.innerHTML = "";
    var spark1 = {
        chart: {
            type: 'line',
            height: 20,
            width: 80,
            sparkline: {
                enabled: true
            },
            dropShadow: {
                enabled: true,
                enabledOnSeries: undefined,
                top: 0,
                left: 0,
                blur: 3,
                color: '#000',
                opacity: 0.1
            }
        },
        grid: {
            show: false,
            xaxis: {
                lines: {
                    show: false
                }
            },
            yaxis: {
                lines: {
                    show: false
                }
            },
        },
        stroke: {
            show: true,
            curve: 'smooth',
            lineCap: 'butt',
            colors: undefined,
            width: 1.5,
            dashArray: 0,
        },
        fill: {
            gradient: {
                enabled: false
            }
        },
        series: [{
            name: 'Value',
            data: [54, 38, 56, 24, 65]
        }],
        yaxis: {
            min: 0,
            show: false
        },
        xaxis: {
            show: false,
            axisTicks: {
                show: false
            },
            axisBorder: {
                show: false
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
        },
        colors: ['#09ad95'],
    
    }
    var spark1 = new ApexCharts(document.querySelector("#user1"), spark1);
    spark1.render();
}
/* for user1 */

/* for user2 */
var element = document.getElementById("user2");
if (element !== null) {
    element.innerHTML = "";
    var spark2 = {
        chart: {
            type: 'line',
            height: 20,
            width: 80,
            sparkline: {
                enabled: true
            },
            dropShadow: {
                enabled: true,
                enabledOnSeries: undefined,
                top: 0,
                left: 0,
                blur: 3,
                color: '#000',
                opacity: 0.1
            }
        },
        grid: {
            show: false,
            xaxis: {
                lines: {
                    show: false
                }
            },
            yaxis: {
                lines: {
                    show: false
                }
            },
        },
        stroke: {
            show: true,
            curve: 'smooth',
            lineCap: 'butt',
            colors: undefined,
            width: 1.5,
            dashArray: 0,
        },
        fill: {
            gradient: {
                enabled: false
            }
        },
        series: [{
            name: 'Value',
            data: [24, 54, 15, 42, 16]
        }],
        yaxis: {
            min: 0,
            show: false
        },
        xaxis: {
            show: false,
            axisTicks: {
                show: false
            },
            axisBorder: {
                show: false
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
        },
        colors: ['#fb6b27'],
    
    }
    var spark2 = new ApexCharts(document.querySelector("#user2"), spark2);
    spark2.render();
}
/* for user2 */

/* for user3 */
var element = document.getElementById("user3");
if (element !== null) {
    element.innerHTML = "";
    var spark3 = {
        chart: {
            type: 'line',
            height: 20,
            width: 80,
            sparkline: {
                enabled: true
            },
            dropShadow: {
                enabled: true,
                enabledOnSeries: undefined,
                top: 0,
                left: 0,
                blur: 3,
                color: '#000',
                opacity: 0.1
            }
        },
        grid: {
            show: false,
            xaxis: {
                lines: {
                    show: false
                }
            },
            yaxis: {
                lines: {
                    show: false
                }
            },
        },
        stroke: {
            show: true,
            curve: 'smooth',
            lineCap: 'butt',
            colors: undefined,
            width: 1.5,
            dashArray: 0,
        },
        fill: {
            gradient: {
                enabled: false
            }
        },
        series: [{
            name: 'Value',
            data: [15, 42, 16, 44, 24 ]
        }],
        yaxis: {
            min: 0,
            show: false
        },
        xaxis: {
            show: false,
            axisTicks: {
                show: false
            },
            axisBorder: {
                show: false
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
        },
        colors: ['#1170e4'],
    
    }
    var spark3 = new ApexCharts(document.querySelector("#user3"), spark3);
    spark3.render();
}
/* for user3 */

/* for user4 */
var element = document.getElementById("user4");
if (element !== null) {
    element.innerHTML = "";
    var spark4 = {
        chart: {
            type: 'line',
            height: 20,
            width: 80,
            sparkline: {
                enabled: true
            },
            dropShadow: {
                enabled: true,
                enabledOnSeries: undefined,
                top: 0,
                left: 0,
                blur: 3,
                color: '#000',
                opacity: 0.1
            }
        },
        grid: {
            show: false,
            xaxis: {
                lines: {
                    show: false
                }
            },
            yaxis: {
                lines: {
                    show: false
                }
            },
        },
        stroke: {
            show: true,
            curve: 'smooth',
            lineCap: 'butt',
            colors: undefined,
            width: 1.5,
            dashArray: 0,
        },
        fill: {
            gradient: {
                enabled: false
            }
        },
        series: [{
            name: 'Value',
            data: [54, 38, 56, 24, 65]
        }],
        yaxis: {
            min: 0,
            show: false
        },
        xaxis: {
            show: false,
            axisTicks: {
                show: false
            },
            axisBorder: {
                show: false
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
        },
        colors: ['#e82646'],
    
    }
    var spark4 = new ApexCharts(document.querySelector("#user4"), spark4);
    spark4.render();
}
/* for user4 */

/* for user5 */
var element = document.getElementById("user5");
if (element !== null) {
    element.innerHTML = "";
    var spark5 = {
        chart: {
            type: 'line',
            height: 20,
            width: 80,
            sparkline: {
                enabled: true
            },
            dropShadow: {
                enabled: true,
                enabledOnSeries: undefined,
                top: 0,
                left: 0,
                blur: 3,
                color: '#000',
                opacity: 0.1
            }
        },
        grid: {
            show: false,
            xaxis: {
                lines: {
                    show: false
                }
            },
            yaxis: {
                lines: {
                    show: false
                }
            },
        },
        stroke: {
            show: true,
            curve: 'smooth',
            lineCap: 'butt',
            colors: undefined,
            width: 1.5,
            dashArray: 0,
        },
        fill: {
            gradient: {
                enabled: false
            }
        },
        series: [{
            name: 'Value',
            data: [15, 42, 16, 44, 24 ]
        }],
        yaxis: {
            min: 0,
            show: false
        },
        xaxis: {
            show: false,
            axisTicks: {
                show: false
            },
            axisBorder: {
                show: false
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
        },
        colors: ['#f7b731'],
    
    }
    var spark5 = new ApexCharts(document.querySelector("#user5"), spark5);
    spark5.render();
}
/* for user5 */