¿Es posible con la visualización de aplicaciones de Google? Línea de tiempo con opción de zoom
Jan 20 2021
¿Es posible hacer una línea de tiempo como esta con las aplicaciones de Google?
He creado una aplicación web estándar, pero existe el problema de que hay demasiados datos para toda la línea de tiempo, por lo que es difícil ver algunos bloques ... Estaba pensando en la opción de zoom, pero no tengo idea de cómo puedo hacer esto.
Aquí tienes mi código hasta ahora:
matriz de la función timelineData se ve así: [["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>
Mi línea de tiempo se ve así:
Respuestas
1 Timonek Jan 22 2021 at 09:35
Gracias a los consejos de WhiteHat pude poner código de trabajo. Espero que alguien lo encuentre útil
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>