#JP64 Form Penilaian Rating

byJavabitpro

Form Penilaian Menggunakan Rentang Nilai

1. Copy Spreadsheets (Klik Disini)

Pada sheet output terdapat beberapa kolom yang akan otomatis terisi saat selesai mengisi form penilaian.

Pada sheet chart terdapat beberapa kolom yang otomatis terisi dan menghitung persantase hasil penilaian.

2. Buatlah lembar kerja Apps Script dengan cara klik menu Ekstensi/Extensions lalu pilih Apps Script.

3. Pada lembar kerja Apps Script terdapat 5 file default yaitu :

Code.gs
index.html
css.html
chart.html
dataTable.html

4. Copy dan pastekan script di bawah ini ke Code.gs

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

/**
 *  Website : www.javabitpro.com 
 *  Youtube : Javabitro
*/

function doGet(e) {
  return HtmlService.createTemplateFromFile("index").evaluate()
  .setTitle("Form Penilaian Restoran")
  .setFaviconUrl('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7hb7GJ4v4IwapVwZJJyvGsG5WF4RxsmEb0va1X0t-6urm1PGPDA2IEsETeLCuiyfJkUWhOOIUg9FN_Dr3gJJQmQUe2-AnYI3-R05TC6PbMRSnaljamNC9lQMOeE2q4Dr29jkfEaYwpadAjraVGgIgC_wGGp596Uh6tLX_ClrfbqK3wdhz4jE7i16/s1600/PNG%20JP.png')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


/** Include Files */
function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).getContent();}

let scriptURL = ScriptApp.getService().getUrl();

let ss = SpreadsheetApp.getActiveSpreadsheet();


/** Save Data */
function saveData(objData){
  ss.getSheetByName('output').appendRow([
    new Date(),
    objData.name,
    objData.gender,
    objData.product,
    objData.customRange1,
    objData.customRange2,
    objData.customRange3,
    objData.customRange4,
  ]);
  return true;
}


/** Get data for Chart */
function getDataChart(){
  var ws = SpreadsheetApp.getActive().getSheetByName('chart');
  var data = ws.getRange("A2:F").getValues();
  var result = data.map(r=>{return [r[2],r[3],r[4],r[5]]})
  Logger.log(result[0])
return result[0]
}


/** Get data for Table */
function getDataTable(){
  return data = SpreadsheetApp.getActive().getSheetByName('output').getDataRange().getDisplayValues()
}

5. Copy dan pastekan script di bawah ini ke index.html

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<!DOCTYPE html>
<html>

<head>
  <base target="_self">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- bootstrap@ -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

  <!-- datatables -->
  <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">

  <!-- animate.css@4.1.1 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

  <!-- font-awesome@6.2.0 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

  <!-- jquery@3.6.0 -->
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

  <?!=include('css')?>



</head>

