Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- motorrad:motorradfahren [12.09.2022 22:19] – Wolfgang Kunkel
+++ motorrad:motorradfahren [24.04.2024 17:50] (aktuell) – [Zeitleiste] Wolfgang Kunkel
@@ Zeile 4: / Zeile 4: @@
 ====== Motorradfahren ======
-{{ :baustelle.jpg?direct&600 |Bild von macrovector auf Freepik}}
+===== Zeitleiste =====
+Die Zeitleiste kann man mit der Maus verschieben und zoomen sowie Elemente auswählen.
+<html>
+<head>
+  <script type="text/javascript" src="https://www.wkunkel.de/_vis/vis-timeline-graph2d.min.js"></script>
+  <link href="https://www.wkunkel.de/_vis/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    body, html {
+      font-family: arial;
+    }
+    .vis-item .vis-item-overflow {
+      overflow: visible;
+    }
+  </style>
+</head>
+<body>
+<div id="visualization"></div>
+<script type="text/javascript">
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+  var groups = new vis.DataSet([
+    {id: 1, style: "background-color: lightgray", content: '<b><a href="https://www.wkunkel.de" target="_blank">Motorrad</a></b>' , title: 'Alle meine Mopeds', value: 1},
+    {id: 2, style: "background-color: lightgray", content: '<b><a href="https://www.wkunkel.de" target="_blank">Tour</a></b>', title: 'und wo ich damit gewesen bin', value: 2}
+  ]);
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1 , group: 1, start: '1987-07-01', end: '1990-05-31', content: '<font color="grey"><b>Simson SR2</b></font>',       style: "background-color: lightgray", type: 'background'},
+    {id: 2 , group: 1, start: '1993-02-22', end: '1994-12-10', content: '<font color="grey"><b>Honda CBX750F</b></font>',    style: "background-color: lightgray", type: 'background'},
+    {id: 3 , group: 1, start: '1994-12-14', end: '1998-08-11', content: '<font color="grey"><b>Honda CBR1000F</b></font>',   style: "background-color: lightgray", type: 'background'},
+    {id: 4 , group: 1, start: '1999-04-07', end: '2000-06-23', content: '<font color="grey"><b>Suzuki GSX1300R (1)</b></font>', style: "background-color: lightgray", type: 'background'},
+    {id: 5 , group: 1, start: '2000-07-26', end: '2002-07-22', content: '<font color="grey"><b>Suzuki GSX1300R (2)</b></font>', style: "background-color: lightgray", type: 'background'},
+    {id: 6 , group: 1, start: '2004-04-16', end: '2015-03-07', content: '<font color="grey"><b>Suzuki GSX1300R (3)</b></font>', style: "background-color: lightgray", type: 'background'},
+    {id: 7 , group: 2, start: '1994-05-29',                    content: '<font color="red">Isle Of Man TT (29.05.1994 - 10.06.1994)</font>', title: 'Isle Of Man Tourist Trophy'},
+    {id: 8 , group: 2, start: '1997-05-24',                    content: '<font color="red">Isle Of Man TT (24.05.1997 - 08.06.1997)</font>', title: 'Isle Of Man Tourist Trophy'},
+    {id: 9 , group: 2, start: '2000-05-27',                    content: '<font color="red">Isle Of Man TT (27.05.2000 - 09.06.2000)</font>', title: 'Isle Of Man Tourist Trophy'}
+  ]);
+  // Configuration for the Timeline
+  var options = {};
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+  timeline.setOptions(options);
+  timeline.setGroups(groups);
+  timeline.setItems(items);
+</script>
+</body>
+</html>