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.

63 lines
1.5 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 groups
  25. var names = ['John', 'Alston', 'Lee', 'Grant'];
  26. var groups = new vis.DataSet();
  27. for (var g = 0; g < groupCount; g++) {
  28. groups.add({id: g, content: names[g]});
  29. }
  30. // create a dataset with items
  31. var items = new vis.DataSet();
  32. for (var i = 0; i < itemCount; i++) {
  33. var start = now.clone().add('hours', Math.random() * 200);
  34. var group = Math.floor(Math.random() * groupCount);
  35. items.add({
  36. id: i,
  37. group: group,
  38. content: 'item ' + i +
  39. ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
  40. start: start,
  41. type: 'box'
  42. });
  43. }
  44. // create visualization
  45. var container = document.getElementById('visualization');
  46. var options = {
  47. groupsOrder: 'content'
  48. };
  49. var timeline = new vis.Timeline(container);
  50. timeline.setOptions(options);
  51. timeline.setGroups(groups);
  52. timeline.setItems(items);
  53. </script>
  54. </body>
  55. </html>