<body>

  <!-- ------------------------------ HEADER ------------------------------- -->
  <center>
    <br/>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ8B_nPqW3IXcEHCrI7xrh-sqJTMHP8IUzgXSIZhH6-y04PdmOsunTJUWXZGsiHVUDt1fBvhMdDltzihl6hq0rZT8SO1EgCu7LgzQXfxlP_7tbeuekfm0gZqvA8MLV0QpyFEc2e1VsIRt7SDhZaDFFTwYX_vdSWEjS15Z_kyKeC-mKyuWxfkQEPOP0UD8/s320/Untitled%20design.gif" style="width:200px; height:auto; padding-bottom: 10px; ">
    <h3>Form Penilaian Restoran <br/>"Anda Kenyang Kami Senang"</h3>
    <h5 class="text-center text-primary">Berikan kami rating sesuai hati anda</h5>
  </center>
  <br/>


  <div class="container" id="form-div" style="max-width: 580px;margin: 20px auto; display: block;">

    <!-- TABS -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
      <i class="fa-sharp fa-solid fa-pen-to-square"></i> Penilaian</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
      <i class="fa-solid fa-chart-line"></i> Statistik</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
      <i class="fa-solid fa-database"></i> Informasi</button>
      </li>
    </ul>

    <!-- CONTENT -->
    <div class="tab-content col-12" id="myTabContent">
      <div class="tab-pane fade show active list" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab"
        tabindex="0">
        <!-- Table content -->
        <div class="card">
          <div class="card-body">
            <div class="form-group mb-4">
              <div style="color:blue" class="mb-4">
                <label><span style="font-size:18px; font-weight:bold">Lengkapi Data</span></label>
              </div>
              <table class="mb-2">
                <tr>
                  <td width="245">Nama</td>
                  <td width="10">:</td>
                  <td>

               <input type="text" id="input1" class="form-control" placeholder="Nama">
                  </td>
                </tr>
                <tr>
                  <td>Makanan Yang Dipesan</td>
                  <td>:</td>
                  <td>
              <select id="input2" class="form-select mt-2">
                <option value="">Pilih...</option>
                <option>Kaviar Almas</option>
                <option>Safron</option>
                <option>Daging Wagyu Kobe</option>
                <option>Jamur Truffle</option>
                <option>Keju Moose</option>
              </select>
                  </td>
                </tr>
                <tr>
                  <td>Jenis Layanan</td>
                  <td>:</td>
                  <td>
                <select id="input3" class="form-select mt-2">
                  <option value="">Pilih...</option>
                  <option>Makan di Tempat</option>
                  <option>Bawa Pulang</option>
                </select>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>


        <br>
        <div class="container" id="form-div" style="padding-left: 0px; padding-right: 0px;">
          <div class="card">
            <div class="card-body">
              <div style="color:blue" class="mb-4">
                <label><span style="font-size:18px; font-weight:bold">Rating Penilaian</span></label>
              </div>
              <label>1.  Rasa Makanan</label>
              <input type="range" class="form-range col-sm-12 col-12 mt-2" id="customRange1" name="points" min="0" max="5" value="0">
              <div class="form-group row mb-4">
                <span class="col-sm-5 col-5" style="font-style: italic;">Rating 1</span><span class="col-sm-2 col-2"></span><span style="text-align:right; font-style: italic;" class="col-sm-5 col-5">Rating 5</span>
              </div>


              <label>2.  Daya Tanggap Pelayan</label>
              <input type="range" class="form-range col-sm-12 col-12 mt-2" id="customRange2" name="points" min="0" max="5" value="0">
              <div class="form-group row mb-4">
                <span class="col-sm-5 col-5" style="font-style: italic;">Rating 1</span><span class="col-sm-2 col-2"></span><span style="text-align:right; font-style: italic;" class="col-sm-5 col-5">Rating 5</span>
              </div>

              <label>3.  Fasilitas Restoran</label>
              <input type="range" class="form-range col-sm-12 col-12 mt-2" id="customRange3" name="points" min="0" max="5" value="0">
              <div class="form-group row mb-4">
                <span class="col-sm-5 col-5" style="font-style: italic;">Rating 1</span>
                <span class="col-sm-2 col-2"></span>
                <span style="text-align:right; font-style: italic;" class="col-sm-5 col-5">Rating 5</span>
              </div>

              <label>4.  Kebersihan Restoran</label>
              <input type="range" class="form-range col-sm-12 col-12 mt-2" id="customRange4" name="points" min="0" max="5" value="0">
              <div class="form-group row mb-4">
                <span class="col-sm-5 col-5" style="font-style: italic;">Rating 1</span>
                <span class="col-sm-2 col-2"></span>
                <span style="text-align:right; font-style: italic;" class="col-sm-5 col-5">Rating 5</span>
              </div>


              <center>
                <div class="block form-group submit" style="display:block">
                  <input type="button" id="submit" value="Kirim" class="btn btn-secondary" onclick="submit()">
                </div>
              </center>
            </div>
          </div>
        </div>
      </div>


      <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
        <!-- Chart -->
        <?!= include('chart'); ?>
      </div>
      <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
        <?!= include('dataTable'); ?>
      </div>
    </div>



  </div>
  </div>





  <div id="loadingData" class="d-flex justify-content-center align-items-center invisible">
    <div class="spinner-border spinner-border-sm text-primary" style="width: 3rem; height: 3rem;" role="status">
    </div>
  </div>



  <!-- ------------------------------ FOOTER ------------------------------- -->
  <br/>
  <div class="text-center p-4 col-12 mt-4" style="background-color: rgba(0, 0, 0, 0.05);">
    © 2023 Copyright | javabitpro
  </div>



  <script>
    let name = document.getElementById('input1');
   let gender = document.getElementById('input2');
   let product = document.getElementById('input3');   

  // get the additional range input elements
  function getAdditionalRangeInputs() {
    const customRange1 = document.getElementById('customRange1');
    const customRange2 = document.getElementById('customRange2');
    const customRange3 = document.getElementById('customRange3');
    const customRange4 = document.getElementById('customRange4');

    return [customRange1, customRange2, customRange3, customRange4];
  }
 function submit(){
    // const mainRange = document.getElementById('customRange'); // Get the main range input
    const additionalRange1 = document.getElementById('customRange1'); // Get the additional range inputs
    const additionalRange2 = document.getElementById('customRange2'); // Get the additional range inputs
    const additionalRange3 = document.getElementById('customRange3'); // Get the additional range inputs
    const additionalRange4 = document.getElementById('customRange4'); // Get the additional range inputs

    let objData = {
      name: name.value,
      gender: gender.value,
      product: product.value,
      customRange1: additionalRange1.value,
      customRange2: additionalRange2.value,
      customRange3: additionalRange3.value,
      customRange4: additionalRange4.value,
    };
  
    if(gender.value == "" || product.value == ""){

          sweetAlert({
                    icon: 'warning',
                    title: "Peringatan!",
                    text: 'Isi Semua Pertanyaan',
                    timer: 2500,
                    button: false,
                    icon:"error"
          }); 

       }else{
          document.getElementById('loadingData').classList.toggle('invisible');  
          google.script.run.withSuccessHandler( () => {

              sweetAlert({
                        icon: 'success',
                        title: "Data Berhasil Disimpan!",
                        text: "Terima Kasih Sudah Memberikan Penilaian",
                        timer: 2500,
                        button: false,
                        icon:"success"
              }); 


              
///////// Update Chart ///////////

  google.script.run.withSuccessHandler((r)=>{
  let yValues = r.map(value => value.toFixed(0)); 
  console.log(yValues)
      myChartA.data.datasets[0].data = yValues  
      myChartA.update()


document.getElementById("approved-projects").innerText = yValues[0] +"  %";
document.getElementById("waiting-projects").innerText = yValues[1] +"  %";
document.getElementById("reject-projects").innerText = yValues[2] +"  %";
document.getElementById("reject-projectsZZ").innerText = yValues[3] +"  %";
  }).getDataChart()

  ///////// Update Chart ///////////





/////////  Update table ///////////
      google.script.run.withSuccessHandler(showData).getDataTable();
              name.value = "";
              gender.selectedIndex = 0;
              product.selectedIndex = 0;
              customRange1.value = "0"; 
              customRange2.value = "0"; 
              customRange3.value = "0"; 
              customRange4.value = "0"; 
              document.getElementById('loadingData').classList.toggle('invisible');

          })
          .saveData(objData);                 
       }
 }
  ///////// Update table///////////

  </script>


  <!-- CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

