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

Reviewed/updated all timeline examples

flowchartTest
jos 9 years ago
parent
4fc9ffb476
commit
0c9703016c
38 changed files with 133 additions and 68 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -1
      docs/network/new_network.html
  2. +1
    -1
      docs/timeline.html
  3. +1
    -1
      examples/network/02_random_nodes.html
  4. +7
    -1
      examples/timeline/01_basic.html
  5. +4
    -4
      examples/timeline/02_manipulation.html
  6. +6
    -5
      examples/timeline/03_performance.html
  7. +3
    -2
      examples/timeline/04_html_data.html
  8. +2
    -1
      examples/timeline/05_groups.html
  9. +5
    -1
      examples/timeline/06_event_listeners.html
  10. +17
    -7
      examples/timeline/07_custom_time_bars.html
  11. +4
    -3
      examples/timeline/08_manipulation_callbacks.html
  12. +4
    -3
      examples/timeline/09_groups_ordering.html
  13. +2
    -1
      examples/timeline/10_limit_move_and_zoom.html
  14. +3
    -2
      examples/timeline/11_point_items.html
  15. +9
    -1
      examples/timeline/12_custom_styling.html
  16. +2
    -1
      examples/timeline/13_past_and_future.html
  17. +2
    -1
      examples/timeline/14_performance_of_groups.html
  18. +2
    -1
      examples/timeline/15_item_class_names.html
  19. +7
    -1
      examples/timeline/16_navigation_menu.html
  20. +2
    -1
      examples/timeline/17_data_serialization.html
  21. +2
    -1
      examples/timeline/18_range_overflow.html
  22. +2
    -1
      examples/timeline/19_localization.html
  23. +2
    -1
      examples/timeline/20_click_to_use.html
  24. +2
    -1
      examples/timeline/21_set_selection.html
  25. +4
    -3
      examples/timeline/22_animate_window.html
  26. +2
    -1
      examples/timeline/23_data_attributes.html
  27. +2
    -1
      examples/timeline/24_all_data_attributes.html
  28. +2
    -1
      examples/timeline/25_background_areas.html
  29. +2
    -2
      examples/timeline/26_load_external_data.html
  30. +2
    -1
      examples/timeline/27_templates.html
  31. +2
    -0
      examples/timeline/28_item_ordering.html
  32. +5
    -1
      examples/timeline/29_hiding_periods.html
  33. +2
    -1
      examples/timeline/30_subgroups.html
  34. +2
    -1
      examples/timeline/31_background_areas_with_groups.html
  35. +2
    -1
      examples/timeline/32_grid_styling.html
  36. +2
    -1
      examples/timeline/33_custom_snapping.html
  37. +11
    -10
      examples/timeline/index.html
  38. +2
    -1
      examples/timeline/requirejs/requirejs_example.html

+ 0
- 1
docs/network/new_network.html View File

@ -20,7 +20,6 @@
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="../js/smooth-scroll.min.js"></script>
<script src="../js/googleAnalytics.js"></script>
<script language="JavaScript">

+ 1
- 1
docs/timeline.html View File

@ -1286,7 +1286,7 @@ var options = {
};
</pre>
A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>.
A full example is available here: <a href="../examples/timeline/08_manipulation_callbacks.html">08_edit_items.html</a>.
<h2 id="Templates">Templates</h2>

+ 1
- 1
examples/network/02_random_nodes.html View File

@ -93,7 +93,7 @@
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
Generate a random network with nodes and edges.

+ 7
- 1
examples/timeline/01_basic.html View File

@ -11,8 +11,14 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
A basic timeline. You can move and zoom the timeline, and select items.
</p>
<div id="visualization"></div>
<script type="text/javascript">

