function chartTotal() {
            $.ajax({
                url: "/dashboard/chart",
                type: "get",
                beforeSend: function (xhr) {
                    if (localStorage.token) {
                        xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.token);
                    }
                },
                error: function (error) {
                    console.log(error.status);
                    if (error.status === 401) {
                        localStorage.removeItem("token");
                        $(location).attr('href', "/");
                    }
                },
                success: function (data) {
                    let arrayData = [];
                    //X-AXIS
                    var categories = [];
                    for (let i = 0; i < data.dataAll.length; i++) {
                        categories.push(data.dataAll[i].t_period)
                    }
                    arrayData.push(categories)
                    var totalTrx = [];
                    for (let i = 0; i < data.dataAll.length; i++) {
                        totalTrx.push(data.dataAll[i].trx)
                    }
                    arrayData.push(totalTrx)
                    var totalTrxClose = [];
                    for (let i = 0; i < data.dataAll.length; i++) {
                        totalTrxClose.push(data.dataAll[i].trx_close)
                    }
                    arrayData.push(totalTrxClose)
                    var totalTrxOpen = [];
                    for (let i = 0; i < data.dataAll.length; i++) {
                        totalTrxOpen.push(data.dataAll[i].trx_open)
                    }
                    arrayData.push(totalTrxOpen)

                    var ctx = document.getElementById("canvasEs").getContext('2d');
                    myChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: ['Total Trx', 'Trx Close', 'Trx Open'],
                            datasets: arrayData
                        }, options: {
                            responsive: true, legend: {labels: {fontColor: 'rgb(0,0,0)'}},

                        }
                    })
                    // myChart = Highcharts.chart('container', {
                    //     chart: {
                    //         type: 'line'
                    //     },
                    //     title: {
                    //         text: 'Total Transaksi'
                    //     },
                    //     subtitle: {
                    //         text: ''
                    //     },
                    //     // xAxis: {
                    //     //     title: {
                    //     //         text: 'Period'
                    //     //     },
                    //     //     categories: categories,
                    //     //     crosshair: true
                    //     // },
                    //     yAxis: {
                    //         min: 0,
                    //         title: {
                    //             text: 'Total Transaksi'
                    //         }
                    //     },
                    //     tooltip: {
                    //         headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    //         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    //         '<td style="padding:0"><b>{point.y} transaksi</b></td></tr>',
                    //         footerFormat: '</table>',
                    //         shared: true,
                    //         useHTML: true
                    //     },
                    //     plotOptions: {
                    //         column: {
                    //             pointPadding: 0.2,
                    //             borderWidth: 0,
                    //             dataLabels: {
                    //                 enabled: true
                    //             }
                    //         }
                    //     },
                    //     series: [
                    //         {
                    //             name: 'Trx Total',
                    //             data: totalTrx,
                    //             color: '#1270e3'
                    //             // color: {
                    //             //     linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    //             //     stops: [
                    //             //         [0, '#54bcfd'],
                    //             //         [1, '#1270e3']
                    //             //     ]
                    //             // }
                    //         },
                    //         {
                    //             name: 'Trx Close',
                    //             data: totalTrxClose,
                    //             color: '#54d169'
                    //             // color: {
                    //             //     linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    //             //     stops: [
                    //             //         [0, '#a8f279'],
                    //             //         [1, '#54d169']
                    //             //     ]
                    //             // }
                    //         },
                    //         {
                    //             name: 'Trx Open',
                    //             data: totalTrxOpen,
                    //             color: '#ff8359'
                    //             // color: {
                    //             //     linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    //             //     stops: [
                    //             //         [0, '#ffda41'],
                    //             //         [1, '#ff8359']
                    //             //     ]
                    //             // }
                    //         }
                    //     ]
                    // })
                }
            });
        }