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.

57 lines
1.3 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Group example</title>
  5. <style>
  6. body, html {
  7. font-family: arial, sans-serif;
  8. font-size: 11pt;
  9. }
  10. #visualization {
  11. box-sizing: border-box;
  12. width: 100%;
  13. height: 300px;
  14. }
  15. </style>
  16. <script src="../../vis.js"></script>
  17. </head>
  18. <body>
  19. <div id="visualization"></div>
  20. <script>
  21. var now = moment().minutes(0).seconds(0).milliseconds(0);
  22. var groupCount = 3;
  23. var itemCount = 20;
  24. // create a dataset with items
  25. var items = new vis.DataSet();
  26. for (var i = 0; i < itemCount; i++) {
  27. var start = now.clone().add('hours', Math.random() * 200);
  28. var group = Math.floor(Math.random() * groupCount);
  29. items.add({
  30. id: i,
  31. group: group,
  32. content: 'item ' + i,
  33. start: start,
  34. type: 'box'
  35. });
  36. }
  37. var groups = new vis.DataSet();
  38. for (var g = 0; g < groupCount; g++) {
  39. groups.add({id: g, content: 'Group ' + g});
  40. }
  41. var container = document.getElementById('visualization');
  42. var options = {};
  43. var timeline = new vis.Timeline(container);
  44. timeline.setOptions(options);
  45. timeline.setGroups(groups);
  46. timeline.setItems(items);
  47. </script>
  48. </body>
  49. </html>