diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/styling')
5 files changed, 0 insertions, 598 deletions
diff --git a/www/lib/vis/examples/timeline/styling/axisOrientation.html b/www/lib/vis/examples/timeline/styling/axisOrientation.html deleted file mode 100644 index b3978f17..00000000 --- a/www/lib/vis/examples/timeline/styling/axisOrientation.html +++ /dev/null @@ -1,76 +0,0 @@ -<!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 deleted file mode 100644 index ed700a1d..00000000 --- a/www/lib/vis/examples/timeline/styling/customCss.html +++ /dev/null @@ -1,100 +0,0 @@ -<!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 deleted file mode 100644 index 9fec28b2..00000000 --- a/www/lib/vis/examples/timeline/styling/gridStyling.html +++ /dev/null @@ -1,54 +0,0 @@ -<!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 deleted file mode 100755 index 62433484..00000000 --- a/www/lib/vis/examples/timeline/styling/itemClassNames.html +++ /dev/null @@ -1,117 +0,0 @@ -<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 deleted file mode 100644 index 13e43c46..00000000 --- a/www/lib/vis/examples/timeline/styling/itemTemplates.html +++ /dev/null @@ -1,251 +0,0 @@ -<!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 |