diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/styling')
5 files changed, 598 insertions, 0 deletions
diff --git a/www/lib/vis/examples/timeline/styling/axisOrientation.html b/www/lib/vis/examples/timeline/styling/axisOrientation.html new file mode 100644 index 00000000..b3978f17 --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/axisOrientation.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Orientation</title> + + <style type="text/css"> + body, html { + font-family: sans-serif; + } + </style> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + + <script src="../../googleAnalytics.js"></script> +</head> +<body> + +<p> + There are a number of orientation options for the time axis and the items. +</p> + +<p> + <label for="axis-orientation">Axis orientation</label> + <select id="axis-orientation"> + <option value="both">both</option> + <option value="bottom" selected>bottom</option> + <option value="none">none</option> + <option value="top">top</option> + </select> +</p> + +<p> + <label for="item-orientation">Item orientation</label> + <select id="item-orientation"> + <option value="bottom" selected>bottom</option> + <option value="top">top</option> + </select> +</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 = { + height: 250 // px + }; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); + + var axisOrientation = document.getElementById('axis-orientation'); + axisOrientation.onchange = function () { + timeline.setOptions({ orientation: {axis: this.value} }); + }; + + var itemOrientation = document.getElementById('item-orientation'); + itemOrientation.onchange = function () { + timeline.setOptions({ orientation: {item: this.value} }); + }; +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/styling/customCss.html b/www/lib/vis/examples/timeline/styling/customCss.html new file mode 100644 index 00000000..ed700a1d --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/customCss.html @@ -0,0 +1,100 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Custom styling</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + body { + font-family: purisa, 'comic sans', cursive; + } + + .vis-timeline { + border: 2px solid purple; + font-family: purisa, 'comic sans', cursive; + font-size: 12pt; + background: #ffecea; + } + + .vis-item { + border-color: #F991A3; + background-color: pink; + font-size: 15pt; + color: purple; + box-shadow: 5px 5px 20px rgba(128,128,128, 0.5); + } + + .vis-item, + .vis-item.vis-line { + border-width: 3px; + } + + .vis-item.vis-dot { + border-width: 10px; + border-radius: 10px; + } + + .vis-item.vis-selected { + border-color: green; + background-color: lightgreen; + } + + .vis-time-axis .vis-text { + color: purple; + padding-top: 10px; + padding-left: 10px; + } + + .vis-time-axis .vis-text.vis-major { + font-weight: bold; + } + + .vis-time-axis .vis-grid.vis-minor { + border-width: 2px; + border-color: pink; + } + + .vis-time-axis .vis-grid.vis-major { + border-width: 2px; + border-color: #F991A3; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> +<body> + +<p> + The style of the Timeline can be fully customized via CSS: +</p> +<div id="visualization"></div> + +<script type="text/javascript"> + var container = document.getElementById('visualization'); + + // note that months are zero-based in the JavaScript Date object + var items = new vis.DataSet([ + {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'}, + {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, + {start: new Date(2010,7,24,16,0,0), content: 'Report'}, + {start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'}, + {start: new Date(2010,7,28), content: '<div>Memo</div><img src="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'}, + {start: new Date(2010,7,29), content: '<div>Phone call</div><img src="../resources/img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'}, + {start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'}, + {start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="../resources/img/attachment-icon.png" style="width:32px; height:32px;">'} + ]); + + var options = { + editable: true, + margin: { + item: 20, + axis: 40 + } + }; + + var timeline = new vis.Timeline(container, items, options); +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/styling/gridStyling.html b/www/lib/vis/examples/timeline/styling/gridStyling.html new file mode 100644 index 00000000..9fec28b2 --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/gridStyling.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Grid styling</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + body, html { + font-family: sans-serif; + } + + /* alternating column backgrounds */ + .vis-time-axis .vis-grid.vis-odd { + background: #f5f5f5; + } + + /* gray background in weekends, white text color */ + .vis-time-axis .vis-grid.vis-saturday, + .vis-time-axis .vis-grid.vis-sunday { + background: gray; + } + .vis-time-axis .vis-text.vis-saturday, + .vis-time-axis .vis-text.vis-sunday { + color: white; + } + </style> + <script src="../../googleAnalytics.js"></script> +</head> +<body> +<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: 'custom', start: '2015-01-01'}, + {id: 2, content: 'styling', start: '2016-01-01'}, + {id: 3, content: 'of', start: '2017-01-01'}, + {id: 4, content: 'background', start: '2018-01-01'}, + {id: 5, content: 'grid', start: '2019-01-01'} + ]); + + // Configuration for the Timeline + var options = {}; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/styling/itemClassNames.html b/www/lib/vis/examples/timeline/styling/itemClassNames.html new file mode 100755 index 00000000..62433484 --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/itemClassNames.html @@ -0,0 +1,117 @@ +<html> +<head> + <title>Timeline | Item class names</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + body, input { + font: 12pt verdana; + } + + /* custom styles for individual items, load this after vis.css/vis-timeline-graph2d.min.css */ + + .vis-item.green { + background-color: greenyellow; + border-color: green; + } + + /* create a custom sized dot at the bottom of the red item */ + .vis-item.red { + background-color: red; + border-color: darkred; + color: white; + font-family: monospace; + box-shadow: 0 0 10px gray; + } + .vis-item.vis-dot.red { + border-radius: 10px; + border-width: 10px; + } + .vis-item.vis-line.red { + border-width: 5px; + } + .vis-item.vis-box.red { + border-radius: 0; + border-width: 2px; + font-size: 24pt; + font-weight: bold; + } + + .vis-item.orange { + background-color: gold; + border-color: orange; + } + .vis-item.vis-selected.orange { + /* custom colors for selected orange items */ + background-color: orange; + border-color: orangered; + } + + .vis-item.magenta { + background-color: magenta; + border-color: purple; + color: white; + } + + /* our custom classes overrule the styles for selected events, + so lets define a new style for the selected events */ + .vis-item.vis-selected { + background-color: white; + border-color: black; + color: black; + box-shadow: 0 0 10px gray; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> +<body> +<p>This page demonstrates the Timeline with custom css classes for individual items.</p> + +<div id="mytimeline"></div> + +<script type="text/javascript"> + // create data + // note that months are zero-based in the JavaScript Date object + var data = new vis.DataSet([ + { + 'start': new Date(2012,7,19), + 'content': 'default' + }, + { + 'start': new Date(2012,7,23), + 'content': 'green', + 'className': 'green' + }, + { + 'start': new Date(2012,7,29), + 'content': 'red', + 'className': 'red' + }, + { + 'start': new Date(2012,7,27), + 'end': new Date(2012,8,1), + 'content': 'orange', + 'className': 'orange' + }, + { + 'start': new Date(2012,8,2), + 'content': 'magenta', + 'className': 'magenta' + } + ]); + + // specify options + var options = { + editable: true + }; + + // create the timeline + var container = document.getElementById('mytimeline'); + timeline = new vis.Timeline(container, data, options); + +</script> +</body> +</html> diff --git a/www/lib/vis/examples/timeline/styling/itemTemplates.html b/www/lib/vis/examples/timeline/styling/itemTemplates.html new file mode 100644 index 00000000..13e43c46 --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/itemTemplates.html @@ -0,0 +1,251 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Templates</title> + + <!-- load handlebars for templating, and create a template --> + <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> + <script id="item-template" type="text/x-handlebars-template"> + <table class="score"> + <tr> + <td colspan="3" class="description">{{description}}</td> + </tr> + <tr> + <td>{{player1}}</td> + <th>{{score1}} - {{score2}}</th> + <td>{{player2}}</td> + </tr> + <tr> + <td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td> + <th></th> + <td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td> + </tr> + </table> + </script> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + body, html { + font-family: sans-serif; + font-size: 10pt; + } + + .vis.timeline .item { + border-color: #acacac; + background-color: #efefef; + box-shadow: 5px 5px 10px rgba(128,128,128, 0.3); + } + + table .description { + font-style: italic; + } + + #visualization { + position: relative; + overflow: hidden; + } + + .logo { + position: absolute; + right: 10px; + top: 10px; + } + .logo img { + width: 120px; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> +<body> +<h1>WK 2014</h1> +<p style="max-width: 600px;"> + This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item. +</p> + +<div id="visualization"> + <div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div> +</div> + +<script type="text/javascript"> + // create a handlebars template + var source = document.getElementById('item-template').innerHTML; + var template = Handlebars.compile(document.getElementById('item-template').innerHTML); + + // 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([ + // round of 16 + { + player1: 'Brazil', + abbr1: 'br', + score1: '1 (3)', + player2: 'Chile', + abbr2: 'cl', + score2: '1 (2)', + description: 'round of 16', + start: '2014-06-28 13:00' + }, + { + player1: 'Colombia', + abbr1: 'co', + score1: 2, + player2: 'Uruguay', + abbr2: 'uy', + score2: 0, + description: 'round of 16', + start: '2014-06-28 17:00' + }, + { + player1: 'Netherlands', + abbr1: 'nl', + score1: 2, + player2: 'Mexico', + abbr2: 'mx', + score2: 1, + description: 'round of 16', + start: '2014-06-29 13:00' + }, + { + player1: 'Costa Rica', + abbr1: 'cr', + score1: '1 (5)', + player2: 'Greece', + abbr2: 'gr', + score2: '1 (3)', + description: 'round of 16', + start: '2014-06-29 17:00' + }, + { + player1: 'France', + abbr1: 'fr', + score1: 2, + player2: 'Nigeria', + abbr2: 'ng', + score2: 0, + description: 'round of 16', + start: '2014-06-30 13:00' + }, + { + player1: 'Germany', + abbr1: 'de', + score1: 2, + player2: 'Algeria', + abbr2: 'dz', + score2: 1, + description: 'round of 16', + start: '2014-06-30 17:00' + }, + { + player1: 'Argentina', + abbr1: 'ar', + score1: 1, + player2: 'Switzerland', + abbr2: 'ch', + score2: 0, + description: 'round of 16', + start: '2014-07-01 13:00' + }, + { + player1: 'Belgium', + abbr1: 'be', + score1: 2, + player2: 'USA', + abbr2: 'us', + score2: 1, + description: 'round of 16', + start: '2014-07-01 17:00' + }, + + // quarter-finals + { + player1: 'France', + abbr1: 'fr', + score1: 0, + player2: 'Germany', + abbr2: 'de', + score2: 1, + description: 'quarter-finals', + start: '2014-07-04 13:00' + }, + { + player1: 'Brazil', + abbr1: 'br', + score1: 2, + player2: 'Colombia', + abbr2: 'co', + score2: 1, + description: 'quarter-finals', + start: '2014-07-04 17:00' + }, + { + player1: 'Argentina', + abbr1: 'ar', + score1: 1, + player2: 'Belgium', + abbr2: 'be', + score2: 0, + description: 'quarter-finals', + start: '2014-07-05 13:00' + }, + { + player1: 'Netherlands', + abbr1: 'nl', + score1: '0 (4)', + player2: 'Costa Rica', + abbr2: 'cr', + score2: '0 (3)', + description: 'quarter-finals', + start: '2014-07-05 17:00' + }, + + // semi-finals + { + player1: 'Brazil', + abbr1: 'br', + score1: 1, + player2: 'Germany', + abbr2: 'de', + score2: 7, + description: 'semi-finals', + start: '2014-07-08 17:00' + }, + { + player1: 'Netherlands', + abbr1: 'nl', + score1: '0 (2)', + player2: 'Argentina', + abbr2: 'ar', + score2: '0 (4)', + description: 'semi-finals', + start: '2014-07-09 17:00' + }, + + // final + { + player1: 'Germany', + score1: 1, + abbr1: 'de', + player2: 'Argentina', + abbr2: 'ar', + score2: 0, + description: 'final', + start: '2014-07-13 16:00' + } + ]); + + // Configuration for the Timeline + var options = { + // specify a template for the items + template: template + }; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); +</script> +</body> +</html>
\ No newline at end of file |