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.

72 lines
1.9 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. <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  17. <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  18. <script src="../../dist/vis.js"></script>
  19. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  20. </head>
  21. <body>
  22. <p>
  23. This example demonstrate using groups. Note that a DataSet is used for both
  24. items and groups, allowing to dynamically add, update or remove both items
  25. and groups via the DataSet.
  26. </p>
  27. <div id="visualization"></div>
  28. <script>
  29. var now = moment().minutes(0).seconds(0).milliseconds(0);
  30. var groupCount = 3;
  31. var itemCount = 20;
  32. // create a data set with groups
  33. var names = ['John', 'Alston', 'Lee', 'Grant'];
  34. var groups = new vis.DataSet();
  35. for (var g = 0; g < groupCount; g++) {
  36. groups.add({id: g, content: names[g]});
  37. }
  38. // create a dataset with items
  39. var items = new vis.DataSet();
  40. for (var i = 0; i < itemCount; i++) {
  41. var start = now.clone().add(Math.random() * 200, 'hours');
  42. var group = Math.floor(Math.random() * groupCount);
  43. items.add({
  44. id: i,
  45. group: group,
  46. content: 'item ' + i +
  47. ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
  48. start: start,
  49. type: 'box'
  50. });
  51. }
  52. // create visualization
  53. var container = document.getElementById('visualization');
  54. var options = {
  55. groupOrder: 'content' // groupOrder can be a property name or a sorting function
  56. };
  57. var timeline = new vis.Timeline(container);
  58. timeline.setOptions(options);
  59. timeline.setGroups(groups);
  60. timeline.setItems(items);
  61. </script>
  62. </body>
  63. </html>