examples/timeline/02_interactive.html → examples/timeline/02_manipulation.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Interactive example</title>
<title>Timeline | Manipulation example</title>
<style>
body, html {
@ -12,10 +12,11 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>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.</p>
<div id="visualization"></div>
@ -42,7 +43,6 @@
var options = {
start: '2014-01-10',
end: '2014-02-10',
orientation: 'top',
height: '300px',
editable: true,

+ 6
- 5
examples/timeline/03_performance.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | a lot of data</title>
<title>Timeline | performance</title>
<style>
body, html {
@ -15,11 +15,12 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h1>
Test with a lot of data
</h1>
<p>
Test the performance with a lot of items. The Timeline can load hundreds of thousands of items, but the performance of rendering them in the browser is limited. Rendering typically runs smooth for up to a few hundreds of items at once (you can set a <code>zoomMax</code> to prevent the user from zooming out too far).
</p>
<p>
<label for="count">Number of items</label>
<input id="count" value="10000">

+ 3
- 2
examples/timeline/04_html_data.html View File

@ -19,10 +19,11 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
Load HTML contents in the Timeline
Load HTML contents in the Timeline in various ways.
</p>
<div id="visualization"></div>

+ 2
- 1
examples/timeline/05_groups.html View File

@ -21,7 +21,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
This example demonstrate using groups. Note that a DataSet is used for both

+ 5
- 1
examples/timeline/06_event_listeners.html View File

@ -11,8 +11,12 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
This example listens for events <code>select</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline, and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
</p>
<div id="visualization"></div>
<p></p>
<div id="log"></div>

+ 17
- 7
examples/timeline/07_custom_time_bars.html View File

@ -12,9 +12,13 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
The Timeline has functions to add multiple custom time bars which can be dragged by the user.
</p>
<p>
<input type="button" id="add" value="Add custom vertical bar">
<input type="text" id="barId" placeholder="custom bar ID">
@ -24,10 +28,10 @@
<input type="text" id="barIndex" value="1" placeholder="custom bar ID">
</p>
<p>
<code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span>. Time: <span id="timechangeEvent"></span>
<code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> bar index: <span id="timechangedBar"></span>. Time: <span id="timechangedEvent"></span>
<code><strong>timechanged</strong></code> event, index: <span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
</p><br>
<div id="visualization"></div>
@ -48,10 +52,16 @@
timeline.addCustomTime(customDate, '1');
document.getElementById('add').onclick = function () {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
var barId = document.getElementById('barId').value || undefined;
timeline.addCustomTime(customDate, barId);
document.getElementById('barId').value = '';
try {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
var barId = document.getElementById('barId').value || undefined;
timeline.addCustomTime(customDate, barId);
document.getElementById('barId').value = '';
}
catch (err) {
console.log(err);
alert(err);
}
};
document.getElementById('remove').onclick = function () {

examples/timeline/08_edit_items.html → examples/timeline/08_manipulation_callbacks.html View File

@ -1,18 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Edit items</title>
<title>Timeline | Manipulation callbacks</title>
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 12pt;
font-size: 11pt;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p style="max-width: 800px;">
This example shows how to use callback functions <code>onAdd</code>, <code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and <code>onRemove</code>. The <code>onMoving</code> function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions.

examples/timeline/09_order_groups.html → examples/timeline/09_groups_ordering.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Order groups</title>
<title>Timeline | Groups ordering</title>
<style>
body, html {
@ -18,10 +18,11 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
This example demonstrate custom ordering of groups.
This example demonstrates custom ordering of groups.
</p>
<div id="visualization"></div>

+ 2
- 1
examples/timeline/10_limit_move_and_zoom.html View File

@ -12,7 +12,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
The visible range is limited in this demo:

examples/timeline/11_points.html → examples/timeline/11_point_items.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Points</title>
<title>Timeline | Point items</title>
<style type="text/css">
body {
@ -11,7 +11,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h1>World War II timeline</h1>
<p>Source: <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a></p>

+ 9
- 1
examples/timeline/12_custom_styling.html View File

@ -7,6 +7,10 @@
<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;
@ -58,9 +62,13 @@
}
</style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<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">

+ 2
- 1
examples/timeline/13_past_and_future.html View File

@ -15,7 +15,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p style="width: 600px;">

examples/timeline/14_group_performance.html → examples/timeline/14_performance_of_groups.html View File

@ -11,7 +11,8 @@
font: 10pt arial;
}
</style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body onresize="/*timeline.checkResize();*/">
<h1>Timeline grouping performance</h1>

+ 2
- 1
examples/timeline/15_item_class_names.html View File

@ -65,7 +65,8 @@
}
</style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>This page demonstrates the Timeline with custom css classes for individual items.</p>

+ 7
- 1
examples/timeline/16_navigation_menu.html View File

@ -24,8 +24,14 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
Create your own navigation menu by creating an overlay with buttons to zoom and move.
</p>
<div id="visualization">
<div class="menu">
<input type="button" id="zoomIn" value="Zoom in"/>

+ 2
- 1
examples/timeline/17_data_serialization.html View File

@ -25,7 +25,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h1>Serialization and deserialization</h1>

+ 2
- 1
examples/timeline/18_range_overflow.html View File

@ -16,7 +16,8 @@
}
</style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:

+ 2
- 1
examples/timeline/19_localization.html View File

@ -13,7 +13,8 @@
<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>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.

+ 2
- 1
examples/timeline/20_click_to_use.html View File

@ -19,7 +19,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<div id="main">
<h1>Timeline click to use</h1>

+ 2
- 1
examples/timeline/21_set_selection.html View File

@ -12,7 +12,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h1>Set selection</h1>
<p style="max-width: 600px;">

examples/timeline/22_window_adjustment.html → examples/timeline/22_animate_window.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Adjusting window</title>
<title>Timeline | Animate window</title>
<style>
body, html {
@ -15,10 +15,11 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>This example demonstrates functions to adjust the visible window of the Timeline.</p>
<p>This example demonstrates functions to programmatically adjust the visible window of the Timeline.</p>
<p>
<input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01"><br>

+ 2
- 1
examples/timeline/23_data_attributes.html View File

@ -11,7 +11,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
In this example all items get an HTML attribute attached: each item gets an attribute <code>data-id</code>, and items 1 and 6 have an additional attribute <code>data-tooltip</code>.

+ 2
- 1
examples/timeline/24_all_data_attributes.html View File

@ -11,7 +11,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
In this example all items get HTML attributes attached: each item gets <code>data-?</code> attributes for each field defined on the JS object.

+ 2
- 1
examples/timeline/25_background_areas.html View File

@ -16,7 +16,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p>

examples/timeline/26_external_data.html → examples/timeline/26_load_external_data.html View File

@ -14,9 +14,9 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h1>Load external data</h1>
<p>
This demo shows how to load external data via an ajax call.
</p>

+ 2
- 1
examples/timeline/27_templates.html View File

@ -57,7 +57,8 @@
}
</style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h1>WK 2014</h1>
<p style="max-width: 600px;">

examples/timeline/35_item_ordering.html → examples/timeline/28_item_ordering.html View File

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

examples/timeline/29_hiding_times.html → examples/timeline/29_hiding_periods.html View File

@ -11,8 +11,12 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
It's possible to hide (recurring) periods from the Timeline. The following example hides weekends and nights.
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached

+ 2
- 1
examples/timeline/30_subgroups.html View File

@ -22,7 +22,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</p>

+ 2
- 1
examples/timeline/31_background_areas_with_groups.html View File

@ -12,7 +12,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>This example demonstrates the item type "background" when using groups.</p>

+ 2
- 1
examples/timeline/32_grid_styling.html View File

@ -26,7 +26,8 @@
color: white;
}
</style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<div id="visualization"></div>

+ 2
- 1
examples/timeline/33_custom_snapping.html View File

@ -5,7 +5,8 @@
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
When moving the items in on the Timeline below, they will snap to full hours,

+ 11
- 10
examples/timeline/index.html View File

@ -5,7 +5,8 @@
<title>vis.js | timeline examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<div id="container">
@ -13,19 +14,19 @@
<h1>vis.js timeline examples</h1>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_interactive.html">02_dataset.html</a></p>
<p><a href="02_manipulation.html">02_manipulation.html</a></p>
<p><a href="03_performance.html">03_performance.html</a></p>
<p><a href="04_html_data.html">04_html_data.html</a></p>
<p><a href="05_groups.html">05_groups.html</a></p>
<p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
<p><a href="07_custom_time_bars.html">07_custom_time_bars.html</a></p>
<p><a href="08_edit_items.html">08_edit_items.html</a></p>
<p><a href="09_order_groups.html">09_order_groups.html</a></p>
<p><a href="08_manipulation_callbacks.html">08_manipulation_callbacks.html</a></p>
<p><a href="09_groups_ordering.html">09_groups_ordering.html</a></p>
<p><a href="10_limit_move_and_zoom.html">10_limit_range_and_zoom.html</a></p>
<p><a href="11_points.html">11_points.html</a></p>
<p><a href="11_point_items.html">11_point_items.html</a></p>
<p><a href="12_custom_styling.html">12_custom_styling.html</a></p>
<p><a href="13_past_and_future.html">13_past_and_future.html</a></p>
<p><a href="14_group_performance.html">14_group_performance.html</a></p>
<p><a href="14_performance_of_groups.html">14_performance_of_groups.html</a></p>
<p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
<p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
<p><a href="17_data_serialization.html">17_data_serialization.html</a></p>
@ -33,18 +34,18 @@
<p><a href="19_localization.html">19_localization.html</a></p>
<p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
<p><a href="21_set_selection.html">21_set_selection.html</a></p>
<p><a href="22_window_adjustment.html">22_window_adjustment.html</a></p>
<p><a href="22_animate_window.html">22_animate_window.html</a></p>
<p><a href="23_data_attributes.html">23_data_attributes.html</a></p>
<p><a href="24_all_data_attributes.html">24_all_data_attributes.html</a></p>
<p><a href="25_background_areas.html">25_background_areas.html</a></p>
<p><a href="26_external_data.html">26_external_data.html</a></p>
<p><a href="26_load_external_data.html">26_load_external_data.html</a></p>
<p><a href="27_templates.html">27_templates.html</a></p>
<p><a href="29_hiding_times.html">29_hiding_times.html</a></p>
<p><a href="28_item_ordering.html">28_item_ordering.html</a></p>
<p><a href="29_hiding_periods.html">29_hiding_periods.html</a></p>
<p><a href="30_subgroups.html">30_subgroups.html</a></p>
<p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p>
<p><a href="32_grid_styling.html">32_grid_styling.html</a></p>
<p><a href="33_custom_snapping.html">33_custom_snapping.html</a></p>
<p><a href="35_item_ordering.html">35_item_ordering.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
</div>

+ 2
- 1
examples/timeline/requirejs/requirejs_example.html View File

@ -6,7 +6,8 @@
<script data-main="scripts/main" src="scripts/require.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<div id="visualization"></div>
</body>

Write Preview
Loading…
Cancel
Save