Membuat Grafik Diagram Dengan Web Apps Script
1. Copy Spreadsheet (Klik disini)
2. Pada Spreadsheet yang telah di copy di atas terdapat 1 sheet Barang yang berisi tentang data Barang, Stok, Rekap Penjualan, Omset, dan Presentase.
3. Untuk menampilkan data-data tersebut berupa grafik/chart, buatlah lembar kerja Apps Script dengan cara klik Ektensi/Extensions lalu pilih Apps Script.
4. Pada lembar kerja Apps Script terdapat 5 file Default yaitu :
- Code.gs
- Page.html
- CSSTime.html
- JSTime.html
- visit.html
5. Copy dan pastekan script di bawah ini ke Code.gs
Masukkan Password Untuk Melihat Script (Password ada di dalam video)
//Source Code by www.javabitpro.com
function doGet() {
return HtmlService.createTemplateFromFile('Page').evaluate()
.setTitle('Javabitpro')
.addMetaTag('viewport','width=device-width , initial-scale=1')
.setFaviconUrl('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHj7zvogZ96zuoYdLKx87C2iYHmwi8hEr7qC_MgAN6qgfKYk721CMQv6w317b4oWlj68S9qdOKHt6ZhG_trYr_nT5rCeTuCyr6MaZpFc7y0vmrnY9S1eKCrgDBJMMn37A30MB95-LkAxLBd61dtfQd7C_dUH-2NdPXOfdSsP4mvBlDTa1U-OaJIdi1Wk/s1600/button-logojp.png'); // Ganti URL favicon sesuai kebutuhan
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
// Data
// Grafik Sisa Stok
function getData1() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var data = sheet.getRange('B3:C12').getValues();
// Menambahkan kolom warna untuk setiap bar di data
var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099']; // Sesuaikan dengan jumlah batang bar
data = data.map(function(row, index) {
return [row[0], row[1] , colors[index % colors.length], row[1]];
});
return [['Kategori', 'Nilai', { role: 'style', }, { role: 'annotation' }]].concat(data);
}
//Grafik Persentase Penjualan
function getData2() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var data = sheet.getRange('E3:F12').getValues();
// Menambahkan kolom warna untuk setiap bar di data
var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099']; // Sesuaikan dengan jumlah batang bar
data = data.map(function(row, index) {
return [row[0], row[1] * 100, colors[index % colors.length], (row[1] * 100).toFixed(2) + '%'];
});
return [['Kategori', 'Nilai1', { role: 'style', }, { role: 'annotation' }]].concat(data);
}
//Data Penjualan Per-Bulan
function getData3() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var data = sheet.getRange('T3:U14').getValues();
// Menambahkan kolom warna untuk setiap bar di data
var colors = ['#3366cc']; // Sesuaikan dengan jumlah batang bar
data = data.map(function(row, index) {
return [row[0], row[1] , colors[index % colors.length], row[1]];
});
return [['Kategori', 'Nilai', { role: 'style', }, { role: 'annotation' }]].concat(data);
}
//Data Penjualan Per-Bulan Per-Item Barang
function getData4() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var data = sheet.getRange('H3:R14').getValues();
// Menambahkan kolom warna untuk setiap bar di data
var colors = ['#2986cc']; // Sesuaikan dengan jumlah batang bar
data = data.map(function(row, index) {
return [row[0], row[1] ,row[2] ,row[3] ,row[4] ,row[5] ,row[6] ,row[7] ,row[8] ,row[9] ,row[10], colors[index % colors.length], row[11]];
});
return [['Kategori', 'Gelas','Piring','Mangkok','Sendok','Panci','Wajan','Termos','Blender','Pisau Dapur','Telenan', { role: 'style', }, { role: 'annotation' }]].concat(data);
}
//Sisa Stok
function getCard3Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataQ = sheet.getRange('C13').getValue();
//var dataQ = sheet.getRange('C13').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
//Jumlah Penjualan
function getCard4Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataQ = sheet.getRange('U15').getValue();
//var dataQ = sheet.getRange('Q2').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
//Jumlah Suplier
function getCard5Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataQ = sheet.getRange('W3').getValue();
//var dataQ = sheet.getRange('Q3').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
//Jumlah Kategori Produk
function getCard6Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataQ = sheet.getRange('Y3').getValue();
//var dataQ = sheet.getRange('Q4').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
//Jumlah Omset
function getCard7Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataO = sheet.getRange('AA3').getValue(); // Mengambil nilai persentase dan dikalikan 100
return [dataO];
}
//Persentase Pendapatan
function getCard8Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
//var dataQ = sheet.getRange('Y3').getValue();
var dataQ = sheet.getRange('AC3').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
//Source Code by www.javabitpro.com
function doGet() {
return HtmlService.createTemplateFromFile('Page').evaluate()
.setTitle('Javabitpro')
.addMetaTag('viewport','width=device-width , initial-scale=1')
.setFaviconUrl('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHj7zvogZ96zuoYdLKx87C2iYHmwi8hEr7qC_MgAN6qgfKYk721CMQv6w317b4oWlj68S9qdOKHt6ZhG_trYr_nT5rCeTuCyr6MaZpFc7y0vmrnY9S1eKCrgDBJMMn37A30MB95-LkAxLBd61dtfQd7C_dUH-2NdPXOfdSsP4mvBlDTa1U-OaJIdi1Wk/s1600/button-logojp.png'); // Ganti URL favicon sesuai kebutuhan
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
// Data
// Grafik Sisa Stok
function getData1() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var data = sheet.getRange('B3:C12').getValues();
// Menambahkan kolom warna untuk setiap bar di data
var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099']; // Sesuaikan dengan jumlah batang bar
data = data.map(function(row, index) {
return [row[0], row[1] , colors[index % colors.length], row[1]];
});
return [['Kategori', 'Nilai', { role: 'style', }, { role: 'annotation' }]].concat(data);
}
//Grafik Persentase Penjualan
function getData2() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var data = sheet.getRange('E3:F12').getValues();
// Menambahkan kolom warna untuk setiap bar di data
var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099']; // Sesuaikan dengan jumlah batang bar
data = data.map(function(row, index) {
return [row[0], row[1] * 100, colors[index % colors.length], (row[1] * 100).toFixed(2) + '%'];
});
return [['Kategori', 'Nilai1', { role: 'style', }, { role: 'annotation' }]].concat(data);
}
//Data Penjualan Per-Bulan
function getData3() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var data = sheet.getRange('T3:U14').getValues();
// Menambahkan kolom warna untuk setiap bar di data
var colors = ['#3366cc']; // Sesuaikan dengan jumlah batang bar
data = data.map(function(row, index) {
return [row[0], row[1] , colors[index % colors.length], row[1]];
});
return [['Kategori', 'Nilai', { role: 'style', }, { role: 'annotation' }]].concat(data);
}
//Data Penjualan Per-Bulan Per-Item Barang
function getData4() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var data = sheet.getRange('H3:R14').getValues();
// Menambahkan kolom warna untuk setiap bar di data
var colors = ['#2986cc']; // Sesuaikan dengan jumlah batang bar
data = data.map(function(row, index) {
return [row[0], row[1] ,row[2] ,row[3] ,row[4] ,row[5] ,row[6] ,row[7] ,row[8] ,row[9] ,row[10], colors[index % colors.length], row[11]];
});
return [['Kategori', 'Gelas','Piring','Mangkok','Sendok','Panci','Wajan','Termos','Blender','Pisau Dapur','Telenan', { role: 'style', }, { role: 'annotation' }]].concat(data);
}
//Sisa Stok
function getCard3Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataQ = sheet.getRange('C13').getValue();
//var dataQ = sheet.getRange('C13').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
//Jumlah Penjualan
function getCard4Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataQ = sheet.getRange('U15').getValue();
//var dataQ = sheet.getRange('Q2').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
//Jumlah Suplier
function getCard5Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataQ = sheet.getRange('W3').getValue();
//var dataQ = sheet.getRange('Q3').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
//Jumlah Kategori Produk
function getCard6Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataQ = sheet.getRange('Y3').getValue();
//var dataQ = sheet.getRange('Q4').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
//Jumlah Omset
function getCard7Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
var dataO = sheet.getRange('AA3').getValue(); // Mengambil nilai persentase dan dikalikan 100
return [dataO];
}
//Persentase Pendapatan
function getCard8Data() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Barang');
//var dataQ = sheet.getRange('Y3').getValue();
var dataQ = sheet.getRange('AC3').getValue() * 100; // Mengambil nilai persentase dan dikalikan 100
return [dataQ];
}
6. Copy dan pastekan script di bawah ini ke Page.html
Masukkan Password Untuk Melihat Script (Password sama dengan di atas)
<!DOCTYPE html>
<html lang="en">
<!-- Sorce Code www.javabitpro.com -->
<head>
<base target="_top">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<!-- font-awesome@6.2.0 icon Visit -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<?!= include('visit')?>
<?!= include('CSSTime'); ?>
<?!= include('JSTime'); ?>
<style>
.custom-card {
margin-left: 0; /* Set margin kiri menjadi 0 */
}
.card-img-top {
width: 100px;
height: 100px;
object-fit: cover;
}
.center-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#dashboard {
display: none;
}
</style>
<script>
google.charts.load('current', { 'packages': ['corechart','annotationchart'] });
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
// Mengambil data dari server
google.script.run.withSuccessHandler(drawChart1).getData1();
google.script.run.withSuccessHandler(drawChart2).getData2();
google.script.run.withSuccessHandler(drawChart3).getData3();
google.script.run.withSuccessHandler(drawChart4).getData4();
}
// Grafik Sisa Stok
function drawChart1(data) {
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Grafik Sisa Stok',
chartArea: { width: '100%' },
width: 500,
height: 300,
hAxis: {slantedText: true},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart1'));
chart.draw(chartData, options);
}
// Grafik Persentase Penjualan
function drawChart2(data) {
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Grafik Persentase Penjualan',
chartArea: { width: '100%' },
is3D:true,
width: 500,
height: 300,
};
var chart = new google.visualization.PieChart(document.getElementById('chart2'));
chart.draw(chartData, options);
}
//Grafik Penjualan Per-Bulan Grafik Vertcal
function drawChart3(data) {
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Grafik Penjualan Per-Bulan',
chartArea: { width: '50%' , height: '100%'},
hAxis: { title: 'Data Penjualan' },
vAxis: { title: 'Bulan' },
height: 800,
};
var chart = new google.visualization.BarChart(document.getElementById('chart3'));
chart.draw(chartData, options);
}
//Grafik Penjualan Per-Item Per-Bulan Grafik Vertcal
function drawChart4(data) {
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Grafik Penjualan Per-Item Per-Bulan',
chartArea: { width: '50%' , height: '100%'},
hAxis: { title: 'Data Penjualan' },
vAxis: { title: 'Bulan' },
height: 800,
};
var chart = new google.visualization.BarChart(document.getElementById('chart4'));
chart.draw(chartData, options);
}
//Sisa Stok
function drawCard3(data) {
var card3Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card3Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-palette2" viewBox="0 0 16 16"><path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a3 3 0 0 1-2.121-.879A3 3 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M15 15v-4H9.258l-4.015 4zM0 .5v12.495zm0 12.495V13z"/></svg>';
var card3ValueWithIcon = svgIcon + ' ' + card3Value;
// Set nilai elemen dengan ID 'card3'
document.getElementById('card3').innerHTML = card3ValueWithIcon;
}
//Jumlah Penjualan
function drawCard4(data) {
var card4Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card4Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-bar-chart-line-fill" viewBox="0 0 16 16"><path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1z"/></svg>';
var card4ValueWithIcon = svgIcon + ' ' + card4Value;
// Set nilai elemen dengan ID 'card4'
document.getElementById('card4').innerHTML = card4ValueWithIcon;
}
//Suplier
function drawCard5(data) {
var card5Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card5Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16"><path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/><path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/></svg>';
var card5ValueWithIcon = svgIcon + ' ' + card5Value;
// Set nilai elemen dengan ID 'card5'
document.getElementById('card5').innerHTML = card5ValueWithIcon;
}
//Kategori Produk
function drawCard6(data) {
var card6Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card6Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-menu-button-wide-fill" viewBox="0 0 16 16"><path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1m9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5"/></svg>';
var card6ValueWithIcon = svgIcon + ' ' + card6Value;
// Set nilai elemen dengan ID 'card6'
document.getElementById('card6').innerHTML = card6ValueWithIcon;
}
//Jumlah omset
function drawCard7(data) {
var card7Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card7Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-cash-coin" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0"/><path d="M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195z"/><path d="M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083q.088-.517.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1z"/><path d="M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 6 6 0 0 1 3.13-1.567"/></svg>';
var card7ValueWithIcon = svgIcon + ' ' + card7Value;
// Set nilai elemen dengan ID 'card7'
document.getElementById('card7').innerHTML = card7ValueWithIcon;
}
//Presentase Pendapatan
function drawCard8(data) {
var card8Value = Number(data).toFixed(0) + '%';// Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card8Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-graph-up-arrow" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 0h1v15h15v1H0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5"/></svg>';
var card8ValueWithIcon = svgIcon + ' ' + card8Value;
// Set nilai elemen dengan ID 'card8'
document.getElementById('card8').innerHTML = card8ValueWithIcon;
}
function getDataFromServer() {
google.script.run.withSuccessHandler(drawCard3).getCard3Data();
google.script.run.withSuccessHandler(drawCard4).getCard4Data();
google.script.run.withSuccessHandler(drawCard5).getCard5Data();
google.script.run.withSuccessHandler(drawCard6).getCard6Data();
google.script.run.withSuccessHandler(drawCard7).getCard7Data();
google.script.run.withSuccessHandler(drawCard8).getCard8Data();
}
window.onload = function() {
getDataFromServer();
};
</script>
</head>
<body style="background-color:#d3f8ff;">
<div class="w3-container w3-center">
<br>
<h2>GRAFIK DATA PENJUALAN</h2>
<p>Source Code.by Javabitpro</p>
</div>
<div class="container mt-5">
<!-- 2 kolom -->
<div class="row">
<div class="col-sm-6">
<div class="card text-white bg-info mb-3 card text-center">
<div class="card-header">
Jumlah Omset
</div>
<div class="card-body">
<h1 id="card7"></h1>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-white bg-info mb-3 card text-center">
<div class="card-header">
Persentase Pendapatan
</div>
<div class="card-body">
<h1 id="card8"></h1>
</div>
</div>
</div>
</div>
<!-- end 2 kolom -->
<!-- Sorce Code www.javabitpro.com -->
<!-- 4 kolom -->
<div class="row">
<div class="col-sm-3">
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header text-center">Sisa Stok</div>
<div class="card-body text-white text-center">
<h1 id="card3"></h1>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header text-center">Total Penjualan</div>
<div class="card-body text-white text-center">
<h1 id="card4"></h1>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header text-center">Suplier</div>
<div class="card-body text-dark text-center">
<h1 id="card5"></h1>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header text-center">Kategori Produk</div>
<div class="card-body text-white text-center">
<h1 id="card6"></h1>
</div>
</div>
</div>
</div>
<!-- end 4 kolom -->
<!-- Sorce Code www.javabitpro.com -->
<!-- 2 kolom chart horizontal -->
<div class="row">
<div class="col-md-6">
<div class="card border-primary mb-3">
<div class="card-body">
<div id="chart1"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-primary mb-3">
<div class="card-body" >
<div id="chart2" ></div>
</div>
</div>
</div>
</div>
<!-- end 2 kolom chart horizontal -->
<!-- Sorce Code www.javabitpro.com -->
<!-- 2 kolom vertical -->
<div class="row">
<div class="col-sm-6">
<h4 class="bg-danger text-white" align="center">Data Penjualan Per-bulan</h4>
<div class="card text-center">
<div class="card-header">
Rincian
</div>
<div class="card-body">
<div id="chart3" ></div>
</div>
</div>
</div>
<div class="col-sm-6">
<h4 class="bg-danger text-white" align="center">Data Penjualan Per-Item</h4>
<div class="card text-center">
<div class="card-header">
Rincian
</div>
<div class="card-body">
<div id="chart4" ></div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<div class="card">
<div class="jam-digital">
<div id="jam"></div>
<div id="unit">
<span>Jam</span>
<span>Menit</span>
<span>Detik</span>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- Sorce Code www.javabitpro.com -->
</html>
<!DOCTYPE html>
<html lang="en">
<!-- Sorce Code www.javabitpro.com -->
<head>
<base target="_top">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<!-- font-awesome@6.2.0 icon Visit -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<?!= include('visit')?>
<?!= include('CSSTime'); ?>
<?!= include('JSTime'); ?>
<style>
.custom-card {
margin-left: 0; /* Set margin kiri menjadi 0 */
}
.card-img-top {
width: 100px;
height: 100px;
object-fit: cover;
}
.center-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#dashboard {
display: none;
}
</style>
<script>
google.charts.load('current', { 'packages': ['corechart','annotationchart'] });
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
// Mengambil data dari server
google.script.run.withSuccessHandler(drawChart1).getData1();
google.script.run.withSuccessHandler(drawChart2).getData2();
google.script.run.withSuccessHandler(drawChart3).getData3();
google.script.run.withSuccessHandler(drawChart4).getData4();
}
// Grafik Sisa Stok
function drawChart1(data) {
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Grafik Sisa Stok',
chartArea: { width: '100%' },
width: 500,
height: 300,
hAxis: {slantedText: true},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart1'));
chart.draw(chartData, options);
}
// Grafik Persentase Penjualan
function drawChart2(data) {
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Grafik Persentase Penjualan',
chartArea: { width: '100%' },
is3D:true,
width: 500,
height: 300,
};
var chart = new google.visualization.PieChart(document.getElementById('chart2'));
chart.draw(chartData, options);
}
//Grafik Penjualan Per-Bulan Grafik Vertcal
function drawChart3(data) {
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Grafik Penjualan Per-Bulan',
chartArea: { width: '50%' , height: '100%'},
hAxis: { title: 'Data Penjualan' },
vAxis: { title: 'Bulan' },
height: 800,
};
var chart = new google.visualization.BarChart(document.getElementById('chart3'));
chart.draw(chartData, options);
}
//Grafik Penjualan Per-Item Per-Bulan Grafik Vertcal
function drawChart4(data) {
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Grafik Penjualan Per-Item Per-Bulan',
chartArea: { width: '50%' , height: '100%'},
hAxis: { title: 'Data Penjualan' },
vAxis: { title: 'Bulan' },
height: 800,
};
var chart = new google.visualization.BarChart(document.getElementById('chart4'));
chart.draw(chartData, options);
}
//Sisa Stok
function drawCard3(data) {
var card3Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card3Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-palette2" viewBox="0 0 16 16"><path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a3 3 0 0 1-2.121-.879A3 3 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M15 15v-4H9.258l-4.015 4zM0 .5v12.495zm0 12.495V13z"/></svg>';
var card3ValueWithIcon = svgIcon + ' ' + card3Value;
// Set nilai elemen dengan ID 'card3'
document.getElementById('card3').innerHTML = card3ValueWithIcon;
}
//Jumlah Penjualan
function drawCard4(data) {
var card4Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card4Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-bar-chart-line-fill" viewBox="0 0 16 16"><path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1z"/></svg>';
var card4ValueWithIcon = svgIcon + ' ' + card4Value;
// Set nilai elemen dengan ID 'card4'
document.getElementById('card4').innerHTML = card4ValueWithIcon;
}
//Suplier
function drawCard5(data) {
var card5Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card5Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16"><path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/><path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/></svg>';
var card5ValueWithIcon = svgIcon + ' ' + card5Value;
// Set nilai elemen dengan ID 'card5'
document.getElementById('card5').innerHTML = card5ValueWithIcon;
}
//Kategori Produk
function drawCard6(data) {
var card6Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card6Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-menu-button-wide-fill" viewBox="0 0 16 16"><path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1m9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5"/></svg>';
var card6ValueWithIcon = svgIcon + ' ' + card6Value;
// Set nilai elemen dengan ID 'card6'
document.getElementById('card6').innerHTML = card6ValueWithIcon;
}
//Jumlah omset
function drawCard7(data) {
var card7Value = Number(data).toLocaleString('id-ID'); // Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card7Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-cash-coin" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0"/><path d="M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195z"/><path d="M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083q.088-.517.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1z"/><path d="M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 6 6 0 0 1 3.13-1.567"/></svg>';
var card7ValueWithIcon = svgIcon + ' ' + card7Value;
// Set nilai elemen dengan ID 'card7'
document.getElementById('card7').innerHTML = card7ValueWithIcon;
}
//Presentase Pendapatan
function drawCard8(data) {
var card8Value = Number(data).toFixed(0) + '%';// Format angka sesuai lokal Indonesia
// Tambahkan ikon SVG ke nilai card8Value
var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-graph-up-arrow" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 0h1v15h15v1H0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5"/></svg>';
var card8ValueWithIcon = svgIcon + ' ' + card8Value;
// Set nilai elemen dengan ID 'card8'
document.getElementById('card8').innerHTML = card8ValueWithIcon;
}
function getDataFromServer() {
google.script.run.withSuccessHandler(drawCard3).getCard3Data();
google.script.run.withSuccessHandler(drawCard4).getCard4Data();
google.script.run.withSuccessHandler(drawCard5).getCard5Data();
google.script.run.withSuccessHandler(drawCard6).getCard6Data();
google.script.run.withSuccessHandler(drawCard7).getCard7Data();
google.script.run.withSuccessHandler(drawCard8).getCard8Data();
}
window.onload = function() {
getDataFromServer();
};
</script>
</head>
<body style="background-color:#d3f8ff;">
<div class="w3-container w3-center">
<br>
<h2>GRAFIK DATA PENJUALAN</h2>
<p>Source Code.by Javabitpro</p>
</div>
<div class="container mt-5">
<!-- 2 kolom -->
<div class="row">
<div class="col-sm-6">
<div class="card text-white bg-info mb-3 card text-center">
<div class="card-header">
Jumlah Omset
</div>
<div class="card-body">
<h1 id="card7"></h1>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card text-white bg-info mb-3 card text-center">
<div class="card-header">
Persentase Pendapatan
</div>
<div class="card-body">
<h1 id="card8"></h1>
</div>
</div>
</div>
</div>
<!-- end 2 kolom -->
<!-- Sorce Code www.javabitpro.com -->
<!-- 4 kolom -->
<div class="row">
<div class="col-sm-3">
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header text-center">Sisa Stok</div>
<div class="card-body text-white text-center">
<h1 id="card3"></h1>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header text-center">Total Penjualan</div>
<div class="card-body text-white text-center">
<h1 id="card4"></h1>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header text-center">Suplier</div>
<div class="card-body text-dark text-center">
<h1 id="card5"></h1>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header text-center">Kategori Produk</div>
<div class="card-body text-white text-center">
<h1 id="card6"></h1>
</div>
</div>
</div>
</div>
<!-- end 4 kolom -->
<!-- Sorce Code www.javabitpro.com -->
<!-- 2 kolom chart horizontal -->
<div class="row">
<div class="col-md-6">
<div class="card border-primary mb-3">
<div class="card-body">
<div id="chart1"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-primary mb-3">
<div class="card-body" >
<div id="chart2" ></div>
</div>
</div>
</div>
</div>
<!-- end 2 kolom chart horizontal -->
<!-- Sorce Code www.javabitpro.com -->
<!-- 2 kolom vertical -->
<div class="row">
<div class="col-sm-6">
<h4 class="bg-danger text-white" align="center">Data Penjualan Per-bulan</h4>
<div class="card text-center">
<div class="card-header">
Rincian
</div>
<div class="card-body">
<div id="chart3" ></div>
</div>
</div>
</div>
<div class="col-sm-6">
<h4 class="bg-danger text-white" align="center">Data Penjualan Per-Item</h4>
<div class="card text-center">
<div class="card-header">
Rincian
</div>
<div class="card-body">
<div id="chart4" ></div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<div class="card">
<div class="jam-digital">
<div id="jam"></div>
<div id="unit">
<span>Jam</span>
<span>Menit</span>
<span>Detik</span>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- Sorce Code www.javabitpro.com -->
</html>
7. Untuk script CSSTime.html , JSTime.html dan Visit.html sudah tersedia pada file Apps Script.
8. Klik ikon Save.
9. Klik tombol Terapkan/Deploy lalu pilih Deployment baru/New deployment.
10. Pastikan jenisnya adalah Aplikasi web, hak aksesnya adalah Siapa saja/Anyone lalu pilih Terapkan/Deploy.
11. Klik atau salin URL yang sudah di Deploy.
SELESAI !!!
