jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Reorganized the Timeline examples

flowchartTest
jos 9 years ago
parent
f685d62e90
commit
c5badc241f
52 changed files with 224 additions and 116 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -0
      examples/timeline/basicUsage.html
  2. +3
    -3
      examples/timeline/dataHandling/dataSerialization.html
  3. +4
    -4
      examples/timeline/dataHandling/loadExternalData.html
  4. +3
    -3
      examples/timeline/editing/customSnappingOfItems.html
  5. +9
    -4
      examples/timeline/editing/editingItems.html
  6. +3
    -3
      examples/timeline/editing/editingItemsCallbacks.html
  7. +4
    -4
      examples/timeline/editing/updateDataOnEvent.html
  8. +3
    -3
      examples/timeline/groups/groups.html
  9. +3
    -3
      examples/timeline/groups/groupsOrdering.html
  10. +3
    -3
      examples/timeline/groups/subgroups.html
  11. +3
    -3
      examples/timeline/interaction/animateWindow.html
  12. +3
    -3
      examples/timeline/interaction/clickToUse.html
  13. +3
    -3
      examples/timeline/interaction/eventListeners.html
  14. +3
    -3
      examples/timeline/interaction/limitMoveAndZoom.html
  15. +3
    -3
      examples/timeline/interaction/navigationMenu.html
  16. +3
    -3
      examples/timeline/interaction/setSelection.html
  17. +3
    -3
      examples/timeline/items/backgroundAreas.html
  18. +3
    -3
      examples/timeline/items/backgroundAreasWithGroups.html
  19. +4
    -4
      examples/timeline/items/htmlContents.html
  20. +3
    -3
      examples/timeline/items/itemOrdering.html
  21. +3
    -3
      examples/timeline/items/pointItems.html
  22. +3
    -3
      examples/timeline/items/rangeOverflowItem.html
  23. +3
    -3
      examples/timeline/other/customTimeBars.html
  24. +3
    -3
      examples/timeline/other/dataAttributes.html
  25. +3
    -3
      examples/timeline/other/dataAttributesAll.html
  26. +3
    -3
      examples/timeline/other/groupsPerformance.html
  27. +4
    -4
      examples/timeline/other/hidingPeriods.html
  28. +3
    -3
      examples/timeline/other/localization.html
  29. +3
    -3
      examples/timeline/other/performance.html
  30. +17
    -0
      examples/timeline/other/requirejs/requirejs_example.html
  31. +1
    -1
      examples/timeline/other/requirejs/scripts/main.js
  32. +0
    -0
      examples/timeline/other/requirejs/scripts/require.js
  33. +0
    -14
      examples/timeline/requirejs/requirejs_example.html
  34. +0
    -0
      examples/timeline/resources/data/basic.json
  35. +0
    -0
      examples/timeline/resources/data/wk2014.json
  36. +0
    -0
      examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png
  37. +0
    -0
      examples/timeline/resources/img/attachment-icon.png
  38. +0
    -0
      examples/timeline/resources/img/blog-post-edit-icon.png
  39. +0
    -0
      examples/timeline/resources/img/comments-icon.png
  40. +0
    -0
      examples/timeline/resources/img/community-users-icon.png
  41. +0
    -0
      examples/timeline/resources/img/license.txt
  42. +0
    -0
      examples/timeline/resources/img/license_aesthetica-2.txt
  43. +0
    -0
      examples/timeline/resources/img/license_refresh-cl.txt
  44. +0
    -0
      examples/timeline/resources/img/mail-icon.png
  45. +0
    -0
      examples/timeline/resources/img/notes-edit-icon.png
  46. +0
    -0
      examples/timeline/resources/img/product-icon.png
  47. +0
    -0
      examples/timeline/resources/img/truck-icon.png
  48. +3
    -3
      examples/timeline/styling/axisOrientation.html
  49. +100
    -0
      examples/timeline/styling/customCss.html
  50. +3
    -3
      examples/timeline/styling/gridStyling.html
  51. +3
    -3
      examples/timeline/styling/itemClassNames.html
  52. +3
    -3
      examples/timeline/styling/itemTemplates.html

examples/timeline/01_basic.html → examples/timeline/basicUsage.html View File


examples/timeline/17_data_serialization.html → examples/timeline/dataHandling/dataSerialization.html View File

@ -23,9 +23,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>

examples/timeline/26_load_external_data.html → examples/timeline/dataHandling/loadExternalData.html View File

