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

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