</body>

</html>

6. Copy dan pastekan script di bawah ini ke css.html

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<style>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt');
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Roboto', sans-serif;
    }
    
      body{
            /* display: grid; */
background: rgb(252,233,233);
background: linear-gradient(0deg, rgba(252,233,233,1) 0%, rgba(224,244,241,1) 26%, rgba(255,255,255,1) 71%);
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

      
      #loadingData{
        position:fixed;
        top:0;
        left:0;
        z-index:10000;
        width:100vw;
        height:100vh;
        background-color: rgba(255,255,255,0.9);
      } 

      label {
        /* font-weight: bold; */
      }
      input {
        /* width: 200px; */
      }

     .frame{
      border: 2px solid transparent;
      box-shadow: 10px 10px 15px rgb(193,182,182), -6px -6px 15px white;
      padding: 20px;
      margin-left:10px;
      margin-right:10px;
      margin-top: 5px;
      background: white;
      border-radius: 20px;
      }

    .questionBox {
            /* border: 1px solid rgba(0,0,0,0.2); */
            border: solid 2px #525150 !important;
            padding: 1rem;
            margin-left:10px;
            margin-right:10px;
            border-radius: 13px;        
            margin: auto;
            width: 100%;
    }  

    fieldset.scheduler-border {
        /* border: solid 1px #DDD !important; */
        border: solid 2px grey !important;
        padding: 0 10px 10px 10px;
        border-bottom: none;
    }

    legend.scheduler-border {
        width: auto !important;
        border: none;
        font-size: 14px;
    };

input[type="text"],
input[type="tel"],
input[type="password"],
input[type="number"] {
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  margin-bottom: 4%;
  border: 1px solid #ccc;
  padding: 2%;
  font-size: 16px;
  color: rgb(9, 61, 125);
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
  box-shadow: 0 0 5px #5868bf;
  padding: 2%;
  border: 1px solid #5868bf;
}


