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