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.

69 lines
1.6 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline demo - a lot of data</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. #visualization .itemset {
  16. /*background: rgba(255, 255, 0, 0.5);*/
  17. }
  18. </style>
  19. <script src="../../vis.js"></script>
  20. </head>
  21. <body>
  22. <p>
  23. Test with a lot of data
  24. </p>
  25. <p>
  26. <label for="count">Number of items</label>
  27. <input id="count" value="100">
  28. <input id="draw" type="button" value="draw">
  29. </p>
  30. <div id="visualization"></div>
  31. <script>
  32. // create a dataset with items
  33. var now = moment().minutes(0).seconds(0).milliseconds(0);
  34. var data = new vis.DataSet({
  35. fieldTypes: {
  36. start: 'Date',
  37. end: 'Date'
  38. }
  39. });
  40. // create data
  41. function createData() {
  42. var count = parseInt(document.getElementById('count').value) || 100;
  43. var newData = [];
  44. for (var i = 0; i < count; i++) {
  45. newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i).toDate()});
  46. }
  47. data.clear();
  48. data.add(newData);
  49. }
  50. createData();
  51. document.getElementById('draw').onclick = createData;
  52. var container = document.getElementById('visualization');
  53. var options = {
  54. start: now.clone().add('days', -3).valueOf(),
  55. end: now.clone().add('days', 7).valueOf()
  56. };
  57. var timeline = new vis.Timeline(container, data, options);
  58. </script>
  59. </body>
  60. </html>