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.

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