admin_hura_8/template/javascript/visitor.html

<script src="/assets/script/charts.js"></script>
<script>
    $(document).ready(function () {
        access_chart();
        chart_pie();
        revenue_chart();
    })

    // Truy cập
    function access_chart() {
        const options = {
            colors: ["#0041E8", "#FFC700"],
            series: [
                {
                    name: "Lượt truy cập",
                    color: "#0041E8",
                    data: [
                        { x: "Mon", y: 231 },
                        { x: "Tue", y: 122 },
                        { x: "Wed", y: 63 },
                        { x: "Thu", y: 421 },
                        { x: "Fri", y: 122 },
                        { x: "Sat", y: 323 },
                        { x: "Sun", y: 111 },
                    ],
                },
                {
                    name: "Số khách",
                    color: "#FFC700",
                    data: [
                        { x: "Mon", y: 232 },
                        { x: "Tue", y: 113 },
                        { x: "Wed", y: 341 },
                        { x: "Thu", y: 224 },
                        { x: "Fri", y: 522 },
                        { x: "Sat", y: 411 },
                        { x: "Sun", y: 243 },
                    ],
                },
            ],
            chart: {
                type: "bar",
                height: "320px",
                fontFamily: "Inter, sans-serif",
                toolbar: {
                    show: false,
                },
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: "70%",
                    borderRadiusApplication: "end",
                    borderRadius: 8,
                },
            },
            tooltip: {
                shared: true,
                intersect: false,
                style: {
                    fontFamily: "Inter, sans-serif",
                },
            },
            states: {
                hover: {
                    filter: {
                        type: "darken",
                        value: 1,
                    },
                },
            },
            stroke: {
                show: true,
                width: 0,
                colors: ["transparent"],
            },
            grid: {
                show: false,
                strokeDashArray: 4,
                padding: {
                    left: 2,
                    right: 2,
                    top: -14
                },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: true,
                position: 'top',
            },
            xaxis: {
                floating: false,
                labels: {
                    show: true,
                    style: {
                        fontFamily: "Inter, sans-serif",
                        cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
                    }
                },
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false,
                },
            },
            yaxis: {
                show: false,
            },
            fill: {
                opacity: 1,
            },
        }

        if (document.getElementById("js-access-chart") && typeof ApexCharts !== 'undefined') {
            const chart = new ApexCharts(document.getElementById("js-access-chart"), options);
            chart.render();
        }
    }


    function chart_pie() {
        const getChartOptions = () => {
            return {
                series: [55, 30, 15],
                colors: ["#0041E8", "#41C0E9", "#A8E5DA",],
                chart: {
                    height: "370px",
                    width: "100%",
                    type: "pie",
                },
                stroke: {
                    colors: ["transparent"],
                    lineCap: "",
                },
                plotOptions: {
                    pie: {
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                fontFamily: "Inter, sans-serif",
                                offsetY: 20,
                            },
                            value: {
                                show: true,
                                fontFamily: "Inter, sans-serif",
                                offsetY: -20,
                                formatter: function (value) {
                                    return value + "%"
                                },
                            },
                        },
                        size: "100%",
                    },
                },
                labels: ["Desktop", "Table", "Mobile"],
                dataLabels: {
                    enabled: true,
                    textAnchor: 'middle',
                    offsetX: '50%',
                    offsetY: '50%',
                    borderWidth: 1,
                    borderColor: '#fff',
                },
                legend: {
                    position: "bottom",
                    fontFamily: "Inter, sans-serif",
                },
                yaxis: {
                    labels: {
                        formatter: function (value) {
                            return value + "%"
                        },
                    },
                },
                xaxis: {
                    labels: {
                        formatter: function (value) {
                            return value + "%"
                        },
                    },
                    axisTicks: {
                        show: true,
                    },
                    axisBorder: {
                        show: true,
                    },
                },
            }
        }

        if (document.getElementById("js-chart-pie") && typeof ApexCharts !== 'undefined') {
            const chart = new ApexCharts(document.getElementById("js-chart-pie"), getChartOptions());
            chart.render();
        }
    }


    // Doanh thu
    function revenue_chart() {
        let options = {
            chart: {
                maxWidth: "100%",
                height: "320px",
                type: "area",
                fontFamily: "Inter, sans-serif",
                dropShadow: {
                    enabled: false,
                },
                toolbar: {
                    show: false,
                },
            },
            tooltip: {
                enabled: true,
                x: {
                    show: false,
                },
            },
            fill: {
                type: "gradient",
                gradient: {
                    opacityFrom: 0.55,
                    opacityTo: 0,
                    shade: "#1C64F2",
                    gradientToColors: ["#1C64F2"],
                },
            },
            dataLabels: {
                enabled: false,
            },
            stroke: {
                width: 6,
            },
            grid: {
                show: false,
                strokeDashArray: 4,
                padding: {
                    left: 2,
                    right: 2,
                    top: 0
                },
            },
            series: [
                {
                    name: "New users",
                    data: [6500, 6418, 6456, 6526, 6356, 6456],
                    color: "#0041E8",
                },
            ],
            xaxis: {
                categories: [
                    '01 February',
                    '02 February',
                    '03 February',
                    '04 February',
                    '05 February',
                    '06 February',
                    '07 February'
                ],
                labels: {
                    show: false,
                },
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false,
                },
            },
            yaxis: {
                show: false,
            },
        }

        if (document.getElementById("js-revenue-chart") && typeof ApexCharts !== 'undefined') {
            const chart = new ApexCharts(document.getElementById("js-revenue-chart"), options);
            chart.render();
        }
    }

</script>