Ist es mit Google App Visualisierung möglich? Zeitleiste mit Zoomoption
Jan 20 2021
Ist es möglich, mit Google Apps eine Zeitleiste wie diese zu erstellen?
Ich habe eine Standard-Web-App erstellt, aber es gibt ein Problem, dass zu viele Daten für die gesamte Zeitachse vorhanden sind, sodass einige Blöcke schwer zu erkennen sind. Ich habe über die Zoomoption nachgedacht, habe aber keine Ahnung, wie ich das tun kann.
Hier haben Sie meinen Code bisher:
Das Array der timelineData-Funktion sieht folgendermaßen aus: [["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>
Meine Zeitleiste sieht folgendermaßen aus:
Antworten
1 Timonek Jan 22 2021 at 09:35
Dank des Ratschlags von WhiteHat konnte ich Arbeitscode einfügen. Hoffe, jemand wird es nützlich finden
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>