add timeline

f9b47e81 · Rafal · 915288ad · f9b47e81 · f9b47e81 · f9b47e81
Commit f9b47e81 authored Jan 12, 2016 by Rafal
Expand all Hide whitespace changes
Inline Side-by-side

Showing with 120 additions and 20 deletions

vis.min.css css/vis.min.css +1 -0

howto.html howto.html +41 -9

index2.html index2.html +32 -9

map.js js/map.js +2 -2

vis.min.js js/vis.min.js +44 -0

No files found.
--- a/css/vis.min.css
+++ b/css/vis.min.css
--- a/howto.html
+++ b/howto.html
+
+<!DOCTYPE HTML>
 <html>
-    <head>
-		
-		<link href="css/bootstrap.min.css" rel="stylesheet">
-		<link href="css/howto.css" rel="stylesheet">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+<head>
+  <title>Timeline | Basic demo</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>

+  <script src="./js/vis.min.js"></script>
+  <link href="./css/vis.min.css" rel="stylesheet" type="text/css" />
 </head>
- <body>
+<body>
+
+<p>
+  A basic timeline. You can move and zoom the timeline, and select items.
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, content: 'item 1', start: '2014-04-20'},
+    {id: 2, content: 'item 2', start: '2014-04-14'},
+    {id: 3, content: 'item 3', start: '2014-04-18'},
+    {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
+    {id: 5, content: 'item 5', start: '2014-04-25'},
+    {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
+  ]);
+
+  // Configuration for the Timeline
+  var options = {};

- 
-    </body>   
-</html>  
\ No newline at end of file
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>
\ No newline at end of file
--- a/index2.html
+++ b/index2.html
@@ -10,6 +10,8 @@
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css'>
        <link rel="stylesheet" href="css/style.css">
+		<link href="./css/vis.min.css" rel="stylesheet" type="text/css" />
+		<script src="./js/vis.min.js"></script>
 		<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
 <script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
 <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
@@ -150,7 +152,7 @@
 		</div>
 		
 	 <div class="horizontal-scrolling">
-			 <h3>Bagaz?</h3>
+			 <h3>Bagaż?</h3>
 			 
 			<!-- 1 row !-->
 			 <div class="row">
@@ -158,7 +160,7 @@
 					<img class="take_image" src="./img/towel_icon.png"> 
 				</div>
 				<div class="col-md-2">
-					<p>Zapasowy recznik i stroj kapielowy(opcjonalnie)</p>
+					<p>Zapasowy ręcznik i strój kąpielowy(opcjonalnie)</p>
 				</div>
 				<div class="col-md-2">
 					<p>Prawdopodobnie pójdziemy na saune</p>
@@ -182,20 +184,20 @@
 					<img class="take_image" src="./img/sleeping_bag.png"> 
 				</div>
 				<div class="col-md-2">
-					<p>Spiwor i poduszke</p>
+					<p>Śpiwór i poduszkę</p>
 				</div>
 				<div class="col-md-2">
-					<p>Mamy tylko jeden dod. dmuchany materac. Mozna tez laczyc lozka.</p>
+					<p>Mamy tylko jeden dod. dmuchany materac. Można też złaczyć łóżka.</p>
 				</div>

 				<div class="col-md-1 col-md-offset">
 					<img class="take_image" src="./img/poster.png"> 
 				</div>
 				<div class="col-md-2">
-					<p>Cos na sciane</p>
+					<p>Coś na ścianę</p>
 				</div>
 				<div class="col-md-2">
-					<p>Caly dom jest strasznie bialy. Pomozcie go ozywic!</p>
+					<p>Cały dom jest strasznie biały. Pomóżcie go ożywić!</p>
 				</div>

 			</div>
@@ -209,7 +211,7 @@
 					<p>Jedzenie</p>
 				</div>
 				<div class="col-md-2">
-					<p>Nie jest wcale drogo i nie musicie sie tym przejmowac:)</p>
+					<p>Nie jest wcale drogo i nie musicie się tym przejmować:)</p>
 				</div>

 				<div class="col-md-1 col-md-offset">
@@ -228,7 +230,9 @@
 			
 	  </div>
 	  <div class="horizontal-scrolling">
-	  Ciekawe wydarzenia na miejscu + kalendarz przyjazdów
+	  
+			<div id="visualization"></div>
+	  
 	  </div>
    </section>
 	  
@@ -260,5 +264,24 @@
 														});
 														});
 													</script>
-  </body>
+
+
+<script type="text/javascript">
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, content: 'Przyjazd do Finlandii', start: '2016-01-06'},
+    {id: 2, content: 'Wyjazd na egzamin', start: '2016-01-26', end: '2016-02-04'},
+  ]);
+
+  // Configuration for the Timeline
+  var options = {};
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+
+													</body>
 </html>
--- a/js/map.js
+++ b/js/map.js
-// svg path for target icon
+// svg path for target icon
 var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
 // svg path for plane icon
 var planeSVG = "M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z";
@@ -57,7 +57,7 @@ var map = AmCharts.makeChart( "chartdiv", {
          labelRollOverColor: "#CC0000",
          labelFontSize: 20
        }, {
-          label: "Tanimi linami",
+          label: "Tanimi liniami",
          left: 106,
          top: 70,
          labelColor: "#000000",

--- a/js/vis.min.js
+++ b/js/vis.min.js