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.

99 lines
2.7 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Custom styling</title>
  5. <script src="../../../dist/vis.js"></script>
  6. <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  7. <style type="text/css">
  8. body {
  9. font-family: purisa, 'comic sans', cursive;
  10. }
  11. .vis-timeline {
  12. border: 2px solid purple;
  13. font-family: purisa, 'comic sans', cursive;
  14. font-size: 12pt;
  15. background: #ffecea;
  16. }
  17. .vis-item {
  18. border-color: #F991A3;
  19. background-color: pink;
  20. font-size: 15pt;
  21. color: purple;
  22. box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
  23. }
  24. .vis-item,
  25. .vis-item.vis-line {
  26. border-width: 3px;
  27. }
  28. .vis-item.vis-dot {
  29. border-width: 10px;
  30. border-radius: 10px;
  31. }
  32. .vis-item.vis-selected {
  33. border-color: green;
  34. background-color: lightgreen;
  35. }
  36. .vis-time-axis .vis-text {
  37. color: purple;
  38. padding-top: 10px;
  39. padding-left: 10px;
  40. }
  41. .vis-time-axis .vis-text.vis-major {
  42. font-weight: bold;
  43. }
  44. .vis-time-axis .vis-grid.vis-minor {
  45. border-width: 2px;
  46. border-color: pink;
  47. }
  48. .vis-time-axis .vis-grid.vis-major {
  49. border-width: 2px;
  50. border-color: #F991A3;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <p>
  56. The style of the Timeline can be fully customized via CSS:
  57. </p>
  58. <div id="visualization"></div>
  59. <script type="text/javascript">
  60. var container = document.getElementById('visualization');
  61. // note that months are zero-based in the JavaScript Date object
  62. var items = new vis.DataSet([
  63. {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'},
  64. {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  65. {start: new Date(2010,7,24,16,0,0), content: 'Report'},
  66. {start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'},
  67. {start: new Date(2010,7,28), content: '<div>Memo</div><img src="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'},
  68. {start: new Date(2010,7,29), content: '<div>Phone call</div><img src="../resources/img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'},
  69. {start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
  70. {start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="../resources/img/attachment-icon.png" style="width:32px; height:32px;">'}
  71. ]);
  72. var options = {
  73. editable: true,
  74. margin: {
  75. item: 20,
  76. axis: 40
  77. }
  78. };
  79. var timeline = new vis.Timeline(container, items, options);
  80. </script>
  81. </body>
  82. </html>