text: let labelTopProblem = [], dataTopProblem = [];
  let labelKontribusi = [], dataKontribusi = [];
  let labelServiceDept = [], dataServiceDept = [];
  let labelServiceCabang = [], dataServiceCabang = [];
  let labelResponse = [], dataResponse = [], actualResponse = [], targetResponse = [];
  
  $(document).ready(function(){
    setTimeout(function(){
      var ctx = document.getElementById("indexPieChart");
      var myPieChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: labelKontribusi,
          datasets: [{
            data: dataKontribusi,
            backgroundColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
            ],
          }],
        },
        options: {
          maintainAspectRatio: false,
          tooltips: {
            backgroundColor: "rgb(255,255,255)",
            bodyFontColor: "#858796",
            borderColor: '#dddfeb',
            borderWidth: 1,
            xPadding: 15,
            yPadding: 15,
            displayColors: true,
            caretPadding: 10,
            callbacks: {
              label: function(tooltipItem, data) {
                let label = data.labels[tooltipItem.index];
                let val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                let total = data.datasets[0].data.reduce((arr, curr) => arr + curr);
                let percent = (val / total * 100).toFixed(2);
                return label + ': ' + val + ' (' + percent + '%)';
              }
            }
          },
          legend: {
            display: false
          },
          cutoutPercentage: 50,
        },
      });
  
      var ctx = document.getElementById("indexBarChart");
      var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labelServiceDept,
          datasets: [{
            label: "Scoring Layanan",
            data: dataServiceDept,
            backgroundColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
          }],
        },
        options: {
          maintainAspectRatio: false,
          layout: {
            padding: {
              left: 10,
              right: 25,
              top: 25,
              bottom: 0
            }
          },
          scales: {
            xAxes: [{
              time: {
                unit: 'date'
              },
              gridLines: {
                display: false,
                drawBorder: false
              },
            }],
            yAxes: [{
              ticks: {
                  beginAtZero: true,
                  maxTicksLimit: 5,
                  padding: 10,
              },
              gridLines: {
                drawBorder: false,
                borderDash: [2],
                zeroLineBorderDash: [2]
              }
            }],
          },
          legend: {
            display: false
          },
          tooltips: {
            enabled: false
          },
          hover: {
            animationDuration: 1
          },
          animation: {
            onComplete: function () {
              var chartInstance = this.chart,
              ctx = chartInstance.ctx;
              ctx.textAlign = 'center';
              ctx.fillStyle = "rgba(0, 0, 0, 1)";
              ctx.textBaseline = 'bottom';
      
              // Loop through each data in the datasets
              this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                  var data = dataset.data[index];
                  ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
              });
            }
          }
        }
      });
      
      var ctx = document.getElementById("indexBarChart1");
      var myBarChart1 = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labelServiceCabang,
          datasets: [{
            label: "Scoring Layanan",
            data: dataServiceCabang,
            backgroundColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)'
            ],
          }],
        },
        options: {
          maintainAspectRatio: false,
          layout: {
            padding: {
              left: 10,
              right: 25,
              top: 25,
              bottom: 0
            }
          },
          scales: {
            xAxes: [{
              gridLines: {
                display: false,
              },
            }],
            yAxes: [{
              ticks: {
                  beginAtZero: true,
                  maxTicksLimit: 5,
                  padding: 10,
              },
              gridLines: {
                drawBorder: false,
                borderDash: [2],
                zeroLineBorderDash: [2]
              }
            }],
          },
          legend: {
            display: false
          },
          tooltips: {
            enabled: false
          },
          hover: {
            animationDuration: 1
          },
          animation: {
            onComplete: function () {
              var chartInstance = this.chart,
              ctx = chartInstance.ctx;
              ctx.textAlign = 'center';
              ctx.fillStyle = "rgba(0, 0, 0, 1)";
              ctx.textBaseline = 'bottom';
      
              // Loop through each data in the datasets
              this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                  var data = dataset.data[index];
                  ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
              });
            }
          }
        }
      });
      
      var ctx = document.getElementById("indexBarChart2");
      var myBarChart2 = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labelResponse,
          datasets: [
            {
              backgroundColor: "#4e73df",
              hoverBackgroundColor: "#2e59d9",
              borderColor: "#4e73df",
              data: dataResponse,
              actual: actualResponse,
              target: targetResponse,
            }
          ],
        },
        options: {
          maintainAspectRatio: false,
          layout: {
            padding: {
              left: 10,
              right: 25,
              top: 25,
              bottom: 0
            }
          },
          scales: {
            xAxes: [{
              gridLines: {
                display: false,
                drawBorder: false
              },
            }],
            yAxes: [{
              ticks: {
                beginAtZero: true,
                padding: 10,
              },
              gridLines: {
                drawBorder: true,
                borderDash: [2],
                zeroLineBorderDash: [2]
              }
            }],
          },
          legend: {
            display: false
          },
          tooltips: {
            titleMarginBottom: 10,
            titleFontColor: '#6e707e',
            titleFontSize: 14,
            backgroundColor: "rgb(255,255,255)",
            bodyFontColor: "#858796",
            borderColor: '#dddfeb',
            borderWidth: 1,
            xPadding: 15,
            yPadding: 15,
            displayColors: false,
            caretPadding: 10,
            callbacks: {
              label: function(tooltipItem, chart) {
                return ['Gap Target - Waktu : ' + tooltipItem.yLabel, 'Actual : ' + actualResponse[tooltipItem.index], 'Target : ' + targetResponse[tooltipItem.index]] ;
              }
            },
          }
        }
      });
  
      var ctx = document.getElementById("indexBarChart3");
      var myBarChart3 = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labelTopProblem,
          datasets: [{
            data: dataTopProblem,
            backgroundColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)'
            ],
          }],
        },
        options: {
          maintainAspectRatio: false,
          layout: {
            padding: {
              left: 10,
              right: 25,
              top: 25,
              bottom: 0
            }
          },
          scales: {
            xAxes: [{
              gridLines: {
                display: false,
              },
            }],
            yAxes: [{
              ticks: {
                  beginAtZero: true,
                  maxTicksLimit: 5,
                  padding: 10,
              },
              gridLines: {
                drawBorder: false,
                borderDash: [2],
                zeroLineBorderDash: [2]
              }
            }],
          },
          legend: false,
          tooltips: {
            enabled: false
          },
          hover: {
            animationDuration: 1
          },
          animation: {
            onComplete: function () {
              var chartInstance = this.chart,
              ctx = chartInstance.ctx;
              ctx.textAlign = 'center';
              ctx.fillStyle = "rgba(0, 0, 0, 1)";
              ctx.textBaseline = 'bottom';
      
              // Loop through each data in the datasets
              this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                  var data = dataset.data[index];
                  ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
              });
            }
          }
        },
      });
        
    }, 200);
    
  });
  
  function getKontribusi(dept, cabang){
    if(dept == 'Service Quality' && cabang == 'Head Office'){
      dept = '';
      cabang = 'NASIONAL';
    }else if(dept != 'Service Quality' && cabang == 'Head Office'){
      cabang = 'DC';
    }else if(dept == 'Service Quality' && cabang != 'Head Office'){
      dept = '';
    }
    $.ajax({
      url: 'http://localhost/Dashboard-SAT/php/chart/index-chart.php',
      method: 'post',
      data: {data: 'kontribusi', dept: dept, cabang: cabang},
      success: function(datas){
        for( let i in datas){
          if(cabang == 'DC'){
            labelKontribusi.push(datas[i].cabang);
            dataKontribusi.push(parseInt(datas[i].qty_problem_total_ytd_mar));
          }else{
            labelKontribusi.push(datas[i].department);
            dataKontribusi.push(parseInt(datas[i].qty_problem_total_ytd_mar));
          }
        }
      },
      error: function(data){
        console.error(data);
      }
    });
  };
  
  function getServiceDept(cabang){
    if(cabang == 'Head Office'){
      cabang = 'NASIONAL';
    }
    $.ajax({
      url: 'http://localhost/Dashboard-SAT/php/chart/index-chart.php',
      method: 'post',
      data: {data: 'serviceDept', cabang: cabang},
      success: function(datas){
        for( let i in datas){
          labelServiceDept.push(datas[i].department);
          dataServiceDept.push(datas[i].skoring_layanan_ytd_mar);
        }
      },
      error: function(data){
        console.error(data);
      }
    });
  };
  
  function getServiceCabang(dept){
    if(dept == 'Service Quality'){
      dept = 'All Dept'
    }
    $.ajax({
      url: 'http://localhost/Dashboard-SAT/php/chart/index-chart.php',
      method: 'post',
      data: {data: 'serviceCabang', dept: dept},
      success: function(datas){
        for( let i in datas){
          labelServiceCabang.push(datas[i].cabang);
          dataServiceCabang.push(datas[i].skoring_layanan_ytd_mar);
        }
      },
      error: function(data){
        console.error(data);
      }
    });
  };
  
  function getTopProblem(dept, cabang){
    if(dept == 'Service Quality' && cabang == 'Head Office'){
      dept = '';
      cabang = 'NASIONAL';
    }else if(dept != 'Service Quality' && cabang == 'Head Office'){
      cabang = 'NASIONAL';
    }else if(dept == 'Service Quality' && cabang != 'Head Office'){
      dept = '';
    }
    $.ajax({
      url: 'http://localhost/Dashboard-SAT/php/chart/index-chart.php',
      method: 'post',
      data: {data: 'topProblem', dept: dept, cabang: cabang},
      success: function(datas){
        for( let i = 0; i < 3; i++){
          labelTopProblem.push([datas[i].nama_unit, datas[i].department]);
          dataTopProblem.push(datas[i].qty_problem_total_ytd_mar);
        }
      },
      error: function(data){
        console.error(data);
      }
    });
  }
  
  function getResponse(dept, cabang){
    if(dept == 'Service Quality' && cabang == 'Head Office'){
      dept = '';
      cabang = 'NASIONAL';
    }else if(dept != 'Service Quality' && cabang == 'Head Office'){
      cabang = '';
    }else if(dept == 'Service Quality' && cabang != 'Head Office'){
      dept = '';
    }
    $.ajax({
      url: 'http://localhost/Dashboard-SAT/php/chart/index-chart.php',
      method: 'post',
      data: {data: 'response', dept: dept, cabang: cabang},
      success: function(datas){
        for( let i in datas){
          if(dept == ''){
            labelResponse.push(datas[i].department);
            dataResponse.push(parseFloat(datas[i].gap).toFixed(2));
            actualResponse.push(parseFloat(datas[i].waktu_penyelesaian_ytd_mar));
            targetResponse.push(parseInt(datas[i].target_hari));
          }else{
            labelResponse.push(datas[i].cabang);
            dataResponse.push(parseFloat(datas[i].gap).toFixed(2));
            actualResponse.push(parseFloat(datas[i].waktu_penyelesaian_ytd_mar));
            targetResponse.push(parseInt(datas[i].target_hari));
          }
        }
      },
      error: function(data){
        console.error(data);
      }
    });
  };