Google sheet Apps Script Chart Vẽ nhiều kiểu biểu đồ trên Webapp
Giaoanlink chia sẻ tiếp đến các bạn một project mới về Google sheet Apps Script Chart Vẽ nhiều kiểu biểu đồ trên Webapp. Dữ liệu được lấy từ sheet trên Spreadsheet và biểu thị dưới dạng biểu đồ. Bạn có thể điều chỉnh để hiển thị biểu đồ dạng hình tròn, biểu đồ hình cột và biểu đồ hình line… Màu sắc cũng được chỉnh sửa theo yêu cầu rất dễ dàng. Bên dưới đây là code app script và video hướng dẫn qua.
Bạn cũng có thể tìm ra nhiều project khác tại trang tổng hợp này: mở trang tổng hợp
Các project excel khác:
- Google sheet, appscript và webapp – Giải pháp thu hoạc phí toàn diện
- Quản Lý Học Phí Bằng Google Apps Script: Form CRUD, Tìm Kiếm, In Phiếu Thu và Tự Động Tính Toán
- Giảm dung lượng PDF dễ dàng với PDF24 Creator – Miễn phí và hiệu quả
- Chuyển đổi Pdf dạng bản scan sang MS Excel chuẩn không bị lỗi font và giữ nguyên định dạng
- Chuyển định dạng file pdf dạng scan – dạng chụp hình ảnh sang MS Word định dạng chuẩn 99.9%
- Phím tắt vào BIOS và Boot Options của các hãng máy tính phổ biến
- Google sheet webapp | Form đăng ký Tự động gửi ID và QR code Check in qua địa chỉ mail
- Cách tắt Windows update và Windows Defender cực đơn giản
- Apsscript Radio Button và Input – Sự phụ thuộc của input vào Radio button
- Bạn sử dụng zalo và bị báo đầy ổ đĩa,phải làm sao
Code app script trang “Code.gs”
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getData(){
let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data')
let dataset = ss.getDataRange().getDisplayValues()
let data1 = dataset.map(r => [r[1],r[2],r[3],r[4],r[5]])
let name = dataset.map(r => [r[0]])
let header = data1.shift()
Logger.log(data1)
Logger.log(header)
return {name: name[2],header: header, data:data1[1]}
}
Code app script trang “index.html”
<!DOCTYPE html>
<html>
<head>
<!--https://youtube.com/netmediacctv-->
<base target="_top">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.border {
border: 3px solid green;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: red"> CHART TRÊN WEBAPP</h1>
<div class="border" style="width: 500px;" >
<canvas id="myChart"></canvas>
</div>
<script>
google.script.run.withSuccessHandler(output).getData()
function output(res) {
const ctx = document.getElementById('myChart') ;
new Chart(ctx, {
type: 'line',
data: {
labels: res.header,
datasets: [{
label: res.name,
data: res.data.map(Number),
backgroundColor: [
'#f20808',
'#08f23f',
'#FF6390',
'#086bf2',
'#f29708',
],
borderColor: '#000000',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
</body>
</html>