/* Add a custom btn-indigo class */
.btn-indigo {
  background-color: #b26bc2;
  color: #ffffff;
  border-color: #b26bc2;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

/* Apply custom styles when hovering the indigo button */
.btn-indigo:hover {
  background-color: #FFCE00;
  border-color: #FFCE00;
  color: #000;
}

.card {
    background-color: #ffffff;
    padding: 1.8em 1.2em;
    border-radius: 2em;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 0.2em solid #000000;
}


.list {
  background-color: #ffffff;
  padding: 1.8em 1.2em;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 0.6em;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }

.blueborder {
    background-color: white;
    border: 2px solid #357EC7;
    border-radius: 25px;
    margin-bottom: 25px;
}

.list {
  background-color: #ffffff;
  padding: 1.8em 1.2em;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 0.6em;
}

.qBox {
  border: solid 2px #525150 !important;
  padding: 1rem;
  margin: 0 10px;
  border-radius: 13px;        
  max-width: 100%;
  margin: auto;
}

@media only screen and (min-width: 768px) {
  .qBox {
    max-width: 720px;
  }
}

@media only screen and (min-width: 992px) {
  .qBox {
    max-width: 960px;
  }
}

@media only screen and (min-width: 1200px) {
  .qBox {
    max-width: 1140px;
  }
}

    .form {
      max-width: 400px;
      margin: 20px auto;
      text-align: center;
      padding: 16px;
      background: #ffffff;
    }

    .form h1 {
      background: #357EC7;
      padding: 20px 0;
      font-weight: 300;
      text-align: center;
      color: #fff;
      margin: -16px -16px 16px -16px;
      font-size: 25px;
    }



footer {
  margin-top: 30px;
  background-color: #000;
  width: 100%;
  padding: 2px;
  position: fixed;
  bottom: 0;
}
footer p,
footer a {
  text-decoration: none;
  margin: 0;
}
footer .fa {
  color: #fff740;
}


  </style>

  <style>


 .fab-container2 {
	position: fixed;
	bottom: 80px;
	right: 1px;
	z-index: 999;
	cursor: pointer;
}

.fab-label2 {
    padding: 2px 5px;
    align-self: center;
    user-select: none;
    white-space: nowrap;
    border-radius: 3px;
    font-size: 16px;
    background: #666666;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    /* margin-right: 10px; */
}

 .fab-container {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 999;
	cursor: pointer;
}

.fab-icon-holder {
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background: #6dd4fc;

	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.fab-icon-holder:hover{
	opacity: 0.8;
}

.fab-icon-holder i {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 100%;
	font-size: 25px;
	color: #000000;
}

.fab {
	width: 56px;
	height: 56px;
	background: #6dd4fc;
}

.fab-options {
	list-style-type: none;
	margin: 0;

	position: absolute;
	bottom: 70px;
	right: 0;

	opacity: 0;

	transition: all 0.3s ease;
	transform: scale(0);
	transform-origin: 85% bottom;
}

.fab:hover + .fab-options, .fab-options:hover {
	opacity: 1;
	transform: scale(1);
}

.fab-options li {
	display: flex;
	justify-content: flex-end;
	padding: 5px;
}

.fab-label {
	padding: 2px 5px;
	align-self: center;
	user-select: none;
	white-space: nowrap;
	border-radius: 3px;
	font-size: 16px;
	background: #666666;
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
	margin-right: 10px;
} 

a {
  color: inherit;
  text-decoration: none;
}
</style>

  <!-- ------------------------------ Visit ------------------------------- -->
	<div class="fab-container2">
    <p class="fab-label2">Visit</p>
  </div>
	<div class="fab-container">
		<div class="fab fab-icon-holder">
			<i><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7hb7GJ4v4IwapVwZJJyvGsG5WF4RxsmEb0va1X0t-6urm1PGPDA2IEsETeLCuiyfJkUWhOOIUg9FN_Dr3gJJQmQUe2-AnYI3-R05TC6PbMRSnaljamNC9lQMOeE2q4Dr29jkfEaYwpadAjraVGgIgC_wGGp596Uh6tLX_ClrfbqK3wdhz4jE7i16/s1600/PNG%20JP.png" style="width: 75px;"></i>
		</div>

		<ul class="fab-options">
			<li>
				<span class="fab-label">Youtube</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://www.youtube.com/@Javabitpro/videos"><i class="fa-brands fa-youtube"></i></i></a>
				</div>
			</li>
			<li style="margin-bottom: 60px;">
				<span class="fab-label">Website</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://www.javabitpro.com/"><i class="fa-solid fa-globe"></i></a>
				</div>
			</li>
			
				
		</ul>
	</div>

7. Copy dan pastekan script di bawah ini ke chart.html

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt');
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Roboto', sans-serif;
      
    }
    </style>
        

<div class="container-fluid p-4 rounded list">
  <!-- CARDS -->
<div class="container">
    <div class="row">
        <div class="col-xl-6 col-md-6 mb-2 card">
        <div class="card-body">
                <h5 class="font-size-20 mt-0 pt-1" id="approved-projects">24</h5>
                <p class="text-muted mb-0">Rasa Makanan</p>
            </div>
        </div>
        <div class="col-xl-6 col-md-6 mb-2 card">
        <div class="card-body">
                <h5 class="font-size-20 mt-0 pt-1" id="waiting-projects">18</h5>
                <p class="text-muted mb-0">Daya Tanggap Pelayan</p>
            </div>
        </div>
        <div class="col-xl-6 col-md-6 mb-2 card">
        <div class="card-body">
                <h5 class="font-size-20 mt-0 pt-1" id="reject-projects">06</h5>
                <p class="text-muted mb-0">Fasilitas Restoran</p>
            </div>
        </div>
        <div class="col-xl-6 col-md-6 mb-2 card">
        <div class="card-body">
                <h5 class="font-size-20 mt-0 pt-1" id="reject-projectsZZ">06</h5>
                <p class="text-muted mb-0">Kebersihan Restoran</p>
            </div>
        </div>
    </div>
</div>



        <!-- CHART -->

  <div class="col-md-12 mx-auto">
    <div class="row">
    <div class="col-lg-12">
      <br/>
      <canvas id="myChart" style="position: relative; height: mx-auto; width: 100%;"></canvas>
      <br/>
    </div>
</div>
</div>
</div>





<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>


<script>
  /** Grafik Utama */
  document.addEventListener('DOMContentLoaded', (event) => {
    google.script.run.withSuccessHandler((dataFromgetDataChart)=>{
      showChart(dataFromgetDataChart) // www.javabitpro //
    }).getDataChart();
  });


  /** Grafik*/
  function showChart(dataFromgetDataChart){
        var yValues = dataFromgetDataChart.map(value => value.toFixed(0)); // Round values and convert to strings


document.getElementById("approved-projects").innerText = yValues[0] +"  %";
document.getElementById("waiting-projects").innerText = yValues[1] +"  %";
document.getElementById("reject-projects").innerText = yValues[2] +"  %";
document.getElementById("reject-projectsZZ").innerText = yValues[3] +"  %";


    Chart.defaults.font.size = 14;
    Chart.defaults.font.family = "Prompt";

    myChartA = new Chart("myChart", {
      type: "bar",
      data: {
        labels: ["Rasa Makanan","Daya Tanggap Pelayan","Fasilitas Restoran","Kebersihan Restoran"],
        datasets: [{
        label: 'Kategori',
        backgroundColor: [
      '#ffc107', //warning
      '#198754', //success
      '#dc3545', //danger
      '#0d6efd', //primary
          ],
          data: yValues
        }]
      },
      plugins: [ChartDataLabels],
        options: {
          plugins: {
            datalabels: {
              color: 'white',
              labels: {
                title: {
                  font: {
                    weight: 'bold',
                    family: 'Roboto'
                  }
                },
                value: {
                  color: 'white'
                }
              }
            }
          }
        }
    });
  }
</script>

8. Copy dan pastekan script di bawah ini ke dataTable.html

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

  <div class="container-fluid table-responsive list">
    <table id="dataTable" class="display responsive" style="width:100%"></table>
  </div>

  <!-- Add DataTables and jQuery (required for DataTables) JavaScript links here -->
  <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript">
    // Function to call Google Apps Script to get data and initialize DataTable
    function getDataAndInitDataTable() {
      google.script.run.withSuccessHandler(showData).getDataTable();
    }

    // Function to initialize DataTable with received data
    function showData(dataArray) {
      // Create the DataTable
      var dataTable = new DataTable('#dataTable', {
        data: dataArray.slice(1), // Slice to skip the header row
        columns: [
          { title: 'Tanggal' },
          { title: 'Nama' },
          { title: 'Pesanan' },
          { title: 'Layanan' },
        ],
        language: {
          url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json',
        },
        searching: true, // Disable search
        ordering: true,
        destroy: true,
        responsive: true,
        paging: false,
      });
    }

    // Call the function to fetch data and initialize DataTable
    getDataAndInitDataTable();
  </script>

9. Klik ikon Save

10. Klik menu Deploy/Terapkan lalu pilih New Deployment/Deployment baru.

11. Pastikan jenisnya adalah Aplikasi web dan hak aksesnya adalah Siapa saja/Anyone lalu klik Terapkan/Deploy.

12. Klik atau salin Url yang sudah di Deploy.

SELESAI !!!

Tags: APP SCRIPT CSS Google Drive GOOGLE SCRIPT HTML JAVASCRIPT PROJECT Spreadsheet