************
code.gs
function doGet() {
let template = HtmlService.createTemplateFromFile('Index');
let html = template.evaluate().setTitle('สรุปข้อมูลคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์');
html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
html.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return html;
}
function getChartData() {
var Id = "12nDpGTte-fyiIdBANb-2blD8NLvQ5LjeflAZxR86tmM"; //แก้ 1
var ss=SpreadsheetApp.openById(Id);
const sheet = ss.getSheetByName("boardPutthaisong");
const dataRanges = [
{range: 'boardPutthaisong!A2:B27', key:'Range1'},
{range: 'boardPutthaisong!BU2:BV4', key:'Range2'},
{range: 'boardPutthaisong!BU9:BV15', key:'Range3'},
{range: 'boardPutthaisong!BU19:BV29', key:'Range4'},
{range: 'boardPutthaisong!BX2:BY8', key:'Range5'},
{range: 'boardPutthaisong!BX9:BY22', key:'Range6'},
{range: 'boardPutthaisong!CA2:CB34', key:'Range7'},
{range: 'boardPutthaisong!A35:B45', key:'Range8'},
{range: 'boardPutthaisong!BX23:BZ36', key:'Range9'}
]
let data = [];
dataRanges.forEach(function(rangeObj){
let rangeData = sheet.getRange(rangeObj.range).getValues();
data.push({key:rangeObj.key, values:rangeData});
});
return data;
}
**********************
index.html
****************
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">
</script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
google.charts.load('current', {'packages':['geochart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
google.script.run.withSuccessHandler(displayChart).getChartData();
}
function displayChart(data) {
var chart1Data = google.visualization.arrayToDataTable(getDataByKey(data,'Range1'));
var chart2Data = google.visualization.arrayToDataTable(getDataByKey(data,'Range2'));
var chart3Data = google.visualization.arrayToDataTable(getDataByKey(data,'Range3'));
var chart4Data = google.visualization.arrayToDataTable(getDataByKey(data,'Range4'));
var chart5Data = google.visualization.arrayToDataTable(getDataByKey(data,'Range5'));
var chart6Data = google.visualization.arrayToDataTable(getDataByKey(data,'Range6'));
var chart7Data = google.visualization.arrayToDataTable(getDataByKey(data,'Range7'));
var chart8Data = google.visualization.arrayToDataTable(getDataByKey(data,'Range8'));
var chart9Data = google.visualization.arrayToDataTable(getDataByKey(data,'Range9'));
// Set chart options
var chart1Options = {
title: 'จำนวนสมาชิกคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์ จำแนกรายตำบล',
};
// var chart9Options = {
// title: 'จำนวนสมาชิกคริสตจักรชิโลห์ เกิดและต้อนรับพระเยซูคริสต์ รายเดือน',
// is3D: true,
// legend: {position: 'bottom'}
// };
var chart2Options = {
title: 'สัดส่วนเพศ สมาชิกคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์',
is3D: true,
legend: {position: 'bottom'}
};
var chart3Options = {
title: 'สัดส่วนสถานะภาพสมรส สมาชิกคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์',
is3D: true,
legend: {position: 'bottom'}
};
var chart4Options = {
title: 'สัดส่วนระดับการศึกษา สมาชิกคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์',
is3D: true,
legend: {position: 'bottom'}
};
var chart5Options = {
title: 'จำนวนสมาชิกคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์ จำแนกกลุ่มอายุ(ปี)',
is3D: true,
legend: {position: 'bottom'}
};
var chart6Options = {
title: 'จำนวนสมาชิกคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์ จำแนกรายเดือนที่ต้อนรับพระเยซูคริสต์ ',
legend: {position: 'bottom'}
};
var chart7Options = {
title: 'จำนวนสมาชิกคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์ จำแนกรายอาชีพ',
is3D: true,
legend: {position: 'bottom'}
};
var chart8Options = {
title: 'จำนวนสมาชิกคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์ จำแนกรายตำบล',
is3D: true,
legend: {position: 'bottom'}
};
var chart9Options = {
title: 'จำนวนสมาชิกคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์ เกิดและต้อนรับพระเยซูคริสต์ จำแนกรายเดือน',
series:{
0: {targetAxisIndex: 0}, // Impression on the left axis
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 1}, // Clicks and Conversions on the right axis
},
vAxes: {
0: {title: 'Impressions'},
1: {title: 'Clicks/Conversions'}
},
legend: {position: 'bottom'}
};
// Instantiate and draw our charts, passing in some options.
var chart1 = new google.visualization.GeoChart(document.getElementById('chart1'));
// var chart1 = new google.visualization.ฺColumnChart(document.getElementById('chart1'));
// var chart2 = new google.visualization.AreaChart(document.getElementById('chart2'));
var chart2 = new google.visualization.PieChart(document.getElementById('chart2'));
var chart3 = new google.visualization.PieChart(document.getElementById('chart3'));
var chart4 = new google.visualization.PieChart(document.getElementById('chart4'));
var chart5 = new google.visualization.ColumnChart(document.getElementById('chart5'));
var chart6 = new google.visualization.LineChart(document.getElementById('chart6'));
var chart7 = new google.visualization.BarChart(document.getElementById('chart7'));
var chart8 = new google.visualization.ColumnChart(document.getElementById('chart8'));
var chart9 = new google.visualization.AreaChart(document.getElementById('chart9'));
chart1.draw(chart1Data, chart1Options);
chart2.draw(chart2Data, chart2Options);
chart3.draw(chart3Data, chart3Options);
chart4.draw(chart4Data, chart4Options);
chart5.draw(chart5Data, chart5Options);
chart6.draw(chart6Data, chart6Options);
chart7.draw(chart7Data, chart7Options);
chart8.draw(chart8Data, chart8Options);
chart9.draw(chart9Data, chart9Options);
}
function getDataByKey(data, key) {
for (var i = 0; i < data.length; i++) {
if (data[i].key===key) {
return data[i].values;
}
}
return [];
}
</script>
</head>
<body>
<div class="container bg-body-secondary">
<div class="row">
<div class="mt-4">
<h1 class="text-center" style="font-family: 'Blockletter', sans-serif;">สรุปข้อมูลคริสตจักรชิโลห์ อำเภอพุทไธสง จังหวัดบุรีรัมย์ </h1>
</div>
</div>
<div class="row">
<div class="col-sm-4 mb-4">
<div id="chart1" style="width: 100%; height: 300px;"></div>
</div>
<div class="col-sm-4 mb-4">
<div id="chart2" style="width: 100%; height: 300px;"></div>
</div>
<div class="col-sm-4 mb-4">
<div id="chart3" style="width: 100%; height: 300px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-4 mb-4">
<div id="chart4" style="width: 100%; height: 250px;"></div>
</div>
<div class="col-sm-4 mb-4">
<div id="chart5" style="width: 100%; height: 250px;"></div>
</div>
<div class="col-sm-4 mb-4">
<div id="chart6" style="width: 100%; height: 250px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-4 mb-4">
<div id="chart7" style="width: 100%; height: 350px;"></div>
</div>
<div class="col-sm-4 mb-4">
<div id="chart8" style="width: 100%; height: 350px;"></div>
</div>
<div class="col-sm-4 mb-4">
<div id="chart9" style="width: 100%; height: 350px;"></div>
</div>
</div>
</div>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น