vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

77 lines
2.0 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Item ordering</title>
  5. <style type="text/css">
  6. body, html {
  7. font-family: sans-serif;
  8. }
  9. p {
  10. max-width: 800px;
  11. }
  12. </style>
  13. <script src="../../dist/vis.js"></script>
  14. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  15. </head>
  16. <body>
  17. <h1>Item ordering</h1>
  18. <p>
  19. By default, the items displayed on the Timeline are unordered. They are
  20. stacked in the order that they where loaded. This means that way items are
  21. stacked can change while moving and zooming the Timeline.
  22. </p>
  23. <p>
  24. To display and stack the items in a controlled order, you can provide a
  25. custom sorting function via the configuration option <code>order</code>.
  26. This is only suitable for relatively small amounts of items, as it forces
  27. the Timeline to order and re-stack all items with every redraw.
  28. </p>
  29. <p>
  30. <label for="ordering"><input type="checkbox" id="ordering" checked/> Apply custom ordering. Order items by their id.</label>
  31. </p>
  32. <div id="visualization"></div>
  33. <script type="text/javascript">
  34. // DOM element where the Timeline will be attached
  35. var container = document.getElementById('visualization');
  36. // Create a DataSet (allows two way data-binding)
  37. var items = new vis.DataSet();
  38. var date = vis.moment('2015-03-02');
  39. for (var i = 0; i < 20; i++) {
  40. date.add(Math.round(Math.random() * 2), 'hour');
  41. items.add({
  42. id: i,
  43. content: 'Item ' + i,
  44. start: date.clone(),
  45. end: date.clone().add(2 + Math.round(Math.random() * 2), 'hour')
  46. });
  47. }
  48. function customOrder (a, b) {
  49. // order by id
  50. return a.id - b.id;
  51. }
  52. // Configuration for the Timeline
  53. var options = {
  54. order: customOrder,
  55. editable: true,
  56. margin: {item: 0}
  57. };
  58. // Create a Timeline
  59. var timeline = new vis.Timeline(container, items, options);
  60. var ordering = document.getElementById('ordering');
  61. ordering.onchange = function () {
  62. timeline.setOptions({
  63. order: ordering.checked ? customOrder: null
  64. });
  65. };
  66. </script>
  67. </body>
  68. </html>