Vorlage:TimelineHaeuser: Unterschied zwischen den Versionen
Aus Altes Köln
HorstR (Diskussion | Beiträge) Die Seite wurde neu angelegt: „<includeonly> <!-- vis.js CSS & JS --> <link href="https://unpkg.com/vis-timeline@7.8.3/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="https://unpkg.com/vis-timeline@7.8.3/standalone/umd/vis-timeline-graph2d.min.js"></script> <div id="timeline" style="width:100%; height:400px;"></div> <script> var container = document.getElementById('timeline'); var items = new vis.DataSet([ {{#ask: Kategorie:Bauwerk |?Erbaut…“ |
HorstR (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<includeonly> | <includeonly> | ||
<!-- vis.js CSS & JS --> | <!-- vis.js CSS & JS einbinden --> | ||
<link href="https://unpkg.com/vis-timeline@7.8.3/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> | <link href="https://unpkg.com/vis-timeline@7.8.3/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> | ||
<script src="https://unpkg.com/vis-timeline@7.8.3/standalone/umd/vis-timeline-graph2d.min.js"></script> | <script src="https://unpkg.com/vis-timeline@7.8.3/standalone/umd/vis-timeline-graph2d.min.js"></script> | ||
<!-- Timeline Container --> | |||
<div id="timeline" style="width:100%; height:400px;"></div> | <div id="timeline" style="width:100%; height:400px;"></div> | ||
<script> | <script> | ||
// Timeline-Container | |||
var container = document.getElementById('timeline'); | var container = document.getElementById('timeline'); | ||
// Daten aus SMW | |||
var items = new vis.DataSet([ | var items = new vis.DataSet([ | ||
{{#ask: [[Kategorie:Bauwerk]] | {{#ask: [[Kategorie:Bauwerk]] | ||
|?Erbaut um= | |?Erbaut um=Erbaut | ||
|?Gebäudeart= | |?Straße=Straße | ||
|?HausNr=HausNr | |||
|?Gebäudeart=Gebäudeart | |||
|format=template | |format=template | ||
|template=Vorlage:TimelineItem | |template=Vorlage:TimelineItem | ||
| Zeile 19: | Zeile 24: | ||
]); | ]); | ||
// Timeline-Optionen | |||
var options = { | var options = { | ||
start: '1700-01-01', | start: '1700-01-01', | ||
| Zeile 26: | Zeile 32: | ||
zoomMin: 1000 * 60 * 60 * 24 * 365, // 1 Jahr | zoomMin: 1000 * 60 * 60 * 24 * 365, // 1 Jahr | ||
zoomMax: 1000 * 60 * 60 * 24 * 365 * 400, // 400 Jahre | zoomMax: 1000 * 60 * 60 * 24 * 365 * 400, // 400 Jahre | ||
tooltip: { | tooltip: { followMouse: true }, | ||
showCurrentTime: false | showCurrentTime: false | ||
}; | }; | ||
// Timeline initialisieren | |||
var timeline = new vis.Timeline(container, items, options); | var timeline = new vis.Timeline(container, items, options); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||