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.

110 lines
2.5 KiB

  1. <html>
  2. <head>
  3. <title>Timeline | A lot of grouped data</title>
  4. <script src="../../../dist/vis.js"></script>
  5. <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  6. <style type="text/css">
  7. body {
  8. color: #4D4D4D;
  9. font: 10pt arial;
  10. }
  11. </style>
  12. <script src="../../googleAnalytics.js"></script>
  13. </head>
  14. <body onresize="/*timeline.checkResize();*/">
  15. <h1>Timeline grouping performance</h1>
  16. <p>
  17. Choose a number of items:
  18. <a href="?count=100">100</a>,
  19. <a href="?count=1000">1000</a>,
  20. <a href="?count=10000">10000</a>,
  21. <a href="?count=100000">100000</a>
  22. <p>
  23. <p>
  24. Current number of items: <span id='count'>100</span>
  25. </p>
  26. <div id="mytimeline"></div>
  27. <script>
  28. /**
  29. * Get URL parameter
  30. * http://www.netlobo.com/url_query_string_javascript.html
  31. */
  32. function gup( name ) {
  33. name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
  34. var regexS = "[\\?&]"+name+"=([^&#]*)";
  35. var regex = new RegExp( regexS );
  36. var results = regex.exec( window.location.href );
  37. if( results == null )
  38. return "";
  39. else
  40. return results[1];
  41. }
  42. // get selected item count from url parameter
  43. var count = (Number(gup('count')) || 1000);
  44. // create groups
  45. var groups = new vis.DataSet([
  46. {id: 1, content: 'Truck&nbsp;1'},
  47. {id: 2, content: 'Truck&nbsp;2'},
  48. {id: 3, content: 'Truck&nbsp;3'},
  49. {id: 4, content: 'Truck&nbsp;4'}
  50. ]);
  51. // create items
  52. var items = new vis.DataSet();
  53. var order = 1;
  54. var truck = 1;
  55. for (var j = 0; j < 4; j++) {
  56. var date = new Date();
  57. for (var i = 0; i < count/4; i++) {
  58. date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
  59. var start = new Date(date);
  60. date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
  61. var end = new Date(date);
  62. items.add({
  63. id: order,
  64. group: truck,
  65. start: start,
  66. end: end,
  67. content: 'Order ' + order
  68. });
  69. order++;
  70. }
  71. truck++;
  72. }
  73. // specify options
  74. var options = {
  75. stack: false,
  76. start: new Date(),
  77. end: new Date(1000*60*60*24 + (new Date()).valueOf()),
  78. editable: true,
  79. margin: {
  80. item: 10, // minimal margin between items
  81. axis: 5 // minimal margin between items and the axis
  82. },
  83. orientation: 'top'
  84. };
  85. // create a Timeline
  86. var container = document.getElementById('mytimeline');
  87. timeline = new vis.Timeline(container, null, options);
  88. timeline.setGroups(groups);
  89. timeline.setItems(items);
  90. document.getElementById('count').innerHTML = count;
  91. </script>
  92. </body>
  93. </html>