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
2.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. <!-- 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>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></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>