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.

81 lines
2.1 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-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  15. <script src="../../googleAnalytics.js"></script>
  16. </head>
  17. <body>
  18. <h1>Item ordering</h1>
  19. <p>
  20. By default, the items displayed on the Timeline are unordered. They are
  21. stacked in the order that they where loaded. This means that way items are
  22. stacked can change while moving and zooming the Timeline.
  23. </p>
  24. <p>
  25. To display and stack the items in a controlled order, you can provide a
  26. custom sorting function via the configuration option <code>order</code>.
  27. </p>
  28. <p>
  29. WARNING: Custom ordering is only suitable for small amounts of items (up to a few
  30. hundred), as the Timeline has to render <i>all</i> items once on load to
  31. determine their width and height.
  32. </p>
  33. <p>
  34. <label for="ordering"><input type="checkbox" id="ordering" checked/> Apply custom ordering. Order items by their id.</label>
  35. </p>
  36. <div id="visualization"></div>
  37. <script type="text/javascript">
  38. // DOM element where the Timeline will be attached
  39. var container = document.getElementById('visualization');
  40. // Create a DataSet (allows two way data-binding)
  41. var items = new vis.DataSet();
  42. var date = vis.moment('2015-03-02');
  43. for (var i = 0; i < 100; i++) {
  44. date.add(Math.round(Math.random() * 2), 'hour');
  45. items.add({
  46. id: i,
  47. content: 'Item ' + i,
  48. start: date.clone(),
  49. end: date.clone().add(4, 'hour')
  50. });
  51. }
  52. function customOrder (a, b) {
  53. // order by id
  54. return a.id - b.id;
  55. }
  56. // Configuration for the Timeline
  57. var options = {
  58. order: customOrder,
  59. editable: true,
  60. margin: {item: 0}
  61. };
  62. // Create a Timeline
  63. var timeline = new vis.Timeline(container, items, options);
  64. var ordering = document.getElementById('ordering');
  65. ordering.onchange = function () {
  66. timeline.setOptions({
  67. order: ordering.checked ? customOrder: null
  68. });
  69. };
  70. </script>
  71. </body>
  72. </html>