@ -12,9 +12,9 @@
<!-- Load jquery for ajax support --> <!-- Load jquery for ajax support -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>
@ -26,7 +26,7 @@
<script type="text/javascript"> <script type="text/javascript">
// load data via an ajax request. When the data is in, load the timeline // load data via an ajax request. When the data is in, load the timeline
$.ajax({ $.ajax({
url: 'data/basic.json',
url: '../resources/data/basic.json',
success: function (data) { success: function (data) {
// hide the "loading..." message // hide the "loading..." message
document.getElementById('loading').style.display = 'none'; document.getElementById('loading').style.display = 'none';

examples/timeline/33_custom_snapping.html → examples/timeline/editing/customSnappingOfItems.html View File

@ -3,9 +3,9 @@
<head> <head>
<title>Timeline | Custom snapping</title> <title>Timeline | Custom snapping</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/02_manipulation.html → examples/timeline/editing/editingItems.html View File

@ -10,13 +10,13 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p>An editable timeline allows to drag items around, create new items, and remove items.</p>
<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p>
<div id="visualization"></div> <div id="visualization"></div>
@ -39,6 +39,11 @@
{id: 6, content: 'item 6', start: '2014-01-26'} {id: 6, content: 'item 6', start: '2014-01-26'}
]); ]);
// log changes to the console
items.on('*', function (event, properties) {
console.log(event, properties.items);
});
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var options = { var options = {
start: '2014-01-10', start: '2014-01-10',

examples/timeline/08_manipulation_callbacks.html → examples/timeline/editing/editingItemsCallbacks.html View File

@ -10,9 +10,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p style="max-width: 800px;"> <p style="max-width: 800px;">

examples/timeline/13_past_and_future.html → examples/timeline/editing/updateDataOnEvent.html View File

@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>Timeline | Past and future</title>
<title>Timeline | Update data on event</title>
<style type="text/css"> <style type="text/css">
body { body {
@ -13,9 +13,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>

examples/timeline/05_groups.html → examples/timeline/groups/groups.html View File

@ -19,9 +19,9 @@
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js --> <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/09_groups_ordering.html → examples/timeline/groups/groupsOrdering.html View File

@ -16,9 +16,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/30_subgroups.html → examples/timeline/groups/subgroups.html View File

@ -20,9 +20,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>

examples/timeline/22_animate_window.html → examples/timeline/interaction/animateWindow.html View File

@ -13,9 +13,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>

examples/timeline/20_click_to_use.html → examples/timeline/interaction/clickToUse.html View File

@ -17,9 +17,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<div id="main"> <div id="main">

examples/timeline/06_event_listeners.html → examples/timeline/interaction/eventListeners.html View File

@ -9,9 +9,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/10_limit_move_and_zoom.html → examples/timeline/interaction/limitMoveAndZoom.html View File

@ -10,9 +10,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/16_navigation_menu.html → examples/timeline/interaction/navigationMenu.html View File

@ -22,9 +22,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>

examples/timeline/21_set_selection.html → examples/timeline/interaction/setSelection.html View File

@ -10,9 +10,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<h1>Set selection</h1> <h1>Set selection</h1>

examples/timeline/25_background_areas.html → examples/timeline/items/backgroundAreas.html View File

@ -14,9 +14,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>

examples/timeline/31_background_areas_with_groups.html → examples/timeline/items/backgroundAreasWithGroups.html View File

@ -10,9 +10,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>

examples/timeline/04_html_data.html → examples/timeline/items/htmlContents.html View File

@ -16,10 +16,10 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>
@ -53,7 +53,7 @@
img5.style.height = '48px'; img5.style.height = '48px';
item5.appendChild(img5); item5.appendChild(img5);
var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
var item6 = 'item6<br><img src="../resources/img/comments-icon.png" style="width: 48px; height: 48px;">';
var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>'; var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>';

examples/timeline/28_item_ordering.html → examples/timeline/items/itemOrdering.html View File

@ -12,10 +12,10 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<h1>Item ordering</h1> <h1>Item ordering</h1>

examples/timeline/11_point_items.html → examples/timeline/items/pointItems.html View File

@ -9,9 +9,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<h1>World War II timeline</h1> <h1>World War II timeline</h1>

examples/timeline/18_range_overflow.html → examples/timeline/items/rangeOverflowItem.html View File

@ -3,8 +3,8 @@
<head> <head>
<title>Timeline | Range overflow</title> <title>Timeline | Range overflow</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
body, html { body, html {
@ -16,7 +16,7 @@
} }
</style> </style>
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/07_custom_time_bars.html → examples/timeline/other/customTimeBars.html View File

@ -10,9 +10,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>

examples/timeline/23_data_attributes.html → examples/timeline/other/dataAttributes.html View File

@ -9,9 +9,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/24_all_data_attributes.html → examples/timeline/other/dataAttributesAll.html View File

@ -9,9 +9,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/14_performance_of_groups.html → examples/timeline/other/groupsPerformance.html View File

@ -2,8 +2,8 @@
<head> <head>
<title>Timeline | A lot of grouped data</title> <title>Timeline | A lot of grouped data</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
body { body {
@ -11,7 +11,7 @@
font: 10pt arial; font: 10pt arial;
} }
</style> </style>
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body onresize="/*timeline.checkResize();*/"> <body onresize="/*timeline.checkResize();*/">

examples/timeline/29_hiding_periods.html → examples/timeline/other/hidingPeriods.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Timeline | Hiding times demo</title>
<title>Timeline | Hiding periods</title>
<style type="text/css"> <style type="text/css">
body, html { body, html {
@ -9,9 +9,9 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/19_localization.html → examples/timeline/other/localization.html View File

@ -11,9 +11,9 @@
</style> </style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

examples/timeline/03_performance.html → examples/timeline/other/performance.html View File

@ -13,9 +13,9 @@
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js --> <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

+ 17
- 0
examples/timeline/other/requirejs/requirejs_example.html View File

@ -0,0 +1,17 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline require.js demo</title>
<script data-main="scripts/main" src="scripts/require.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
<p>
This example shows how to load the vis.js library using require.js.
</p>
<div id="visualization"></div>
</body>
</html>

examples/timeline/requirejs/scripts/main.js → examples/timeline/other/requirejs/scripts/main.js View File

@ -1,6 +1,6 @@
require.config({ require.config({
paths: { paths: {
vis: '../../../../dist/vis'
vis: '../../../../../dist/vis'
} }
}); });

examples/timeline/requirejs/scripts/require.js → examples/timeline/other/requirejs/scripts/require.js View File


+ 0
- 14
examples/timeline/requirejs/requirejs_example.html View File

@ -1,14 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline requirejs demo</title>
<script data-main="scripts/main" src="scripts/require.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<div id="visualization"></div>
</body>
</html>

examples/timeline/data/basic.json → examples/timeline/resources/data/basic.json View File


examples/timeline/data/wk2014.json → examples/timeline/resources/data/wk2014.json View File


examples/timeline/img/Hardware-Mobile-Phone-icon.png → examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png View File


examples/timeline/img/attachment-icon.png → examples/timeline/resources/img/attachment-icon.png View File


examples/timeline/img/blog-post-edit-icon.png → examples/timeline/resources/img/blog-post-edit-icon.png View File


examples/timeline/img/comments-icon.png → examples/timeline/resources/img/comments-icon.png View File


examples/timeline/img/community-users-icon.png → examples/timeline/resources/img/community-users-icon.png View File


examples/timeline/img/license.txt → examples/timeline/resources/img/license.txt View File


examples/timeline/img/license_aesthetica-2.txt → examples/timeline/resources/img/license_aesthetica-2.txt View File


examples/timeline/img/license_refresh-cl.txt → examples/timeline/resources/img/license_refresh-cl.txt View File


examples/timeline/img/mail-icon.png → examples/timeline/resources/img/mail-icon.png View File


examples/timeline/img/notes-edit-icon.png → examples/timeline/resources/img/notes-edit-icon.png View File


examples/timeline/img/product-icon.png → examples/timeline/resources/img/product-icon.png View File


examples/timeline/img/truck-icon.png → examples/timeline/resources/img/truck-icon.png View File


examples/timeline/34_orientation.html → examples/timeline/styling/axisOrientation.html View File

@ -9,10 +9,10 @@
} }
</style> </style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>

+ 100
- 0
examples/timeline/styling/customCss.html View File

@ -0,0 +1,100 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Custom styling</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.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>

examples/timeline/32_grid_styling.html → examples/timeline/styling/gridStyling.html View File

@ -3,8 +3,8 @@
<head> <head>
<title>Timeline | Grid styling</title> <title>Timeline | Grid styling</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
body, html { body, html {
@ -26,7 +26,7 @@
color: white; color: white;
} }
</style> </style>
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<div id="visualization"></div> <div id="visualization"></div>

examples/timeline/15_item_class_names.html → examples/timeline/styling/itemClassNames.html View File

@ -2,8 +2,8 @@
<head> <head>
<title>Timeline | Item class names</title> <title>Timeline | Item class names</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
body, input { body, input {
@ -65,7 +65,7 @@
} }
</style> </style>
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p>This page demonstrates the Timeline with custom css classes for individual items.</p> <p>This page demonstrates the Timeline with custom css classes for individual items.</p>

examples/timeline/27_templates.html → examples/timeline/styling/itemTemplates.html View File

@ -23,8 +23,8 @@
</table> </table>
</script> </script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
body, html { body, html {
@ -57,7 +57,7 @@
} }
</style> </style>
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<h1>WK 2014</h1> <h1>WK 2014</h1>

Write Preview
Loading…
Cancel
Save