グーグルアプリの視覚化で可能ですか？ズームオプション付きのタイムライン
Jan 20 2021
グーグルアプリでこのようなタイムラインを作ることは可能ですか？
標準のウェブアプリを作成しましたが、タイムライン全体のデータが多すぎて一部のブロックが見づらいという問題があります。ズームオプションを考えていましたが、どうすればよいかわかりません。
これまでの私のコードは次のとおりです。
timelineData関数の配列は次のようになります。 [["00G080","NA14599","2021-01-08T21:25:00.000Z","2021-01-12T14:22:00.000Z"],["00G080","NA14599","2021-01-12T14:22:00.000Z","2021-01-12T15:19:00.000Z"]...]
gs：
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate();
}
function timelineData(){
const ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1KzaKe9ShAZZAlK3CQC-UmrKzZXghNKAAx_pDHFX3YLI/edit#gid=0');
const srcSheet = ss.getSheetByName("Array");
const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
const newAr = srcValues.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
const arr = JSON.stringify(newAr);
return arr
}
html：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>機械別工程残</h1>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(getData);
function getData(){
google.script.run.withSuccessHandler(drawChart).timelineData();
}
function drawChart(dane) {
//console.log(dane);
const obj = JSON.parse(dane);
const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
var container = document.getElementById('chart');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: '機械' });
dataTable.addColumn({ type: 'string', id: 'オーダー' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows(newAr);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e', '#e743f0', '#f04343', '#f0e443', '#b9f043', '#4ff043', '#43f0d9', '#435df0'],
// timeline: { colorByRowLabel: true}
};
chart.draw(dataTable, options);
}
</script>
<div id="chart" style="height: 600px;"></div>
</body>
</html>
私のタイムラインは次のようになります。
回答
1 Timonek Jan 22 2021 at 09:35
WhiteHatからのアドバイスのおかげで、動作するコードを配置することができました。誰かがそれが役立つことを願っています
code.gs
function doGet() {
var template = HtmlService.createTemplateFromFile('index3');
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function timelineData(){
const ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1KzaKe9ShAZZAlK3CQC-UmrKzZXghNKAAx_pDHFX3YLI/edit#gid=0');
const srcSheet = ss.getSheetByName("Array");
const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
const newAr = srcValues.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
const arr = JSON.stringify(newAr);
return arr
}
html：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>機械別工程残</h1>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline","controls"],'language': 'ja'});
google.charts.setOnLoadCallback(getData);
function getData(){
google.script.run.withSuccessHandler(drawChart).timelineData();
}
function drawChart(dane) {
//console.log(dane);
const obj = JSON.parse(dane);
const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 3,
ui: {
minRangeSize: (60 * 60 * 1000),
chartType: 'TimeLine',
chartOptions: {
width: 900,
height: 70,
chartArea: {
width: '100%',
height: '80%'
},
hAxis: {
baselineColor: 'none'
}
},
chartView: {
columns: [2, 3]
}
}
}
});
google.visualization.events.addListener(control, 'error', function (error) {
console.log('error: ' + error.id + ' - ' + error.message);
google.visualization.errors.removeError(error.id);
});
var chart = new google.visualization.ChartWrapper({
chartType: 'Timeline',
containerId: 'chart',
options: {
width: 985,
height: 600,
chartArea: {
width: '100%',
height: '80%'
},
tooltip: {
isHtml: true
}
},
view: {
columns: [0, 1, 2, 3]
}
});
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Student' });
data.addColumn({ type: 'string', id: 'Event Type' });
data.addColumn({ type: 'datetime', id: 'Start' });
data.addColumn({ type: 'datetime', id: 'End' });
data.addRows(newAr);
dashboard.bind(control, chart);
dashboard.draw(data);
}
</script>
<div id="dashboard">
<div id="chart" style="width: 1050px; left:30px" ></div>
<div>範囲設定</div>
<div id="control" style="width: 1050px; left:30px"></div>
</div>
</body>
</html>